Scaled Bitmaps Don’t Have to be Blurry

July 5, 2016

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.

Post Discussion

1 Comment

  1. Tara Li

    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.

    Reply

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like…

Business Improvement 2020

Boosting Your Business in the New Year and New Decade

How did you promote your business when 2010 rolled over on the calendar? Did you even have a business ten years ago? Maybe you were part of a different business. The same questions could be asked about where things stood even a year ago. Let's...

Read More

Seamless Textures Unleashed

Seamless Textures Unleashed Now on Facebook

Over the years, we've had a number of Web sites in different areas that were all managed on the Graphics Unleashed Facebook page. Two months ago we rolled out a separate Facebook page for Vehicle Templates Unleashed. Now we have created a...

Read More

Tech Disasters

Week of Tech Disasters and Solutions

The local weather was spectacular a couple of weeks ago and I wanted to take a day off to have some fun. So I planned a day of scuba diving that Friday to end the week on a high note. The diving went well, but the day before was the beginning of...

Read More

Foster D. Coburn III

Foster D. Coburn III is author of 13 best-selling books on CorelDRAW and has been a contributor to numerous technology and graphics-related magazines. Foster has taken many projects, including this Web site, from the early design stage through to a finished piece. He has been a featured speaker at many graphics conferences. His first Web site was built in 1995 and he has been working exclusively in WordPress since 2013.

Recent Posts

Pro WordPress Help

WordPress Web Design and Maintenance

Graphics Unleashed Donations

$
Personal Info

Donation Total: $5