Tips for optimizing your web images

By Ryan Boudreaux

April 14, 2011, 11:02 AM PDT

Takeaway: Ryan Boudreaux explains the importance of optimizing your images for the web in order to balance quality and load times. Here are his rules of thumb for optimizing images and using appropriate file types.

There are several image editing and manipulation tools, programs, and applications available for web and graphic designers, and you probably already have your favorite "prepare for publication" imaging tool in place. This will not be a discussion on the various editing tools themselves, but will concentrate on the best practices and techniques for optimizing your images and graphics on the web.

For a quick example before I get into the whys and hows for optimizing images on the web, take a look at the two images below, and without taking a peek at their properties, notice similarities and differences when comparing them to one another (click on images for full-size).

Figure A

Figure B

Figure A is saved as a .jpg image with a baseline standard format at maximum quality, and is 514KB in file size at 800px wide. At a dial-up 56.6Kbps Internet access speed it would take approximately 90 seconds for this image to be rendered fully on the browser screen. My apologies for those of you who are using dial-up for your Internet access.

Figure B is the same image saved as a .jpg, however, with the format set to progressive with 5 scans, and the quality set to low, and it comes in at just 59KB in file size at 800px wide. At dial-up 56.6Kbps speed this image, would take just about 8 seconds to render fully.

What differences do you notice with the two images? Colors, load times, quality, these are all factors to consider when optimizing your web images. I kept the image pixel sizes consistent for this comparison; however, to fully optimize this image, I could have reduced the pixel width and that would have reduced its web page load impact in addition to the other optimizing factors.

Why optimize web images?

What are the motivating factors that direct our attention to obtain the most favorable web images? Several reasons for optimizing your web images include:

Bandwidth and throughput: We all know that bandwidth has been a buzzword for many years now, and getting your web documents to render as fast as possible in users' browsers means keeping your graphic and image file size to a minimum. The challenge becomes maintaining a high quality graphic while keeping a lean file size; the balance of these two elements is key to optimizing your web images.

Data storage and space: While data storage space and servers become less expensive every year, it is still prudent to limit your image size. As sites grow they typically show a steady growth in the number of images. For example, a particular image directory for a sub-section of a Federal agency Intranet site that I maintain includes 18 sub-directories with 360 images, combining for a total 24MB of storage space, and for an average of 69KB per image, that is actually considered to be slightly on the heavy side for a typical optimized web image.

Reduced costs: Optimized images add up to less server and storage space requirements, less bandwidth and throughput requirements, and therefore reduced hosting costs, especially when using a third-party ISP or Internet network solution provider.

User experience: The visitor enjoys a better experience when page load times are minimal; nothing irritates the guest more than having to wait for image-heavy web documents to load in the browser. Optimized images help keep the load times to within seconds.

Tips for optimizing your web images

Image file formats: The rules about file formats vary between organizations, each web development house typically has a specific guideline. Here are three file types that are suited for the web.

·         GIF: The .gif file format is really a bitmap consisting of a grid made of pixel squares, including transparency pixels with up to 256 colors, and data about every pixel is saved. It is a great file type for saving graphics, charts, bullet points, icons, buttons, and textual details.

·         JPEG: Although, the general rule that many follow is to reserve the .jpg file type for images, and .gif file type for graphics, charts, etc., I would apply the .jpg file type as a rule of thumb if your web site leans toward high end photography galleries, or other high quality graphic designs. This file type is good for saving images with millions of colors, including graphics with a variety of shades and gradients. Just note that typically the .jpg file type images are much larger and take longer to load. However, most image editing tools allow you to select the file compression for .jpg. For example, you can choose Maximum, Very High, High, Medium, and Low, so you do have some control over the ultimate file size. To test the image, be sure to save it under several compression settings and then test them for quality rendering and load times. Balancing quality, compression, and load times can be a judgment call depending on the particular image and the web document it is called within.

