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.
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
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?
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 compression post 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.
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.
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!
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
Image compression software
- ImageAlpha (Only for mac users) (For PNG's) (Recommended)
- ImageOptim (Only for mac users) (Recommended)
- PNGOptimizer (Only for Windows)
- FileOptimizer (Only for Windows)