This site may contain affiliate links for which a small commission is received.
Most bloggers that have built their own site will tell you that learning how to optimize a website is one part configuration, one part trial -n- error and the rest a bit of a hack. I say hack because most of us aren’t SEO experts. There is a simple process to follow that always makes the right image size for a website. That process includes a list of items covering website image optimization. While common sense dictates using the right image size for websites matters a lot, I’d like to offer tips I use which are as critical to website performance optimization as webpage image size. Some of these are what I refer to as “simple stupid optimization hacks” every website owner should do.
How fast and efficient a WordPress website is tied to website performance optimization which in turn is affected by how well images are optimized for the web. So let’s just unpack what those simply stupid hacks are that I recommend.
#1- Reducing Photo File Size
If you do nothing else, do this. I use to think based on GTMetrix that my images had to be the exact size on the page. That is if the webpage was using a 300 x 300 image I should upload a 300 x 300 image to my media library. Frankly, I don’t think that’s the critical path because WordPress by default creates 150×150, 300×300 and 1024×1024 images for any image uploaded into the media library. That means that uploaded images are recreated in multiple sizes without any additional effort by you. Yes using a size close to what you need isn’t a bad idea but other factors play a role.
This might surprise you. Reduce image file size, I’m not referring to the image size in pixels but the actual file size in kb, and you’ll see that the webpage loads faster. A good rule of thumb is to keep image file sizes below 500k to see a positive response in page loads. So a hero banner that is 1920 x 850 which is under 500k in size would load faster than a Pinterest rich pin 735×1102 image of over 500 to 1 MB in size. Hate to say it but performance takes a hit faster with large files that might not necessarily be large images. When uploading images, make sure the total file size is less than 500k. You do that by balancing out the image resolution (DPI), the file format (JPG vs PNG), and the image size (KB, MB).
Note that JPG images are always smaller than PNG. Use JPG files where appropriate. PNG is only required if you need an image with a transparent background on a colored section, or if you need better resolution. The catch is that free stock image sites offer PNGs; high-resolution files are easily greater than 500k especially when over 1280 x 1080 pixels in size. Before uploading to your website, convert the PNGs to JPGs or crop them with your favorite editing tool.
#2 Image Compression Plugins
One image optimization tactic is to compress the file once you’ve created it in an appropriate format and image size. You can make sure your htaccess file includes gzip compression commands. For those who shudder at the mention of editing an htaccess file, relax. A good WordPress caching plugin like WP Rocket takes care of that pesky detail. (WP Rocket is not free, but after trying similar plugins I found much easier to configure and the support is good). In addition to gzip compression, go get a WordPress image compression plugin like Smush, EWWWIO, or SmartPixel to reduce the image size. While the paid versions of these plugins provide better image compression, even the free version will help your site performance and page load times immensely.
#3 Bad performing plugins
Yes, it’s a well-known fact that few want to admit. Some plugins are resource hogs. Others don’t play nice with minification and caching. While you can get away with a few critical ones that might not minify, you don’t need plugins that slow the site down. Plus, you should limit the total number of plugins you use. You may be inclined to use a plugin for every feature you want but I don’t recommend it. In the long run, if you have a robust theme and flexible page builder that will help limit the number of plugins you need to add. The more plugins the higher the probability of a conflict or slowdown. If you’d like to know what my favorite theme and page builder are just check out my resources listed here. I list only what I’ve used, tested and would recommend.
Really good plugins are very much like really good WordPress themes. They are easy to configure, intuitive to use, integrate, allow for minification and caching, and have support. Anything less will eventually cause you grief.
Oh, and one more thing about plugins. I separate them into “administrative back-end” versus “website-facing”. The website-facing plugins handle how your images and webpages look. These plugins affect optimization and page loads. Most “back-end” plugins are there for you to manage WordPress. Backend plugs like backups, database cleaning, and optimization, 301/404 redirects, etc. While some “back-end” plugins may affect page loads, they won’t be affected by minification or caching and are less likely to cause conflicts. (I didn’t say never, I said less likely.) So I have a list of administrative plugins I add to every site I build. I also use a smaller list of plugins to manage the images and pages.
#4 Caching and Minification
If you like to know more about what caching and minification plugins I use just check out my resources here.
I now don’t use free caching plugins simply because I’ve found that if something goes wrong the whole site is affected and usually not in a good way. There are a few good caching plugins that don’t require you to be a rocket scientist to figure out how to use them, but many of the free ones don’t allow you to offload your media to Google Cloud or AWS. Offloading images into the cloud is a well-known website optimization technique. Still, with good caching and minification, you’ll see benefits. If you do opt to offload images to the cloud you can potentially run your site on a lower-cost hosting plan and still have great website performance.
#5 Image Offload Storage and Delivery
This isn’t for everyone, it isn’t always easy to configure and certainly when something goes wrong it takes a bit to figure out but if you do this, your website is guaranteed to speed up. I see a significant change in load times both as an administrator and user of sites that have images offloaded to Google Cloud or AWS. While I could bore you with stats and graphs I won’t. Suffice it to say, I simply configure this for EVERY SITE I CREATE. So if your site or page speed suffers or you have a lot of images (hopefully they’re under 500k in size, see above) then using image offload storage and delivery methods available to WordPress via plugins will help you.
Love this. Consider sharing with others. Thanks!
Make a cool logo in less than 5 minutes with Inkscape. Here's 24 ways to do it. >>> 24 Inkscape Filter Effects With Text