Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Speed up your website – Part 5: Images

Thursday, July 19th, 2018 by Servage

This is the fifth part of a simplified explanation of the “Yahoo best practices for speeding up your web site“. Read the fourth part here. The fourth part is about image related optimization.

Minimize image file size

Avoid using GIF files. If you have GIFs, try to convert them to PNG, in order to evaluate if you might save some size. PNG files are more efficient in terms of quality and size. Most browser-issues with PNG are resolved, so there are not many things in favor of the GIF anymore. If you must use it, make sure to include the amount of colors in the color palette, which are necessary. Generally you should be aware of the image settings when exporting images. Compromising just a little with quality may give much lesser sizes, especially with JPEG images.

Use CSS sprites

Instead of having a single image file for each icon, combine them into a single sprite file. Usually you have a set of icons with the same proportions, making it quite easy to fit them into a rooster. Now you just load the sprite file every time you need an icon, and select the specific icon by navigating the sprite file with css background top/left/right/bottom settings. Still remember to minimize color-usage (i.e. amount of colors, so you can fit it into a PNG8 for example) and don’t be too generous with the gaps between icons. It might not cost much extra space, but reducing the resolution will help the client’s browser save memory (hence increase load-speed).

Avoid scaling images with HTML

Images should be used in their native resolution. There is no point in having larger images than needed, except for a waste of resources. Having too small images will look bad when they are upscaled. So create images in the size you need (i.e. use thumbnails for small previews).

Use a small cacheable favicon

The little icon that most browser show for a website, next to the URL in the address bar, is based on the favicon file, which must be stored in the root of your webserver. Optimize the image according to the tips above, and make it cacheable (setting expires header to a few weeks, or even months). That would be one less request to handle.

Speed up your website – Part 5: Images, 3.8 out of 5 based on 12 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.