Was having a discussion with a client’s graphic designer on web images. She was sending them to me as 779kb images. “Too big,” I said. She thought not. So now I have this post to back up what my team and I know and always aim for: the whole web page under 1-2mb, fast loading, and we optimize images (in the good way!) to be smaller, aiming for 200kb or less, sized correctly by dimensions, and saved for web in terms of quality.
The dirt:
“It is generally best if you can keep a webpage’s total weight under 1 or 2 MB in size.” That’s the WHOLE PAGE not just one or two images. We want to see images at 300kb max, not 1MB.
“So we [use Save for Web in Photoshop and medium compression] and then TinyJPG and the quality looks good now and the file size is 151 KB, which is acceptable for a high-resolution photo. This is almost 4x smaller than the original photo. Typically simpler images like PNGs should be under 100 KB or less for best performance.”
NOTE: Cost really isn’t a reason to not use Photoshop if you do more than 5 image edits a month – it’s only $119 USD a year now! Consider what your time is worth!
“Another very important issue when it comes to image optimization is you should try and upload them to scale, and not let CSS resize them. This is not as important as compression, but it’s another tip that will ensure your images load as fast as possible across all devices. If you are using WordPress, by default, it resizes your images when uploading them to the media library. These settings can be found under “Settings > Media.” You will want to ensure that the max width is close to the width of your site. This way CSS is not trying to resize your image down to fit inside.”
“You shouldn’t be uploading 2 MB images to your WordPress media library. This can result in eating up your web hosts disk space really fast. The best method is to quickly resize the image in a photo editing tool beforehand, and then upload it and use one of the following plugins to reduce it further.”
Thanks for this great post, Kinsta! Read it, y’all!
https://kinsta.com/blog/optimize-images-for-web/
Don’t want to buy Photoshop?
Check out these instructions: https://piccianeri.com/save-images-for-the-web-without-photoshop/
SEO’ing Images / Best Practices for Inserting and Naming and SEO’ing images for the web
- Figure out how big the image should be in pixels. This is known as “making the image to scale”. Ask your web developer the right size! But assume a header / hero image should be at least 1200px wide, and a small “headshot” like image on the page 300pixels wide, or 500px.
- Use SEO-friendly filenames. If your page’s SEO target keyword phrase is “AG Silver Shampoo Vancouver” then best if images on that page are “AG-silver-shampoo-vanouver” – and yes “-” between them so Google knows what’s a word. Not _. Use -. Don’t get too crazy long. I’ll raise my eyebrow if I see 6.jpg in there. You need to have these filenames figured out BEFORE you put in WordPress. Or we have to delete/reupload, and it’s super dull.
- Before you upload, make sure you “Save for web” – I use JPG medium in Photoshop. File>Export>Save for web (Legacy) and choose the JPG Medium option. You can resize (pixels) also in that Photoshop interface. It is possible to do a whole batch of files in a directory at once. This is File>Scripts>Image Processor.
- If you want super-D-Duper-10/10 then also run all those images through TinyPNG. (read above for that) – the images will get even smaller – yay!
- When you upload to WordPress, include an alt tag (not the description box) but alt tag. The alt tag SHOULD contain the target keyword phrase for that page or the subject of the site. “AG silver shampoo vanouver, AG silver shampoo vancouver online” is not a bad alt tag.