How to Optimize Images for SEO and Page Speed
Proper image optimization will improve your page speed and your ranking in search results.
Image optimization includes four key components.
- File dimensions – image width and height in pixels
- File size – KB or MB
- File name – descriptive of image with keyphrase at beginning
- File type – JPG or PNG
Images from digital cameras or from a stock photo site are usually very large both in dimension and size. You’ll see image dimensions up to 4000 px wide and file sizes from 2MB to 10MB. The file name is something like DSC2478.jpg which providing no description for the search engines.
You want to prepare your images before you upload them to your media library.
Image dimensions should be no larger than needed depending upon where the image will be displayed on your site. The file size should be no more than 100KB. The file name should be descriptive. The file format should be appropriate to the type of image.
Image Dimensions
If you are planning to display an image in full screen mode (like a hero image that extends across the width of the screen), you’ll want to plan for an image width between 1280px to 1920px. If an image will be the featured image for a blog post, the image width should match the dimensions defined by your theme. For images that will only be displayed in your sidebar, a maximum width of 300px is recommended.
File Size
File size is the most important issue to consider when preparing images for your site. Images with a large file size will slow down your site and cause visitors to leave. A full width image should be from 80KB to 100KB. If an image width will be only half to two-thirds of a page (like a blog post featured image on a page with a sidebar), then 20KB to 30KB will work.
Using tools I’ll share, you should be able to make these adjustments without seeing a change in visible quality.
To check quality, open your original image and the optimised image and view them side by side. Look for any pixelated areas.
While you may not be able to guarantee that every single image is uploaded to your web page at the exact display size, you should ensure that the number of unnecessary pixels is minimal, and that your large images are delivered as close as possible to their display size.
Choose the right file name
Image SEO starts with the file name. You want Google to know what the image is about without even looking at it, so use your focus keyphrase in the image file name. It’s simple: if your image shows a sunrise in Paris over Notre Dame Cathedral, the file name shouldn’t be DSC4536.jpg, but notre-dame-paris-sunrise.jpg. The main keyphrase would be Notre Dame, as that is the main subject of the photo, which is why its at the beginning of the file name.
Choose the right format
For images, the right format depends on the kind of image and how you want to use it.
Choose JPG for larger photos or illustrations: it will give you good results in terms of colors and clarity with a relatively small file size.
Use PNG if you want to preserve background transparency.
JPG
JPG (also known as JPEG) stands for Joint Photographic Experts Group. JPG images are well suited for high compression levels and can display millions of colors, making them perfect for photographs and images with vivid colors.
This image format supports lossy compression, which results in a slight drop in image quality after optimizing. However, you can control the level of compression to ensure you get the best quality and performance. JPG images don’t support transparent backgrounds.
PNG
PNG is short for Portable Network Graphics, an image format that was initially designed to transfer images over the internet. PNG images display millions of colors, but they can be heavier than JPG. They are fantastic for screenshots, logos, infographics, and main header graphics that identify a brand.
PNG support lossless compression meaning no data is lost during optimization. As such, PNG images are crisper and sharper than JPG images after compression. Additionally, the PNG image file type supports transparent backgrounds.
Save an image from Canva as a JPG for the best file size compression.
How to Optimize Images Checklist
- Choose a file name for your image that includes your keyword or keyphrase
- Make sure image dimensions match the image size as displayed
- Reduce file size for faster loading using tools like Canva or Bulk Image Resizer
- Use image alt text that includes your keyword and describes the image. There is no need for a title text
Image Editing Tools
Mac: you can use the Preview app on your Mac – use Tools, Adjust Size and then Export to save as a JPG.
Mac/Windows – Canva
Windows – Download and install on your computer – Faststone
Free online tools
https://bulkresizephotos.com/en
How to optimize images using Bulk Resize Photos:
If you have several images for a post, make the width of the images the appropriate size for your featured post and/or blog post width. In this example, all the images will be reduced to 800 pixels in width while retaining the aspect ratio.
The last screen in the process will show the reduction of the file size and give you a link to download the image(s).
I have found that he easiest way to optimize images is using Canva. It allows you to create specific dimensions for an image. Then, when you save the image as a JPG file, you can reduce the file size.
The following screenshots walk you through the process using Canva. You can see the file dimensions and file size of the original stock image.
I uploaded the image to Canva and created a hero image for a site that is 1600 x 400 pixels. I then downloaded the image to my computer as a JPG file.
Now I have an image with the exact dimensions needed for its location on a web page. And the file size has been reduced from 4 MB to less than 50 KB.
Take the time to optimize your images and your site visitors and search engines will reward you for it.