·         PNG: The .png image file type was developed in answer to the .gif patented file type, and while it can display a larger range of colors than the .gif, it does typically result in a larger file size. Many use the .png file format very effectively for buttons and icons, which are usually small pixel dimensions anyway, so they are not so large when utilized in that fashion. A typical 16×16 pixel .png icon will weigh in between 1KB and 4KB, or a 48×48 button at between 3KB and 7KB, so when utilized in this fashion they are optimal. For any .png image over a dimension of 200 pixels you start to see much higher file sizes.

Saving images for the web: Here are several rules of thumb for saving your optimized images for the web.

·         Make sure you have saved a copy of the image as a lossless version, meaning that you can come back and edit it again later if needed. For example, .raw, .tiff, .png, .psd file formats to name a few. Especially if several layers have been added to the image or graphic file, you never know when the customer will want to change a word here or a graphic element there, even after it has been up on your site for some time.

·         If it is a photograph, then select .jpg file format to save the final image. Remember to test several quality and compression settings until you get the perfect balance between quality and load times. If your image editing tool allows the "progressive" setting use that as it will allow the image to "blur" or display gradually as it is rendered on the web instead of line by line. The load time is not improved with the progressive setting, however it does give the image a softer look and feel when rendering on screen.

·         If your .jpg image is to be used as a background on the web document then use the Medium or Low compression setting. Otherwise for displayed images keep the compression at High.

·         If you have the option to adjust the image "quality" then use the settings to make the appropriate change; again, remember to strike a balance between acceptable quality and suitable file size.

File sizes: Depending on the use of the image follow these guidelines for optimal file size:

·         For background images try to keep the file size around or below10KB.

·         For banners or header images a file size up to 60KB is acceptable.

·         For high end photographs try to keep them to within 100KB at an absolute maximum.

 

Quick tips: Four things to nail down early in the web design process

By Ryan Boudreaux

 

Takeaway: Ryan Boudreaux identifies four areas where it's best to clearly define basics and work out details before getting too far into coding and design elements.

This group of four quick tips are all things you want to consider early in any new web design project. Sometimes the excitement of beginning a new project can tempt you, and an eager customer, to skip too far ahead before all of the basic details are fully worked out. Unfortunately, this can result in re-work, wasted time, or elements that don't mesh in the final product. Here are my top four areas to nail down when you start a new web design engagement.

#1 Content before code

Before starting any coding, design, and image work or getting a domain name for the new web site, it is a good idea to have the content up front. Building the site elements, layout, coding, imaging, and design before the content is like putting the cart before the horse — it goes nowhere fast. Once the content is clearly defined, then you can make the decisions on what elements will work and the ones that can be omitted, and this will save you and the customer a lot of headache, effort, and wasted time, which will also have a negative impact on the customer's budget.

#2 Branding and logo

 

In the same approach with developing the content, it is always a smart plan to have the corporate branding and logo well defined and memorable before launching thewebsite. If necessary, get the aid of a professional design firm to develop a logo and branding, and ensure they deliver a graphic that stands out from the rest and is easily recognizable.

#3 Test the usability

You don't have to necessarily hire a usability test firm to carry out your usability study, though many large organizations do, and there is nothing wrong with that approach. It always makes sense to find a group of folks who can pick apart your site before it goes live. Your test group should be instructed to find any bugs, glitches, or design flaws before you hit the streets with your new website URL.

#4 Web standards and semantics

Make sure your semantic code is set to a standard that accurately describes the content, and uses the right element for the job, for example, with effective and descriptive Class and ID naming conventions. Web standards and semantic practices will ensure that your pages are found and ranked among the popular search engines and improve the relative value of the website.

For example, many foodie bloggers were elated with the recent Google Recipe Search tool, until the discovery that the new microformat powered algorithms were excluding many of their sites, and many were not being ranked at all because their blog code did not have named element ids or classes such as "ingredient", "procedure", "amount", "preparation", "duration", "cooktime", "instruction", "yield" or "recipe" listed in the semantic code. Managing your microformats can be a daunting task, especially when having to convert them into existing code.