Image optimization for SEO in 2022

See More

1. Create unique images

If you want your images to rank on the search engines and actually capture attention, they need to be unique. Don’t use free stock images or simply a few pictures of your product from all angles. Instead, focus on giving them some more thought and personality.  You can add your branding to the image or create 

Learn More

1. Create unique images

a theme for your images that gets followed across all pages.   Think about how you scroll Instagram and only stop at images that stand out. The same behavior holds true on the search engines.

Learn More

2. Use the right image formats

Most images that you see on the internet are in either one of the three formats - JPEG, PNG or GIF. Since each image format uses a different compression method, they contribute differently to your overall page size.  Some image files can weigh down your page speed significantly.

Learn More

2. Use the right image formats

Google has confirmed that page load time is crucial to rank on both desktop and mobile.  That’s why when you begin with image SEO, the first step is choosing the right image format.  It should be a format that offers you the best compression while maintaining the best possible image quality.

Learn More

2. Use the right image formats

Here is a breakdown of appropriate image format usage: – Choose JPEG for larger photos or illustrations – Use PNG when you want to preserve background transparency in images – Make use of WebP instead of JPEG and PNG for better compression – Use SVG for logos and icons only – Avoid GIFs altogether

Learn More

3. Reduce image size

One of the most crucial elements that factor into your page load time is the size of images.  The heavier your image is, the longer it takes for the page to load and every second counts if you want to rank high on search engines. If you’re not sure where to begin, start by identifying whether you need to  reduce image sizes.

Learn More

3. Reduce image size

You can do this using PageSpeed Insights.   Simply enter your website URL and if the size of your images is too big, the tool will recommend “properly size images” as an opportunity to you. There are two straightforward ways to reduce image size:

Learn More

3. Reduce image size

– By compressing the image. In this case, you can use an online tool like TinyIMG and apply a lossless compression method to reduce the size of your images. – By converting the image to another file format. Consider converting your images to WebP to reduce their size. There won’t be much visual difference. 

Learn More

3. Reduce image size

And yet, with WebP your website speed will benefit the most. Looking for image resize tool suggestions? – For WordPress websites, use Smush plugin. It will resize, optimize, and lazy load your visuals. – For Shopify stores, TinyIMG app is your

Learn More

3. Reduce image size

one-stop-shop for image resizing, optimization as well as general SEO.

Learn More

4. Define image dimensions

Image dimensions refer to the length and width of the image. Not having set dimensions can lead to certain issues: – You can have problems with website speed if your images are huge (for instance 4000x6000px). – Images can cause layout shifts. It means that as the shopper scrolls, the layout of your page changes 

Learn More

4. Define image dimensions

because the browser has not allocated enough space for that element. Avoid these and some other problems by defining the size of your images across the website.  You can do so by adding HTML markup and informing browsers about the size of your on-page elements in advance.

Learn More

4. Define image dimensions

Some image dimension recommendations: – For full-sized images that cover the entire screen, we recommend using 2400x1600px. – For images that appear within content should be sized at 1500x1000px max, but it can vary depending on the layouts you are using.

Learn More

5. Keep the image quality high

There was a lot of talk in the previous points about image size reduction. That is not to say it should come at the expense of image quality. If you run an online store, high-quality images are indispensable for good conversion rates. Customers will be reluctant to purchase your products if they are deprived of details. Image quality also plays 

Learn More

6. Ensure your images are mobile-friendly

More than 50% of website traffic comes from mobile devices.  If your images are not mobile-friendly and responsive to different screen sizes, they will not be able to deliver a consistent experience to all your target audience. Thankfully, you don’t need to resize and upload all your images as per different screens.

Learn More

6. Ensure your images are mobile-friendly

As freeCodeCamp suggests, to make an image responsive, you need to give a new value to its width property.  By doing so, the height of the image will adjust itself automatically.  But the important part here is to know that you should be using only relative units like percentages instead of absolute units like  pixels

Learn More

6. Ensure your images are mobile-friendly

when defining the width.

Learn More

7. Add image ALT text, title and captions

Alt text, title and captions are the written attributes of your image.  They give the search engines a clear indication of what your image is about and help understand the context and intent of your content. There are three things to consider: – Alt text. A quick  description of the

Learn More

7. Add image ALT text, title and captions

a keyword that shows to people using a screen reader or when an image does not load on the page.  To properly optimize image alt text for SEO, use the space to include keywords that apply to the specific image and be descriptive. – Image title and file name. While alt text should be your ultimate priority, 

Learn More

7. Add image ALT text, title and captions

file names add context to the visual and should follow the best practices. Title your images using descriptive words separated by hyphens. – Caption. Google refers to captions for a well-rounded understanding of the image. If the visual is of great importance to the content of the page, include a descriptive caption.

Learn More

8. Add structured data

One of the most recent image SEO necessities is adding structured data. By using structured data, the search engine can display your images as rich results that include a prominent badge.  This gives internet users relevant information about your image and the page, driving quality traffic to your website.

Learn More

8. Add structured data

Some of the guidelines to keep in mind when creating structured data include: – Format (JSON-LD, microdata and RDFa) – Access (don’t block pages with structured data using noindex tag or robos.txt) – Content (follow Google webmaster quality guidelines and provide up-to-date information)

Learn More

8. Add structured data

– Images (all images must be crawlable and indexable)

Learn More

9. Create an image sitemap

You can give the search engine additional details about your images and provide the URLs of the images that may be hard to discover using an image sitemap.

Learn More

10. Optimize all your images for social media

As internet users, we tend to share what we like on social media, be it links, images or videos.  As a website owner, you need to ensure seamless social media sharing to make sure that your images are well-optimized for the different platforms. This is where the Open Graph tags come in. 

Learn More

10. Optimize all your images for social media

These are the tags within the HTML code of your page that make sure when an image is shared on social media, the descriptive snippets are displayed accurately. To check if you have social sharing enabled, try to create a mock post on any of the platforms. If a big, clickable image along with the link you’re sharing 

Learn More

11. Set images to lazy load

Lazy loading is a strategy wherein the browser is nudged to load images or any other media file only when they need to be shown on the screen.  This does not impact how the other images are loaded, i.e., as you scroll. Lazy loading can significantly speed up loading on long pages that include many images below the fold.

Learn More

11. Set images to lazy load

The idea is to improve page load time.  But at the same time, you have to ensure that the images an internet user came looking for are readily available on the web page. To do this, you’re going to either learn a bit of Javascript, use a plugin like A3 Lazy Load or simply hire a  developer.

Learn More

11. Set images to lazy load

Lazy loading is prone to bugs if implemented incorrectly. Check source code vs rendered code, because sometimes JavaScript swaps <data-src> and <src> correctly on desktop but not on mobile.  Since Google renders pages mobile-first, in such cases it sees only the image URL stored in <src> but not in <data-src>, which can cause indexing issues.

Learn More

12. Leverage browser caching

Browser caching refers to images getting stored in a visitor’s browser after their first visit. Next time they come to your site, the web page will load faster. HTTP caching or browser caching can help speed up your page load time on repeat visits. Use this to your benefit by enabling browser caching for a set period of time on the buyer’s end.