Search Engine Optimization (SEO) is an interesting topic for website owners. Image Optimization, on the other hand, is often overlooked and misunderstood. But they actually have a very close relationship.
In fact, image optimization and SEO are a pixel perfect match.
What exactly is a pixel? Did you know that computer monitors display images by dividing the screen into tiny pixels? Each pixel is one color. Since pixels are so small, they can blend together to form shades of color.
Web browsers sometimes struggle to display complex images with millions of tiny pixels. Complex images can slow down the loading of a web page.
Fortunately, images can be optimized to help the web browsers and search engines out.
Here are 4 Simple Steps to optimize a website image for SEO:
STEP 1: Measure it.
Know your image’s pixel width and height.
It’s important to create an image that is the correct size for a web page. So be sure to add a width and height.
- If your image is too large, it will not load properly.
- If it is too small, it will be difficult to see.
It can be a little tricky to figure out the right size. A web page is often 1024px wide on a computer screen. (“px” is short for pixel.) You would rarely need an image wider than that (unless it’s a background image).
NOTE: The feature image at the top of this page is 700px wide.
- Software such as Photoshop can help you resize your images.
- There are also many online options available. Image Optimizer is a free online image optimizer. You can choose the max width and/or max height and image quality.
- If you upload an image and it doesn’t seem to fit right, you can try again.
Defining the width and height of your images allows the page to load faster. The browser will know the size of your images and can continue to place content on the page while the images load. (Reducing the width and height will also reduce the image file’s size in kilobytes.)
WordPress Images (srcset and lazy loading)
Since version 5.3, WordPress is able to detect big images and generate multiple copies of images with different dimensions. This happens when you add an image to the Media Library. Later, when you select an image from the library (for a post or page), WordPress will add the srcset attribute to it.
What is the srcset attribute? The srcset attribute lets web browsers choose which image to use (depending on the device or screen size of the website visitor). Using the srcset attribute, WordPress sites are able to serve scaled images which improves page speed.
Since version 5.5, WordPress also has a native lazy loading feature by default.
What is lazy loading? Lazy loading delays the loading of images until a user scroll downs the page to see them. Only the images towards the top of the page are initially loaded. This also helps with page speed.
STEP 2: Compress it.
Compress your image to remove some tiny pixels.
When an image is optimized through compression for the web, tiny pixels are removed here and there.
This can be done in Photoshop or with free online image optimization tools in a way that is barely noticeable to the naked eye. When you optimize image quality, you are often removing tiny pixels.
WordPress Plugins – Image Optimizers
Images uploaded to social media sites, such as Facebook, are automatically compressed, but images uploaded to a CMS (such as WordPress) are not. If you’re uploading images in WordPress, you could utilize a plugin to optimize your images.
- Smush lets your compress images individually through the WordPress media manager or in bulk.
- EWWW Image Optimizer optimizes your images as you upload them to your WordPress site. It can also optimize images that you’ve previously uploaded.
- Clearfy is a multipurpose WordPress optimization tool that can also optimize images.
Image compression happens in an instant.
- Most image tools, such as Photoshop, compress images when you save them. It happens in an instant.
- An image is analyzed and unnecessary pixels are removed.
- It’s so efficient that you won’t notice a difference, unless you overdo it.
- You can experiment with compression to see how your image looks.
JPEGs, PNGs and GIFs
Image formats used on the web are usually JPEGs, PNGs or GIFs. JPEGs are popular for PHOTOS. PNG offers improved quality but, often, at the cost of increased file sizes and reduced page speed. GIFs are popular for simple illustrations. They can also be animated while maintaining a small file size. Together, these are the three most common online image file formats.
NOTE: If you’ve over compressed a JPEG image, it’s best to go back to the original image and try again. So be sure to save a copy.
WebP Image Format
WebP is a modern image format, created by Google, that is gaining popularity. It provides superior lossless and lossy compression for images on the web.
- WebP is a good choice for animated images.
- It offers better compression than PNG and JPEG and support for animated frames and transparency.
- This image format is natively supported in Google Chrome, Firefox, Edge, Safari and the Opera browser.
- You can use WordPress Optimization Tools such as Clearfy to convert your images to WebP for browsers that support the image format.
STEP 3: Name it.
Give your image a meaningful filename.
Every image on the internet has a unique name given to it — this is called the image filename.
You want to help Google and Bing to understand your image.
- Be sure to give your images meaningful filenames. If you use a non-sensical name such as 9303038.jpg, Google will not pay much attention to that image as it decides how to rank your web page.
- Don’t use just one word to name your image files.
- Uses hyphens (not underscores) to separate the words in the filename.
NOTE: The husky image (above) is an example image that is being used to discuss filenames, not dogs, so the filename should help explain the purpose of the image (not necessarily the dog in it).
STEP 4: Describe it.
Add an image ALT tag that explains the image’s purpose.
It describes what will appear in place of the image for those who can’t see it, such as search engine spiders and people with screen readers.
- Use up to 10 words in your image ALT tag to define the image content. The recommended maximum length of ALT text is 125 characters.
- If you’re using a CMS, such as WordPress, to upload your image, there will be a box waiting for you to add the ALT tag (attribute). (Don’t leave this important box empty.)
Not sure if the images on your website are optimized?
You can inspect the details of an image, such as file type, filename, dimensions and ALT tag in any browser by right-clicking and choosing “Inspect” or “Inspect Element.“
If you don’t optimize your images, your website can become sluggish and out-of-shape. The more bloated images you have, the slower your pages become. The search engines will visit your site, measure your page speed and try to understand your images. Bloated images without meaningful names and descriptions will have a negative effect on your score.
Remember theses 4 simples steps for Image Optimization:
(1) Measure it. (2) Compress it. (3) Name it. (4) Describe it.
Image optimization is a key component of SEO. They are a pixel perfect match.