If you have images on your site, image optimization is one of the most important things you can do to preserve performance and provide a great experience for your visitors.
Image optimization is a 2-part process, and I’ll show you what you need to do in the sections below. Also, I’ll share my favorite image resizing and compression tools so you can hit the ground running.
While there are many image optimization Plugins available for WordPress, I recommend using off-site tools to handle the two steps outlined below before uploading images to your site.
With this approach, the images you add to your website will always be highly optimized, and this will also save valuable space on your server over time.
Step 1: Resize Images
This step is often overlooked because people simply don’t realize how much data is saved by making images the proper size for the context in which they’ll be presented.
The precise size you’ll want for each image depends on the nature of your design and where it will be displayed, but here are some reasonable guidelines (also note, these are all image widths):
- Full-width header image: 1600–2000px
- WP Featured Image: 700px–1200px (highly dependent upon your design)
- Images within post/page content: 600px–1000px (again, depends on the design)
- Anywhere else: As small as you can make the image
In the past, I used Photoshop to resize and crop my images, but thankfully, you can now do this stuff with free online tools.
I highly recommend the simple and effective ILoveIMG for cropping and resizing images.
Pro tip: When your images start to get pretty big, you’ll reach an inflection point where it makes more sense to use a .jpg than a .png. Always be aware of this as you resize and crop images; in many cases, .jpgs are less than half the size of comparable .pngs!
Step 2: Compress Images
This step is the “secret sauce” to image optimization. Regular old .pngs and .jpgs—like screenshots or images saved in Photoshop—contain lots of hidden metadata and are typically way larger than they need to be.
(Seriously, a typical .png file size is 73% larger than it will be after compression. That’s crazy, and it reveals just how critical this step is for true optimization!)
Anyway, after completing step 1 with your images, use this image compression tool to optimize the heck out of your image files.
After finishing this step, you can upload your images to your WordPress Media Gallery and bask in the glory of your optimization prowess.