02 · 07

Why Are My Images Taking Forever to Load?

Media_httpwwwoneminut_yuezt
I have been to many websites where I have had to wait before all the images are loaded. Talk about A-D-D. When that happens, what do you think I do? That's right, I click the back button. Us as a community have become acute to having things FAST! Heck, there is fast food, instant potatoes, etc. Face it, people on the internet want things in a flash. You may be asking yourselves this exact question about your website. If so, here is how to reduce and ultimately eliminate load times for images:

Image Slicing

When we as Web Developers talk about slicing images it basically means slicing larger images into smaller sections to allow for faster load times.

How Many Images are on Each Page?

You will need to limit the amount of images that you place on each page of your website. The more images you have on a certain page, the longer it will take to load. Consider: You only need to have images that are absolutely necessary for that certain page.

Animations

We all know that animated images are cute, and get visitors attention, but they slow the server way down. Animations in my opinion are last season and are not really needed now days. If you absolutely want animations on your website, please limit the amount that you have.

Image Size

What are the sizes of the images on your website? Let's say that you have an image that is 45k in file size and is 400 x 500. If you place that image on a page and notice that it is to big, you just resize the height and width on of the image to fit within the page. You might think that the file size with shrink also. NOPE. Just because you have changed the hieght and width of the image, it doesn't change the file size. It will still have the same 45k file size. You will have to use Photoshop or an equivalent program to reduce the file size of the image so that it will load faster.

Height and Width

When your browser loads images on web pages, it looks at the height and width attributes first so that it will be able to determine how to layout the images and the text within the page. If you are not using these attributes, the browser will have to determine the size of the images first, then load the text.

Formatting

When working with images, there are 3 formats that can choose from. There is GIF, JPG (JPEG), and PNG. Here is a brief description of each:
GIF images are the simple ones that have minimal colors, such as; clipart, bullets, charts, etc. If you have images that are simple, you need to be using this extension. JPG images are more complex and have more colors in them. They include shadows, gradients, etc. When using this extension your images display very well. PNG image can go both ways. The main use of png images are for transparency. PNG-24 (the high-end format) displays a gorgeous, transparent image that retains any enhancements that you have added.
Make sure that you are using the correct format for the images that you place on your website.

CSS

You can also use CSS to source in images for your website. Since the css file is loaded first when loading a web page, any images that are included in the css file with load faster. You will need to use images as backgrounds to use CSS. For instance, let's say you have a region in the header of your website that consists of an image, you might want to do something along these lines:
#div_header {background: url(images/header_image.jpg);}
This will source in the image as a background image for that region. So with these tips, make sure your images are loading in a timely matter.

Over to You

I would love to hear your comments on this subject! Leave them below.