How to Prep and Optimize Your Images for Web
How to Optimize Images
Follow these steps before uploading a new image to your website to insure quality and lightning-fast performance.
- Make a duplicate copy of your original image. This will be your web-only version to optimize.
- Rename your file. No more than five words, all lowercase, connected by hyphens. Ex: best-file-naming-structure.jpg. This format is good for SEO.
- Resize the image to 2000px to 3000px in width, let the height automatically scale to that width.
- Save the new size.
- Run through this file compressor: Tiny PNG. If you’re preparing multiple photos, save this step until you’ve finished so you can bulk upload to the compressor.
- Done! It’s ready for uploading to the site.
Turning It Up a Notch
The above steps are good for shooting from the hip while in the midst of work.
In theory, Google really likes to see your regular image assets (PNG or JPEG) in Webp format.
They even have their own tool for this called Squoosh.
We Build Our Sites with a Default Webp Converter
Every Top Hat WordPress website developed 2024 and beyond has a Webp converter and Tiny PNG optimizer integration built right into the Media Library.
Ok, Now Why Do This
Large image files slow down your entire site load
When the browser triggers the page, it has to seek and download all of the images. If you have a slew of them that are too big, this is going to wreck your load times.
Which leads to user experience issues
This ultimately will slow down pages, and make those pages load slower. This is a detriment to user experience.
And Causes Google to Ding You
It’s no secret that Google is heavily relying on its Google Pagespeed tool to evaluate rankings.
If you run your site through it, you’ll quickly notice a penalty on oversized images on your total score.
These contribute to your overall ranking ability.