It is well known that you only have a few seconds to capture your website visitors. If they don’t find what they’re seeking in a hurry, they’ll click away. Well, if your site is slow to load, they’ll click away before they ever see anything on it. One of the elements that slows down page load time are the images you use to make your site or posts look good. Here’s what you need to know about working with images and how to optimize them for fast load times.
Photos that you take with your camera are meant to be enjoyed in a large display size and at a high resolution. They are optimized for viewing on your computer or a digital frame, or even for pretty printing. But, what makes them vivid and clear on those devices also makes them slow to load when displayed on a website.
Optimizing a photo for online display means reducing its file size, and often means reducing its physical display size as well. These are two different processes, and each is explained below.
Pixels and Resolution Explained
This is a super brief explanation of a very large topic, but will suffice our purpose with it. Digital images are rendered in pixels, which are the millions of dots that resolve into an image, hence the term resolution. The more dots, the better the image quality. This value is counted as dots per inch, or dpi. (On a printer and TV, the dots are round. On most computer screens they are square.)
You want your camera or source image to have as high a resolution, or dpi as possible. You want the image on your site to have the lowest resolution that will leave it clear enough to see. In other words, you want to use as few pixels as possible to render a clear image.
Show Me the Numbers
The examples below are typical, but yours will vary depending on your photo source and optimization techniques.
A small camera photo in 4:3 aspect ratio (width to height) will have the following numbers:
1920×1440 display size
300 dpi
1MB (megabyte), which is 1000 KB (kilobyte) file size
What you want to achieve by optimizing your photo are the following numbers:
300×400 display size
72 dpi
15 KB file size
The file size is what contributes most directly to the loading speed of your pages.
Large files load slowly. Small files load quickly.If you upload a photo from your camera and simply change the display size to fit on your web page, it does not change the file size.
Crop, Resize, Sharpen, and Optimize First
The best way to ensure fast page load times is to optimize your images before you upload them to your site. The great news is, there’s an easy way to do that. Best of all, it’s free. Watch this video tutorial for using Web Resizer to work with your images. In just a few minutes you can easily crop and resize your images and then use the terrific sharpen feature so they will be crystal clear after the file size is significantly reduced.
And, this free tool is also great for optimizing images to display on your mobile devices too.
What Every Site Owner Should Know could save you hundreds of dollars and months of frustration. Free with subscription to BlogAid News.