Image SEO optimization – alt text and WebP for pages that get found and load fast

The four parts of image SEO optimization

Image SEO has two jobs: help search engines understand what each image shows, and keep images from slowing the page. On online stores and photo-heavy brand sites, images often make up most of a page's weight. Start by checking these four points.

• Alt text: a short written description of the image, used by image search and by screen readers
• File name: a descriptive name such as "cast-iron-skillet-26cm.jpg" instead of "IMG_0123.jpg"
• Format and file size: WebP or JPEG for photos, SVG or PNG for logos and graphics, with each file kept light
• Display size: images that match the size they are shown at, with width and height set to prevent layout shifts

Alt text and file names help search engines understand; format, size and dimensions make the page fast. You need both for images to support search and usability at the same time.

Signs your images are holding the site back

If any of these sound familiar, image optimization has room to help. You can check all of them in your browser or admin panel.

• Product photos appear slowly, line by line, when you open a page on a phone
• Photos from a phone are uploaded as they are, several megabytes each
• Text jumps down the page while you read because images load late
• PageSpeed Insights flags "Serve images in next-gen formats" or "Properly size images"
• Searching your product names in Google Images does not bring up your own photos
• Key information such as prices or campaigns exists only as text inside images

Image weight affects Core Web Vitals, Google's page experience metrics – especially LCP (how fast the largest element appears) and CLS (layout shifts). See improving Core Web Vitals for the metrics and improving site speed for the bigger picture.

How to write alt text that works for SEO and accessibility

Alt text describes an image for people who cannot see it and for when it fails to load. Google also uses it to understand image content, which makes it a core part of image SEO. A useful test: describe the image as if you were explaining it over the phone – short, concrete and literal.

• Be specific: "Black cast iron skillet, 26 cm, with wooden handle" beats "product image"
• Keep it to about one sentence: natural wording, no keyword lists
• Leave decorative images empty: dividers and background patterns get alt="" so screen readers skip them
• Describe the destination for linked images: banners and button images should say where they lead
• Avoid copy-paste alt text: for color or angle variants, describe what is different

Shopify, WordPress and BASE all have a field for alt text on each image. Start with your home page and best-selling products – that covers the most valuable images in the least time.

Compressing images and using WebP: format, size and loading

Image compression is easiest in three steps: choose the right format, match the size, then control when each image loads. WebP works in all major browsers and usually produces smaller files than a JPEG or PNG of the same visual quality. The gain comes from lighter pages that load faster and are easier to use.

• Choose the format: WebP (or a well-tuned JPEG) for photos, SVG for logos and icons, WebP or PNG where you need transparency
• Match the size: export at up to about twice the display width; never upload multi-thousand-pixel originals as they are
• Serve per screen: use srcset so phones get smaller files and desktops get larger ones
• Lazy-load below the fold: add loading="lazy" to images further down the page
• Load the hero image first: keep the main above-the-fold image out of lazy loading so it shows immediately
• Set dimensions: width and height attributes reserve space and prevent layout shifts

Shopify automatically serves uploaded JPEGs and PNGs in lighter formats such as WebP to browsers that support them. WordPress creates several sizes on upload and serves them with srcset. Very large originals still cost performance on any platform, so resizing to around 2,000 px on the long side before upload is a safe habit.

What e-commerce and visual brands often miss

For stores with many products, or brands that sell through photos of projects, food or work, image handling is part of the sales foundation. These points are tedious to fix later, so set rules early.

• Shooting and export rules: consistent aspect ratio, background and export size keep listing pages tidy and file sizes predictable
• An alt text pattern: for example "product name + color or material + scene", so quality holds when someone else uploads
• Keep key text out of images: shipping, prices and campaign details belong in HTML text that search engines and translators can read
• Set share images: give each page its own OGP image for when the URL is shared on social media
• Include images in structured data: add image URLs to product structured data so search results show product details correctly

For how photos and copy work together on a product page, see product page improvement. Reviewing both together connects the path from being found to making a purchase.

How UNANOBO handles image SEO: a free demo with optimized images

Before you commit, UNANOBO builds a free demo based on your current site and product photos. The demo is built with images already converted to WebP, resized for display and given proper alt text, so you can check the speed yourself on a computer and a phone. You also get notes on which images on your current site are heaviest and where alt text is missing.

The process is simple: free demo, feedback, launch, growth. The founder handles every project personally, so photo rules and alt text patterns are discussed with the same single contact. Everything runs by message, in Japanese or English.