Home / tutorialtuesday / Scaled Bitmaps Don’t Have to be Blurry

Scaled Bitmaps Don’t Have to be Blurry

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.
scaled

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.

About Foster D. Coburn III

Foster D. Coburn III
Foster D. Coburn III is the author of thirteen books on CorelDRAW, the latest being CorelDRAW X6 Unleashed. He has been a contributor to numerous magazines. Foster has taken many projects, including this Web site and many more, from the early design stage through to a finished piece. He has been a featured speaker at many graphics and Web conferences.

Check Also

Quick Answers to Wide Range of Questions

I’m convinced that people just don’t pay attention these days. Yes, myself included. That includes …

One comment

  1. 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.

Leave a Reply

Pin It on Pinterest

Shares
Share This

Subscribe To Our Graphics Unleashed Blog Posts

Join our mailing list to receive the latest blog posts from Graphics Unleashed

You have Successfully Subscribed!