One of the most common contributors to a slow website is large images that are not optimized for the web. Optimizing all images to be web friendly is crucial to your website’s overall health and page speed scores, and can even help with SEO rankings. So what are you waiting for? It’s time to get those images optimized!
Image Optimization Tools:
There are many automated tools and plugins out there that can help optimize images. At Tenrec, we utilize a plugin called Smush (as part of the WPMU toolkit) on all of our WordPress sites, and it’s something we would highly recommend to other WordPress users as well. Smush compresses images uploaded to your media library automatically, without you needing to worry about how they might be slowing down pages or affecting image quality.
Using the Smush built in dashboard, you can also customize the settings for how and when your images are optimized. It will notify you about any potential issues with images that are slowing down your site and help you quickly locate them. You can also use the tool to strip out unnecessary metadata that can often make images larger than they need to be, or set a max width and height if you know exactly how large your largest images should be.
A fun feature with Smush allows you to keep track of all the space you’ve saved by Smushing your images too, just so you know how you’re doing:
While Smush is a great tool to assist with image management for the novice user, it doesn’t leave you with a lot of control over how your images are being optimized. In some cases, if the original image uploaded was very large, even a compressed version of that image could still be too big. With that in mind, the best option for image optimization, is to appropriately size them for the web before uploading to your website’s media folder.
When prepping your images for the web, the goal is to reduce the file size as much as possible, without sacrificing the image quality.
General Compression Guidelines:
One important thing to understand is the difference between image size and image dimensions. The size of an image refers to the file size, usually measured in kilobytes (KB) or megabytes (MB) and indicates how much space the image needs to be stored on your website. A good rule of thumb is to try and keep your hero images around 300-400 KB and other non full width images down to 100-200 KB.
Then there are image dimensions, which you will see measured in pixels for the width and height. Image dimensions can be adjusted based on how large the image needs to be on your website. Is it a full width hero image, or just a small thumbnail? For example a hero image might be 1440 x 500 px, while a thumbnail would be around 180 x 180 px. If you aren’t sure what size your images should be, consult with your designer or web developer.
Another thing to consider is whether a JPG image or a PNG is more appropriate when optimizing and saving your images. While both are acceptable for the web, PNG files tend to be larger (also known as a lossless compression file format), but are great for things like illustrations or logos, or if you need a transparent background. JPEGs are often smaller files (lossy compression file format) and good for photographs or images with complex colors. Read more about the difference between lossy and lossless compression here.
If you don’t have a professional photo editing tool like Photoshop to compress or resize your images, you can also use different online tools like TinyPNG or ResizeImage.net to help reduce your file sizes. See this example below of an image before and after being optimized. The one on the left is the original and was 834 KB. The one on the right was compressed with ResizeImage.net and is now 127 KB. This is an almost 85% savings, but to the human eye there isn’t a noticeable difference in quality:
If you need assistance compressing your images, reach out to your Tenrec Account Manager or account_services@tenrec.com for help on this and other topics.