Why Image SEO Matters
Images often account for over 50% of a website's data volume — and are simultaneously one of the most neglected SEO factors. Yet optimized images can make your website visible in Google Image Search, drastically improve loading times, and positively impact your Core Web Vitals.
According to studies, Google Image Search generates up to 22% of all organic traffic. If your images don't appear there, you're giving away nearly a quarter of your potential traffic. At the same time, unoptimized images are the most common reason for slow websites — and page speed has been an official Google ranking factor since 2021.
At GoldenWing, we optimize every image as part of our web design process. In this guide, we show you how to do the same for your website.
Alt Text: The Most Important Element of Image SEO
Alt text (alternative text) is the central element of image SEO. It describes an image's content for search engines and screen readers. While Google can increasingly "see" images, it still relies heavily on alt text to understand an image's context.
How to Write Good Alt Text
- Describe what's visible in the image: "Team of web designers working on concepts at a whiteboard" instead of "Image 1" or "DSC_0042.jpg".
- Integrate keywords naturally: If the image relates to your topic, use your focus keyword. But don't force it — "web design Vienna web design agency Vienna cheap" is keyword stuffing and will hurt your rankings.
- Keep it under 125 characters: Screen readers truncate longer texts. Concise is better than elaborate.
- Avoid "image of" or "photo of": Google and screen readers already know it's an image. Start directly with the description.
- Every image needs unique alt text: Never copy the same alt text for different images.
Alt Text Examples
- Bad: "image" / "photo" / "IMG_2847.jpg" / empty
- Mediocre: "Web design project"
- Good: "Responsive website design for a Vienna law firm on desktop and smartphone"
- Too long: "Professional responsive web design project that we created for a renowned Vienna law firm in the 1st district showing the desktop and mobile view of the homepage"
Image Formats: WebP, AVIF, JPEG, or PNG?
Choosing the right image format has an enormous impact on your website's loading time. Here's a comparison:
WebP — The Current Standard
WebP delivers 25-35% smaller files than JPEG at comparable quality. It's supported by all modern browsers (Chrome, Firefox, Safari, Edge) and supports both lossy and lossless compression as well as transparency. For most websites, WebP is the optimal format.
AVIF — The Future
AVIF compresses even better than WebP — up to 50% smaller than JPEG. Browser support is growing steadily but isn't yet universal. We recommend AVIF as the primary format with WebP as a fallback.
JPEG — The Classic
JPEG remains suitable for photographs when WebP or AVIF aren't an option. Quality settings should be between 75-85% — below that, artifacts become visible; above that, the file becomes unnecessarily large.
PNG — Only for Transparency and Graphics
PNG files are significantly larger than WebP/JPEG and should only be used for logos, icons, and graphics with transparency. For photos, PNG is never the right choice.
SVG — For Vector Graphics
SVG is perfect for logos, icons, and simple illustrations. SVG files are extremely small, scale losslessly to any size, and can even be animated.
Image Compression: Finding the Right Balance
Oversized images are the most common reason for slow websites. Here are the key rules:
- Maximum file size: No image file on your website should exceed 200 KB. Hero images can go up to 300 KB, but no more.
- Match resolution to display size: An image displayed at 800px wide on the website doesn't need to be saved at 4000px. Save images at the size they're actually displayed (plus 2x for Retina displays).
- Compression tools: Squoosh (free, by Google), TinyPNG, ShortPixel, or ImageOptim (Mac). At GoldenWing, we use automated build pipelines that compress every image during deployment.
Responsive Images with srcset
Modern websites deliver different image sizes depending on the device. The HTML srcset attribute allows the browser to load the optimal size:
- Mobile: 400px width
- Tablet: 800px width
- Desktop: 1200px width
- Retina: Double resolution
Next.js (the framework we use at GoldenWing) automatically generates these variants through the next/image component.
File Names: An Underestimated SEO Factor
The file name is the first thing Google learns about an image. It should be descriptive and keyword-relevant:
- Bad:
IMG_2847.jpg,image1.png,screenshot-2026-04-08.webp - Good:
web-design-vienna-responsive-layout.webp,seo-audit-results-dashboard.webp
Rules for File Names
- Hyphens instead of underscores: Google treats hyphens as word separators, but not underscores.
web-design-vienna.webpis better thanweb_design_vienna.webp. - Lowercase only: Avoid uppercase letters and special characters.
- No special characters: Use standard ASCII characters only.
- Include keywords: If the image shows a web design project, "web-design" should appear in the file name.
Lazy Loading: Load Images Only When Visible
Lazy loading is a technique where images are only loaded when the user scrolls to them. This significantly improves initial loading time because images "below the fold" don't need to load immediately.
- Native Lazy Loading: The HTML attribute
loading="lazy"is supported by all modern browsers. Simply add it to the<img>tag — done. - Don't lazy load hero images: The main image above the fold should load immediately. Use
loading="eager"or no loading attribute for the first visible image. - Use placeholders: Display a blurred placeholder (blur-up) or colored background while the image loads. This prevents layout shifts (CLS).
Image Sitemaps and Structured Data
Image Sitemap
An image sitemap explicitly tells Google which images exist on your website. This is particularly important when your images are embedded via JavaScript or lazy loading and Google might not find them during regular crawling.
You can either integrate images into your existing XML sitemap or create a separate image sitemap. Google recommends integration into the main sitemap.
Structured Data for Images
With the ImageObject schema, you can provide Google with additional information about your images — such as the author, license, and description. This is particularly relevant for recipes, products, and news articles where images are prominently displayed in search results.
Core Web Vitals and Images
Images directly affect three of the most important performance metrics:
LCP (Largest Contentful Paint)
The largest visible element on the page is often an image. If this image is too large or takes too long to load, your LCP score worsens. The solution: preload hero images with <link rel="preload">, use the right format (WebP/AVIF), and keep file size under 200 KB.
CLS (Cumulative Layout Shift)
When images don't have defined width and height attributes, the layout jumps during loading. This leads to a poor CLS score. The solution: give every <img> tag explicit width and height attributes or use CSS aspect-ratio.
INP (Interaction to Next Paint)
Too many or too large images can block the main thread and worsen interactivity. Lazy loading and efficient compression help here.
Image SEO Checklist
Here are the most important points summarized:
- Alt text: Every image has a descriptive, unique alt text with natural keyword integration
- Format: WebP as standard, AVIF where possible, PNG only for transparency
- Compression: No file over 200 KB, quality between 75-85%
- File name: Descriptive, with hyphens, lowercase, no special characters
- Responsive: srcset for different screen sizes
- Lazy loading: Lazy load all images except the hero image
- Dimensions: Always specify width and height (prevents CLS)
- Preload: Preload hero image with
rel="preload" - Sitemap: Include images in the XML sitemap
- CDN: Deliver images via a Content Delivery Network
Conclusion: Image SEO Is Not a Luxury, It's a Necessity
Optimized images make your website faster, improve user experience, and bring additional traffic through Google Image Search. The good news: most optimizations only need to be set up once and then run automatically.
At GoldenWing, image SEO is an integral part of every website project. We rely on automatic WebP conversion, intelligent lazy loading, and optimized image pipelines so that your website performs perfectly from day one.
Want to have your existing website checked for image SEO? Contact us for a free initial analysis.
