February 14, 2014

8 ways to optimize your images for performance

Bluntly said: images are a pain when it comes to fast loading times on your website. Images are much bigger than the actual code for the website in most cases and therefore take the longest to load. On the bright side you can do a whole lot of optimizing with images to make them load a lot faster and they can give you a small SEO boost as well.Credits for the image should go to TheGoronClub

Slideshare presentation

After watching this short Slideshare presentation you can read more detailed information in the article below.

Why some webpages take ages to load due to poor image optimization.

Have you ever seen a website which loaded really slow due to a lot of images? Usually this is due to poor optimization. There are some things a lot of people neglect during web development:

Make sure the image file is not larger than that it is used on the website. I have personally seen websites where the logo was 1920px wide while it was used at only 200px wide. Don’t be one of those people.
Compress every single one of your images. Image files tend to contain more information than they actually need to be shown on the website. JPEG’s for example tend to contain the name of the program they were exported from. There are a lot of programs which can compress your images for you so they will only contain the information necessary to be displayed on the website.
Include the HTML width and height attributes so that the browser knows how they fit within the layout before it’s loaded. This makes sure the sites content doesn’t get bounced around while images are still loading.
Think about the quality of your JPEG’s. Do they really need to have 100% image quality?
Serve your images from a cookieless domain.
Make sure to turn on caching for images.
Use CSS sprites for background images

Resizing images to the proper format will enhance your page speed

Resize images to the size at which they are needed

If you are going to show your image at 200px wide, make sure your image is actually 200px wide then. Why should you burden your users with extra loading times if it’s not necessary and why should you burden your own server with the extra bandwidth?

Well, you don’t. So let’s resize those images. If you have a program like Photoshop or Pixelmator installed we can get started.

Photoshop users, please use this tutorial to learn how to resize your images in Photoshop.
Pixelmator users please use this tutorial to learn how to resize your images in Pixelmator.

Compress all of your images as much as you can

Image compression is a bit of a tricky subject. You can find a whole lot of information on this image compressionpost by HTML5Rocks.com. For the Mac users out there i really recommend to use ImageAlpha and ImageOptim.

ImageAlpha lets you choose the amount of colors in your PNG images. Most png-images can be trimmed down to save up to 80% or 90% of file size without noticing almost anything of the lost quality.

ImageOptim lets you compress any kind of image and it just removes unneccary information from the image files so that they become a bit smaller. This can also remove a lot of the file size.

Note: Windows users can use PNGOptimizer and FileOptimizer which work in a similar way to ImageAlpha and ImageOptim.

Include the HTML attributes width and height

In HTML it’s possible to specify the image size by including the width and height attributes like this:
<img src="wesley-smits.jpg" alt="Wesley Smits" width="200" height="200"/>.

This doesn’t improve the performance of your page directly, but the browser will know the size of the image before actually loading it.This is very useful because if your page is loading slowly then users might be reading your content before the images are loaded.

If the browser does not know the size of the image yet than it won’t reserve this space and the entire page will bounce around for the use while reading. This is a very unfriendly user experience.

Jpeg images can be saved at a lower quality to reduce the file size

Do your JPEG’s really need to be 100% quality?

Most image editing tools like Pixelmator give you the option of giving a quality percentage on your JPEG’s when you save them for the web. Most people choose 100% because their images look best that way. Often you can easily get away with a bit less without it being noticeable on the site. You should experiment a bit with how much you can get away with. I personally use 75% most of the time and can easily get away with it and save a great deal of file size on my JPEG images.

Serve images from a cookieless domain

Images are static files without user interaction so they have no need for cookies. You can shave off a couple of kb from the images by serving them from a cookieless domain.

Make sure to turn on caching for images

Images are static files which are not often changed. For this reason you can turn on caching so that your users will store a copy of the image on their hard drive. This way they don’t have to download them again when they revisit your page. This is a win-win situation since the user doesn’t have to wait so long and you have less bandwidth on the server! Follow my article on caching to learn how to do this.

Use CSS sprites for background images

CSS sprites are big images which consist of a lot of small images. Lots of sites have background images for basically everything. Menu items, buttons, logo’s, tiny images for in submit buttons and before H1 tags. Each and every one of those images is an HTTP request to the server. The more HTTP requests you have the less efficient your pages is.

This is where CSS sprites come in. You can use a CSS spriting tool like this to combine all your background images into a single image.

After that you use the CSS background-position property to show the right part of the image as background for the given element. Some tools like the one i’ve linked to just now already give you the CSS code. So there’s no excuse not too take 5 minutes out of your day to speed your site up with CSS sprites!

Useful tools

Some useful tools for optimizing various aspects of images. I’ve tried finding both online and desktop tools for you and i’ve also listed my own recommendations for all categories.

Image editing software

Desktop tools

Photoshop
Pixelmator (Only for Mac users) (Recommended)

Online tools

Picmonkey (Recommended)
Pixlr

Image compression software