Many websites use images in non-optimized versions. The images are way too big (2-5 megabytes), making the website speed very slow. Image SEO can substantially improve your Core Web Vitals (like LCP, and FCP). Why does it matter you ask? It sounds logical that fast-loading websites make using your website more accessible. There is also data supporting this assumption.
We will first discuss solutions that can help you optimize image SEO and in the later part, we discuss how Next.JS handles image optimization through its dedicated Image component. If you are using next.js and vercel, feel free to skip the first 4 sections. For non-image related issues, read our Diagnosing and fixing javascript crawling issues [Practical Guide].
Table of Contents
Detect your image SEO performance
Using pageSpeed insights (https://pagespeed.web.dev/), you can check if your images are already fully optimized and/or if there is still potential for improvements. When you click on Defer offscreen images, pageSpeed will show you a list of images that should be served in a different format and size. Generally speaking, most images should be below 200 kb.
Right-size your images
First, you should first right-size your image. Specifically, if your image is 6200×4800 pixels and the largest screen size is 1366×768, you should right-size your image. Generally speaking, most images should not be above 200 kb. To right-size your image, you can use canvas, Figma, sketch, or any other design tool. PageSpeed shows you which images can be reduced in size.
Convert your images to webp format
Second, you can convert your images to webp format. Wepb images are at least 25% smaller than jpeg images and the conversion is lossless. There is a wide range of online converters available. Converting your images to the webp format is easy and can substantially reduce the loading time.
Tools to convert jpeg images to webp one-by-one.
Bulk jpeg to webp formatted:
Implement lazy loading strategies
Third, you can implement lazy loading strategies. With lazy loading strategies, the image will only be loaded as soon as it is near the viewport. For example, if you have an image in your footer, it will only be loaded once the user scrolls down and the footer is almost in the viewport.
Warning: You should not use lazy-loading in the viewport. For elements, in the viewport, you want elements to load as fast as possible to score high for the Core Web Vitals. Lazy-loading in the viewport will introduce a delay in loading the image and result in lower CWV.
Use an Image CDN
Image CDNs detect the device size and optimize the image prior to delivery. When the user requests an image, the CDN checks if it has a cached version of the image and if so, sends it to the user. Should the image not exist, the image is generated depending upon the requirements (screen size etc.) and the CDN then delivers the image to the user and cached this version on its server. Popular image CDNs are:
Image SEO for Next.Js and Vercel
Next.Js has the image component (NextJS Image Component) which makes a lot of the previous steps redundant and makes Next.JS uniquely suited for SEO. Specifically, the image component can compress and resize an image on a remote server. Conveniently, images are also only loaded when in they are near or in the viewport. Your workflow can look like this:
- Upload all your original images to S3
- Use the <Image> component to load and optimize (crop, compress, convert to webp).
- Vercel serves (and cashes this version of your image) over its CND
Read more here on how to best utilise the Image component:
Bonus: Get more organic traffic by indexing your images
You can include the images or videos in your sitemap and google can index them for image search. For this, you need to take the following steps. It is important that your images have descriptive names and are keyword rich.
- good: bathroom_floor_mat.webp
- bad: img_222.webp
The latter image name is much better if you strive for indexing by google. You should also write an alt-text for your image which is keyword rich as well. As the organic search results can be very competitive, ranking high on the image or video search can be a way to capture some of the organic traffic. There are users who are more visual learners and they might prefer to learn this way instead of reading a 2,000+ word blog article.
