Image SEO and Optimization: File Names, Alt Text and Formats

When a site loads slowly, images are the first thing we check. We often find the same picture: 4 MB photos uploaded straight from a phone, 4000-pixel images displayed at 400 pixels, files named IMG_2381.jpg and empty alt text.

Images cut both ways. On one hand they're one of the heaviest loads on page speed. On the other, they're a content source for Google Images, product results and AI-assisted search. A well-handled image speeds up the site and can open a new entry point from search.

How do images affect speed?

On a typical page, images often account for the largest share of downloaded data. The big cover photo at the top of the homepage is usually the element in Google's Largest Contentful Paint (LCP) metric, meaning it determines when the page counts as loaded. If the cover image is 3 MB, the page will probably count as slow on mobile, and the rest of your good work counts for less.

We covered the other causes of slow sites and how to fix them in a separate post. Here we focus only on images, because the quickest wins usually come from them.

WebP and AVIF

JPEG and PNG still work, but they're no longer the best option. At similar visual quality, WebP usually produces noticeably smaller files than JPEG and is supported in current browsers. AVIF can compress even better; browser support is now broad too, but encoding takes longer and some editing tools still struggle with it.

Our practical advice: make WebP the default for photos. If your platform can generate AVIF automatically, turn that on as well, and the browser will pick the format it supports. For logos and icons, use SVG where possible; being vector-based, SVG looks sharp on every screen and is often just a few kilobytes.

Keep PNG only for images that need a transparent background and can't be converted to SVG. Saving photos as PNG is a common cause of oversized files we see.

Sizing and lazy-loading

Don't load an image larger than the largest size it's shown at. For an image displayed 800 pixels wide on desktop, 1600 pixels is enough even accounting for high-resolution screens. Letting the browser shrink a 4000-pixel photo means making users download pixels they'll never see.

Modern sites generate several sizes of the same image and let the browser pick the right one for the screen (srcset in HTML). A phone user downloads the 600-pixel version, a wide desktop the 1600-pixel one. If your platform does this automatically, great; if not, at least resize images to a reasonable size before uploading. Under 200 KB is an achievable target for most web photos.

Give images width and height values too. Without them, text jumps down as the page loads and users tap the wrong thing. Google measures this as Cumulative Layout Shift (CLS).

Lazy-loading, meaning not loading images below the screen until the user scrolls to them, is now a native browser feature: adding loading="lazy" to the image is enough. But there's one exception that often gets missed. Don't lazy-load the cover image at the top of the page. That delays the LCP element and makes the page measure slower.

File names and alt text

The file name is a small but free signal. Instead of IMG_2381.jpg, use a name that describes the image, avoids Turkish characters and separates words with hyphens, like kadikoy-kuafor-sac-boyama.webp. Turkish characters can produce broken URLs on some servers, so writing s instead of ş and g instead of ğ is safer.

Alt text matters more. Google looks at the surrounding text and alt text to understand what an image shows, and screen readers read alt text aloud. Good alt text describes the image in one natural sentence: “Hair after a balayage treatment at our salon in Kadıköy.” Stringing keywords together doesn't work and harms accessibility.

Leave alt text empty for purely decorative images. For product images, write the product name and its distinguishing feature: “Solid oak coffee table, 90x50 cm, natural oil finish.” We go further into the accessibility side of alt text in our post on accessible websites.

Stock photos or real photos?

Stock photos have their place: a blog cover illustrating an abstract idea, or a temporary placeholder. But anywhere you show your service, team, premises or work, use real photos.

The reason isn't only trust. Because the same stock photo appears on many sites, it's hard for it to add anything unique to your page. A photo you took yourself is one of a kind. Images showing an architecture firm's completed projects can become an entry point in Google Images carrying that firm's name; we gave examples in our post on architecture firm websites.

Whichever you use, mind the rights. Use stock photos within their license terms, and don't publish images you found online without permission. If identifiable people appear in a photo, get their consent too.

Real photos don't require a professional shoot. Photos taken in daylight, against a clean background, with a recent phone are enough for many small businesses. One rule: resize them and convert to WebP before uploading.