.. Your Daily Design Dosis

Website Optimalization for Images

| 12 Comments

Images make up the biggest bulk of web site traffic, that’s a fact. There are several ways to optimize images, because a web site without images is pretty boring. In this article I would like to mention a few suggestions to optimize images and graphics.

Approximatly half of your bandwidth is vapourized by the images/graphics used on your websites and optimizing them can help you a lot in decreasing the load time of your website(s). Not only optimizing is necessary, you need to resize them as well in order to shrink the file-size of the images.

Image Optimization

Always use the “Save for Web” command included on image editing software (Adobe Photoshop or Fireworks). Images represent the heavier load on virtually any website so make sure to optimize them. Alternatively you can also turn to an online image optimizer.

Programs such as Photoshop put extra information in JPEG headers, cameras also do this (also called Metadata). That extra information is not needed to display the image so it is best to remove it. There are a few programs that can do this, here’s one: JPG Cleaner v2.6 (scroll to the middle of the page). JPG Cleaner v2.6 has a Windows GUI and a command line component.

Another way to optimize JPEG images is to lower the image quality, you can do this in various image editing programs. By lowering the percentage of the image quality you can see the result in file-size.

Image Formats

Apart from optimizing images it is important that you choose the right format. In an earlier article here on the gonzoblog we wrote about this: Web Graphics Guide – Image File Formats. Changing to a different file format can dramatically decrease the file size of an image.

  • GIF is ideal for images with few colors like logos.
  • JPEG is great for images with lots of colors and details like photographs.
  • PNG is the choice when you need high quality transparent images.

If you choose the right image format, you can optimize the file size without compromising with the quality. Unless you need the image transparency (alpha layers) that the PNG format has to offer, the JPG format often displays photographic images at smaller file sizes.

If you want to convert your GIF images to PNG and use a PNG optimization program to optimize your PNG’s, you could use for instance pngcrush.

TIP: .bmp are the most heavy files so avoid using them completely on your website.

Minimize the Palette Size of GIF’s

GIFs support 256 colors, but the GIF you are using may not need all 256 color slots in the palette. How can you optimize it? There are several programs to do this. You can open the image in an image editor such as Fireworks and select “Save for Web” from the menu, you can then play with the palette size of the GIF.

You can also use a free Windows program like paint.net to something similar. The program does not matter as long as you can easily change the number of colors and see the results. There is also a free-to-download tool for this, ImageMagick (scroll down for the latest update).

Keep Components under 25K

This restriction is related to the fact that an iPhone won’t cache components bigger than 25K. Note that this is the uncompressed size. This is where minification is important because gzip alone may not be sufficient.

If your website contains animated pictures, you might find it difficult to adjust within 25 KB but if you can, you will for sure see remarkable differences. If you are thinking on how to convert these pictures, you do not have to think a lot as numerous software are available online for resizing of pictures.

Compress your Images even more

When using the “Save for Web” tool in Photoshop, we can compress our images in order to lower their respective file sizes. But, did you know that the compression can be taken even further without sacrificing quality? A site named Smush.It makes the process super-easy. So, just before publishing a new website, run your url through their service to reduce all of your images – thus speeding up your website.

NOTE: the service may convert your GIF files to PNG. You might need to update your HTML and CSS files accordingly. While we’re on the subject, 99% of the time, saving as a PNG is the better decision. Unless you’re using a animated GIF, consider the PNG format to be best practice.

Use the Height and Width Tags

Many people forget to add the Height and Width tags on image codes, .. sometimes I still do too! Those tags will make sure that the browser knows the size of the image before having to load it. The browser will now reserve a spot for the images while loading the rest of the page, speeding up the whole process.

images optimization

Don’t Scale Images in HTML

If you have an image that is 200 pixels by 200 pixels and you want to use it in a 100 pixel by 100 pixel space, resize the image using image editing software. Do not use HTML to scale the image by setting the height and width in the img-tag, resizing images in HTML makes them load slowly.

Do not use Images to display Text

The text in an image not only becomes inaccessible to the readers and search engines but also increases the load times of your web pages as more images mean more Kbytes per page. If you want to use custom fonts in your site, you should learn about CSS and type-replacement techniques (@font-face, Cúfon, Typekit, etc.) to display text with custom fonts more efficiently.

Replacing Images with CSS

Heavy images are one of the reasons behind making your website slow since they consume a lot of bandwidth. So while designing a website you need to think intelligently and act wisely.

It’s possible to present images as part of the background, called up through CSS. If you’ve got an image that’s 200px by 100px you can use the following HTML code:

<div class="image-name"></div>

And this CSS:

.image-name
{
background-image: url(filename.png);
width: 200px;
height: 100px
}

Doing this consequently really improves the download time of your pages. Browsers basically download background images after everything else. By using this technique, your text will load directly and your site users can freely roam about the page while your 50kb fancy image downloads.

NOTE: This technique disables the ALT attribute though so if you really want to have one then replace the above HTML code with this:

<image src="filename.png" alt="description" />

Also replacing your buttons (images) by CSS will decrease your load time, nowadays it’s possible to make great looking and fancy buttons in CSS3 (rounded corners, gradients, box-shadows, outlines, etc and you can even include a hover [mouse-over]  effect).

Make use of CSS Sprites

Sprites are nothing but a collection of images, combined in 1 big(ger) image, which can be called at a particular area in a site using various CSS techniques. CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

The big disadvantage of sprites is that, the images cannot be repeated.If you want to know more about sprites, here is a detailed tutorial on Sprites.

Preload Images (if needed)

By preloading images you can take advantage of the time the browser is idle and request the images you’ll need in the next (follow-up) webpage. This way when the user visits that next page, you could have most of the components already in cache and your page will load much faster for the user.

An example of preloading in HTML:

<body onload="MM_preloadImages('example.jpg','banner.gif','logo.png')">

Conclusion

One of the easiest ways to reduce page load times is by optimizing your website images to reduce their file sizes as much as possible. Optimizing images not only makes your web pages load faster, but also reduces your bandwidth consumption without any quality loss for your images.

In the next part of this ‘Website Optimalization for Load Time” serie we will take a look at (online) tools to measure your load time. As always, please feel free to share your questions, comments, and recommendations.

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

12 comments

on this article: “Website Optimalization for Images”
  1. Great resources to use when you don’t feel like messing with Photoshop ;)
    Thanks Gonzo!

    • Hi Gabi,

      Some of these links/resources are specially to clean up your (web)images for faster load time. Before using these tools, you first have to edit your picture/image. I believe Photoshop is one of the favorites in the community, I myself like to use FireWorks when working with images for the web.

      Photoshop I use only when I really have to manipulate images into a new image, there are so much possibilities with this photo-editing program. Thanks for your comment and visit, hope to see you next time? Cheers & Ciao ..

    • Hi Ton,

      Thanks for your visit and your comment, much appreciated! Over 2 or 3 weeks I want to write a new article with some free (online) tools to measure load time of your website, .. stay tuned ;-P

      See you next time? Cheers & Ciao .. (groetjes!)

  2. Hi site,

    Glad you’ve been able to learn something here ;-P
    Love these kind of comments, thanks for the comment! Cheers & Ciao ..

  3. Hi Margarette,

    thanks for your compliment and hope to see you back on time? Cheers & Ciao ..

  4. Hi Lyndon,

    thank you so much for your compliment, I really appreciate that! Have a great day, Cheers & Ciao ..

top