Image SEO for 3D Websites: Alt Text, WebP, and Lazy Loading
Visually rich websites — especially 3D-rendered, interactive ones — live or die by their image strategy. A stunning scene that takes 8 seconds to load will be abandoned before it is ever admired. Worse, Google's crawler may never see the images at all if they are not properly marked up, formatted, or declared in a sitemap.
This guide covers every dimension of image SEO relevant to modern and 3D websites: how to write alt text that helps rankings, how to serve next-generation image formats, how to implement lazy loading without breaking Largest Contentful Paint (LCP), and how to use structured data and image sitemaps to get your visuals into Google Image Search.
---
Why Image SEO Matters More on 3D Websites
A standard blog post might have 3–5 images. A 3D website built with Draftly's AI builder might serve 20–60 texture maps, environment maps, UI screenshots, and product renders per page. Each one is an opportunity — and a risk.
The opportunities:
- Images can rank in Google Image Search, driving additional discovery traffic
- Properly labelled images reinforce topical relevance for the page
- Fast-loading images directly improve Core Web Vitals scores
The risks:
- Unoptimised images are the leading cause of poor LCP scores
- Missing alt text means Google cannot interpret visual content
- Images without `width` and `height` attributes cause Cumulative Layout Shift (CLS)
---
Writing Alt Text That Works
Alt text (the `alt` attribute on `` tags) serves two purposes: accessibility for screen readers, and a textual signal for search engine crawlers that cannot interpret pixel data.
The formula for effective alt text
Good alt text is descriptive, specific, and natural. It should complete the sentence: "This image shows..."
Poor alt text:
- `alt=""` (empty — invisible to Google)
- `alt="image1.jpg"` (filename, not a description)
- `alt="3D website AI builder fast cheap best"` (keyword stuffing)
Good alt text:
- `alt="Draftly 3D website builder interface showing a rotating product page layout"` (descriptive and specific)
- `alt="Comparison of LCP scores before and after WebP image optimisation on a 3D website"` (describes content and context)
- `alt="Google Search Console Core Web Vitals report showing green passing scores"` (names the tool and the result)
Alt text for decorative images
Purely decorative images — background textures, dividers, UI flourishes — should receive an empty alt attribute: `alt=""`. This tells screen readers and crawlers to skip the image rather than wasting their attention on a non-informative description. Never omit the alt attribute entirely; that creates an accessibility violation.
Alt text length
Keep alt text under 125 characters. Most screen readers truncate at that point, and longer descriptions rarely add SEO value over a well-chosen 10–15 word description.
---
Modern Image Formats: WebP and AVIF
Serving images in the right format is one of the highest-leverage performance optimisations available to you. Here is how the formats compare:
| Format | Typical size vs JPEG | Browser support | Best for |
|---|---|---|---|
| JPEG | Baseline | Universal | Photographs, complex textures |
| PNG | Larger (lossless) | Universal | Transparency, UI elements |
| WebP | ~30% smaller | 97%+ of browsers | Everything JPEG/PNG covers |
| AVIF | ~50% smaller | ~90% of browsers | Maximum compression, modern sites |
Recommendation for 3D websites in 2026: Serve AVIF as the primary format, with WebP as a fallback, and JPEG as the universal fallback. Use the HTML `
```html
```
Note the `loading="eager"` attribute on the hero image — never lazy-load your LCP image (more on this below).
Compression settings
- WebP: quality 80–85 for photographs, 90–95 for UI screenshots with sharp edges
- AVIF: quality 60–75 (AVIF handles lower quality settings better than JPEG)
- Run images through Squoosh or a build-time tool like Sharp (Node.js) for automated conversion
Lazy Loading: The Right Way
Lazy loading defers the loading of off-screen images until the user scrolls near them. This reduces initial page weight and speeds up LCP — in theory. In practice, lazy loading is one of the most commonly misimplemented performance features.
The critical rule: never lazy-load LCP images
Google's Web Fundamentals documentation on LCP is explicit: if an image is likely to be the Largest Contentful Paint element (typically the hero image or main product image), adding `loading="lazy"` will delay the LCP score and hurt your Core Web Vitals.
Correct implementation:
```html
```
The `fetchpriority="high"` hint on the hero image signals to the browser to fetch this resource before others, further improving LCP.
Lazy loading and Google crawling
Google's crawler does execute JavaScript and does scroll pages to trigger lazy-loaded content. However, images that fail to load before the crawler's rendering timeout may not be indexed. For critical product images that you want discoverable in Google Image Search, consider server-side rendering or preloading rather than relying entirely on lazy loading.
---
Image Dimensions and CLS
Every image on your page should have explicit `width` and `height` attributes. These allow the browser to reserve space in the layout before the image loads, preventing the layout shift that contributes to a high Cumulative Layout Shift (CLS) score.
For responsive images where you set `width: 100%` in CSS, set the aspect-ratio in CSS or use the `aspect-ratio` property:
```css
img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
```
On 3D websites where canvas elements and WebGL renders may replace traditional `` tags, reserve space with explicit container dimensions to avoid CLS from dynamically sized renders.
---
Image Sitemaps
An image sitemap (or image tags within your existing sitemap) tells Google about images it might not discover through crawling alone — particularly images loaded via JavaScript or embedded in CSS backgrounds.
```xml
```
Submit your sitemap via Google Search Console under Sitemaps. Check the coverage report after two to four weeks to confirm images are being indexed.
---
Structured Data for Images
For images within articles, products, and recipes, adding structured data helps Google understand the image's context and can enable rich results featuring your images.
For product images, include the `image` property in your `Product` schema:
```json
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Draftly Pro Plan",
"image": [
"https://draftly.space/images/pro-dashboard-1200x900.webp",
"https://draftly.space/images/pro-mobile-view-900x1600.webp"
]
}
```
Google recommends providing images in multiple aspect ratios (16:9, 4:3, 1:1) within the `image` array to give it flexibility for different surfaces.
---
Image SEO Audit Checklist
- Every informational image has descriptive alt text (under 125 characters)
- Decorative images use `alt=""`
- All images served in WebP or AVIF with JPEG fallback
- Hero/LCP image uses `loading="eager"` and `fetchpriority="high"`
- Below-fold images use `loading="lazy"`
- All `
` tags have explicit `width` and `height` attributes
- Image sitemap submitted to Google Search Console
- Product images included in Product schema
- No images larger than 200KB after compression (aim for under 100KB for standard images)
- CDN with image transformation (Cloudflare, Imgix, or equivalent) serving correctly sized images per viewport
