This is a problem with virtually all self constructed or end user built websites and even some professionally built sites. We’ve all seen it, you land on a web page and the images don’t load right away or they load very slowly. Sometimes you’ll notice that the image scans in, slowly appearing from top to bottom.
What’s the problem? More times than not the problem is caused by the images themselves. It could be the quantity of images or it could be the size of the image files. With today’s digital cameras boasting 20 mega pixels and beyond it’s not unusual to see file sizes in the multi- megabyte range. Take a look at the picture to the left.
The original was 4436 pixels X 2951 pixels and a staggering 1.14 Megabytes (that’s 1,140,000 bytes), a common size for modern digital cameras. Now I knew I was going to place the image into a space on my web page of only 300 pixels X 200 pixels. I could have just left it as is and let the software crunch it down into that small space, that would work. But, every time someone visited my web page the page would first load the 1.14 megapixel image and then re-size it to fit, causing the page to load slower. The solution. I re-sized the image first and saved it optimized for the web, then added it to the webpage. The image you are looking at is 300 pixels X 200 pixels and is only 6.6kb (6600 bytes), a file size 200 times smaller than the original. Meaning this image will load 200 times faster, than the original. Now compound that by the number of images on your web pages and you can see how much of a problem this really is.
So what are the the tips:
- Don’t put to many images on your pages. Sometimes less is more.
- Reduce your images to the size you want them to be on your webpage before you place them on the page. I usually take all the images I plan to use on a website, reduce them to the correct sizes and store them all in a folder ready to be integrated into the site i’m working on.
The result will be faster loading pages and a better experience for your viewers. Good luck & have fun!