Don’t Slow Down Your Display Speed! Implementation Techniques for “Image SEO” with Core Web Vitals in Mind｜五十嵐/WEBディレクター
Are you worried that “even though I insert many beautiful images to make my articles easier to read, for some reason Google’s evaluation (search ranking) doesn’t go up…”? The cause might be “a decrease in display speed due to image weight or improper implementation.”
Google has established “Core Web Vitals” as an important metric for user experience (UX), and it strictly checks page display speed and layout stability.
Therefore, this time, I will thoroughly explain “image SEO implementation techniques that do not sacrifice display speed,” which are practiced by directors in the field.
Format Selection: Utilizing the Next-Generation Image Format “WebP”
The first thing you want to review is the image file format.
Conventional JPEG and PNG are high quality, but they have the disadvantage of easily becoming large in file size. Therefore, the next-generation format “WebP,” recommended by Google, is used as the standard in the field.
-
WebP’s Strengths: While maintaining image quality equivalent to JPEG and PNG, the file size can be reduced by approximately 25-34%.
-
Operational Rules: Since CMSs like WordPress also support it as standard, thoroughly reduce weight by converting to WebP before posting or by utilizing automatic conversion plugins.
Alternative Text: Correct “alt attribute” description rules
“Alt attribute” is an HTML tag that tells search engine crawlers, screen readers for the visually impaired (voice reading), and browsers what the image is when it cannot be displayed.
〇 Proper way to write
✕ NG examples you should not do
-
Excessive keyword stuffing (spamming)
Example: alt=”SEO Web Director Direction Article Creation Beginner” -
Meaningless descriptions for decorative images
In the case of decorative banners or icons that do not have meaning, it is a technical rule to prevent crawler confusion by not forcing text into them and using alt=”” (empty description).
Lazy Loading: Correct settings and precautions for loading=”lazy”
loading=”lazy” (lazy loading), which loads images outside the screen later, is an essential technique that dramatically improves initial display speed. However, “setting loading=”lazy” for all images” is a big mistake.
⚠️ Setting it for images in the first view (top of the screen) is NG!
If you set lazy loading for an article’s eye-catching image or the main visual at the very top, the initial screen display (LCP: Largest Contentful Paint) will be delayed, which will lower your Core Web Vitals evaluation.
This distinction is the key to technical SEO.
Summary
Image SEO is not just about “telling search engines the content of an image,” but also requires a technical perspective on “how to reduce user browsing stress (display delays).”
-
Reduce weight with the WebP format
-
Convey meaning with correct alt attributes
-
Set loading=”lazy” for images outside the first view
Be sure to review the image implementation on your company’s site or articles you are in charge of, and aim for a double improvement in display speed and search ranking!
