on the blog
How to Optimize Images for Your WordPress Website
The images and photographs on your website further support what your copy is saying. But no matter how beautiful or on-brand they might be, if they’re too large they’re hurting more than helping.
It’s important to properly size and optimize images for your website BEFORE uploading them.
There are a few tricks I can share if you’ve already uploaded images without optimizing, but let’s start with the ones you haven’t uploaded yet.
Here are my best practices I personally stick to when it comes to images on my client sites, as well as, my own:
- All images should be under 200KB (but ideally under 100KB)
- All images should be JPEGs or JPEG-2000/JPEG XR where applicable.
- Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. (Per Google)
- PNG file types should only be used if there is a transparent background needed.
- All images that will be used full width (across the full width of the screen) should be at least but no more than 1920px wide.
- All images that will be used as floaters or take-up half of the screen (or less) should be at least but no more than 920px wide.
- After resizing, optimize on my computer using ImageOptim.
- Rename the image file with my name, services descriptor and image descriptor. (I don’t always do that last one, but it’s good practice.)
- For blog post images, I tend to use the same title as the post for my image file.
You might be wondering why you should optimize your images before uploading. And the answer is it’s simply the most effective way.
There are many automated tools and plugins you could use as a shortcut, but I’ve found optimizing images before they get uploaded to your site does the best job of actually optimizing the images. In other words, you have the most control here and don’t have to rely on the possibility a tool doesn’t optimize them fully.
The number one reason you want to make image optimization a priority is that large images are a top offender in your site speed (or lack thereof).
When you properly optimize your images, your site speed is almost guaranteed to improve.
But let’s say your site has been around a while and you’re just now learning about optimizing images.
Or let’s say, your site speed is really suffering and after testing it a few different places, you’ve realized your images are just way too big.
Rather than removing all of the images from your Media Library and reuploading them fully optimized… there is a shortcut.
The Smush plugin by WPMU Dev is perfect for this situation.
This plugin will optimize your images, resize, compress and improve your Google Page Speed. It’s completely free and will save you a ton of time.