Images and alt text

Images make pages more useful and can bring visitors from Google Images. For online stores, product images are often a meaningful traffic source.

Indexable image markup

<img
  src="/img/rudas-odinis-zygio-batas.webp"
  alt="Rudas odinis žygio batas su guminiu padu, vaizdas iš šono"
  width="800" height="600"
  loading="lazy">

Alt text

The alt attribute describes an image for people who cannot see it, and helps search engines understand it.

• Describe what the image shows in context. On a product page, describe the product. In a tutorial, describe what the screenshot demonstrates.
• Be concise. One sentence is usually enough.
• Empty alt (alt="") for decorative images, so screen readers skip them.
• No keyword stuffing. Google's image guidance warns against it.
• For an image used as a link, the alt text works as the link's anchor text.

File names

rudas-odinis-zygio-batas.webp tells people and search engines something. IMG_2381.jpg does not. Rename images before uploading. Most CMSes keep the original file name.

Speed and stability

Images are often the largest files on a page and the main cause of slow loading.

• Resize images to the size they are displayed. Do not serve a 4000-pixel photo in an 800-pixel slot.
• Use modern formats such as WebP or AVIF where your platform supports them.
• Set width and height, or a CSS aspect ratio, so the layout does not jump while images load. This affects Cumulative Layout Shift.
• Lazy-load images below the fold with loading="lazy". Do not lazy-load the main image at the top of the page, because that usually delays Largest Contentful Paint.

Platform notes

• PrestaShop: image legends or captions are commonly output as alt text. Check your theme. Regenerate thumbnails after changing image sizes.
• WordPress / WooCommerce: set "Alternative Text" in the media library. Recent versions generate responsive sizes automatically.
• Shopify: edit alt text in the product media editor. The platform serves resized and modern formats automatically.