My customers say the images load slowly on my site, but it works fine for me.
Slow-loading & distorted images.
I’ve heard this from quite a few people before. I just happened upon a site with incredibly slow-loading pictures, and it prompted me to share with you today how to fix it. While there can be many factors contributing to the speed at which your site loads, I’m going to address one of the most common culprits: image size and resolution.
The reason you may not notice so much on your own site is that your browser caches (or remembers) these files. After you’ve visited your own website and loaded the files once, they pop right back up the next time. However, when new visitors arrive, they may not bother to stick around through the first download.
Adding an image to your website is not the same as posting it on Facebook or Flicker. While these sites may re-size images for you, you’re supposed to do it yourself before you display an image on your web page. There is no need to publish high resolution photos on the internet, unless the purpose is for somebody to download and print them. The limiting factor that determines the quality of image we view on our computer screen is the computer screen itself!
The standard recommended resolution for web graphics is 72 dpi. With continued improvements in monitor quality, some people can see a clearer image up to 85 dpi or so. Beyond that, you’re really just wasting the computer’s effort loading a larger document (the file size is larger at higher dpi, not the display size). Since I do e-commerce, and the photos are key to showing off my products, I like to use 80 dpi. Sometimes I’ll go down to 76 dpi, and sometimes up to 85 dpi. Even that jump from 80 dpi to 85 dpi can impact your page load times.
In addition to resolution, you want your images to be set to the same display size you want to see on your web page. If you take an image that’s 1200 x 1200 pixels and insert it into a space that’s 180 x 180 on your site, the web browser is forced to re-size the picture on the fly each time your page is loaded. While browsers can do this, your page load times will suffer, and the image quality is often compromised as well.
I see these same mistakes time and time again as I browse the web. Often, small business owners are trying to build websites themselves or have their son, daughter, or neighbor do it for them. If you’re paying for professional web development, your webmaster should know this stuff. If yours doesn’t, imagine what else he or she doesn’t know.