Do you find waiting for a webpage to load annoying? Most people who come to a slow website will just move on down the road, and page loading time is taken into account by Google to determine your search engine ranking.
There are many factors contributing to website lag, but one of the biggest culprits is Huge Image Syndrome. Just because your camera will produce an image that could fit on the side of your house, doesn’t mean you should upload that size image to your website. Oh, you can do it and it will look just fine. The problem is that it is taking up space in your files and when you add it to a post or page your web browser is having to work overtime to downsize it to fit on your site.
It is a little like having heart disease; most people don’t know they have clogged arteries until they start having chest pain or keel over. They don’t really believe that eating all of those French fries is mounting up to a disaster.
The silent killer of website page load times is the library of huge uncompressed images you’ve been merrily uploading to your site all this time. Like the fast-food junkie, most people have no idea that uploading all of those beautiful images is what is causing their website to start gasping for breath.
If you or any of your loved ones are having these symptoms, I’d like you to share this post with them!
Megapixels
These days when everyone has their iPhone at the ready, the digital photos we take are 8-megapixels – or larger. Our digital cameras work by having image sensors that consist of millions of pixels. When snapping a photo, each pixel builds up an electrical charge in response to the light it “sees.” A megapixel actually means “a million pixels” — so if your camera is 8 mg pixels, it has 8 million image sensors and can collect a lot of digital information that is handy for printing large format images.
For example, if you are in the habit of printing 16″ x 20″ photos, you would need a camera with 10 megapixels or more. The corresponding size of a 16″ x 20″ image, when uploaded to the web, would be about 3264 x 2448 pixels. Most websites are typically viewed at no more than 1920 pixels wide and 1080 pixels high. Typically, you’ll only need to upload images of that size for your site’s hero image.
Check the width of your main content grid. The grid size should be the maximum size for uploading images to a website. In the example below, the grid is 1140 px so a full grid width image will be 1140.
Besides the hero image or any wide body images, the other images on your site will be the grid width or variations of that number when divided into columns. Routinely uploading images to your site that are larger than required is like feeding your site a steady diet of bacon. Sooner or later it will lead to a slow death.
Resize and Optimize with an Image Editing Program
The other option is to optimize your images before uploading them to your website. You can resize your images one by one by using a photo editor like Photoshop, IrfanView, or GIMP to crop your images to get rid of an extra part of the image that you don’t need and then to reduce the size to the exact size you need for your image on your page or post.
Optimize Your Images with a Plugin
There are three great WordPress plugins, ShortPixel, WP Smush.it and EWWW Image Optimizer that work similarly to optimize each of your resized images as you upload them. This means it will compress the image files and remove the metadata.
Most people don’t realize that there is a wealth of information hidden in each image file. This “metadata” might include what kind of camera was used and where and when it was taken and other interesting information you did not even know was encoded into the image. This metadata adds to the size of the image file and is totally unnecessary for the web.
As to compression, the image on the right will load twice as fast. Can you tell the difference? Enough said.
These plugins will also take care of past sins by optimizing images in media folders that you have previously uploaded to your site.
The premium versions of these plugins offer a bulk optimize feature that will do the job fast and usually more thoroughly. Remember to back up your site before running bulk optimization on the site.
But, don’t rely on these plugins to take care of all your bad habits. Don’t upload these huge 2,500 – 5,500 images and expect your site not to feel the effects.
Avoid Browser Resizing
It’s best to crop and re-sample your images to make them the exact size they will be displayed on your website. This will keep loading times down to a minimum. A lot of sites have resizing built into them, however, if you’re using a 1000x1000px image and only displaying them at 300x300px why make everyone visiting your site wait for those extra pixels to load? Instead, crop the image with the WordPress crop tool or change it to the correct dimensions in Photoshop.
Finding the Exact Image Size You Need
- Using the Chrome browser, press F12 or right-click anywhere inside the web page and select “Inspect Element”.
- In the new window that appears in your browser, click on the magnifying glass to turn on the inspection process.
3. Now click on the image to reveal its dimensions. The Chrome inspection tool displays the image width and height – the first number is always the width.
Change Media Uploader Settings
When you upload an image to the media library, WordPress will generate three additional sizes for each image, a thumbnail, a medium-size and large size in the same aspect width to height ratio of the uploaded image.
You can change the default sizes of these auto-generated images to approximate the sizes that you’ll most often be using on your site. You can do this by going to the WordPress Dashboard > “Settings” > “Media”. Going forward you’ll find these new sizes will be saved in the Media library.
While you are uploading images, you may as well use the best ones for the job. Choose the correct type of file extension for the purpose. Use .jpg images for most images on your site. But be careful about copying them over and over. Every time you copy a .jpg it loses quality. Use .png images when you need a transparent background or for images that have sharp full-quality text. Use .pdf files are best for brochures or forms that aren’t actually on the website.
Next Steps
It’s time to do a little diagnostic testing. Get a read on your site’s performance with GTmetrix. The results of this scan will tell you if the size of your images or your failure to scale them properly are affecting your site’s load time. I suggest testing your site before you change anything and after making the changes suggested in the article, recheck your site again. Let me know how it works for you!
