A few days ago, Jeff Harrison wrote a post entitled Scaled bitmaps on websites = blurry images. If at all possible, we should avoid using a bitmap on a Web site that is scaled. Yet there are times you can’t avoid it when designing a responsive Web site.
Let’s look at the same image Jeff used in his example.
His example was horrible blurry because the scaling was minimal and distorted the image. The horizontal number of pixels were scaled smaller from 198 to 195 pixels while the vertical number of pixels were scaled larger from 24 to 25 pixels. It would be very easy to export the same logo at the correct dimensions to eliminate this problem.
When designing a responsive Web site, it has to adapt to different sizes of computer screens, phones, tablets and other devices. It just isn’t possible to have a single sized graphic that is perfect for all device screens. This means graphics have to be scaled, but it needs to be done intelligently.
The first step is to create a graphic for the highest resolution needed. Images always look better when scaled down and can look awful when scaled up. When you scale an image, it must be done proportionally (unlike the example shown earlier). If the image is saved in JPG format, the compression can introduce other flaws. Either use minimal compression or save images in PNG format instead.
PNG is better for relatively flat images, such as logos, anyway. Even better is to build the logo in a vector format, and export it to SVG. Be careful in doing that, though – since SVG can contain bitmaps as a part of its structure, some SVG exporters simply generate a bitmap and wrap it in the SVG format structure.