At a glance
- WebP and AVIF "may provide better compression than PNG or JPEG", says web.dev.
- Use srcset and sizes so each device downloads a file close to the size it displays.
- Width and height on every image reserve space and prevent layout shift.
- Lazy-load images outside the first view only, and set fetchpriority="high" on the likely LCP image.
Why thumbnails matter
A lobby can show dozens of game tiles plus banners and provider logos. Across the web, images are the LCP element on 76% of mobile pages and 85.3% of desktop pages, according to the 2025 Web Almanac. On a casino lobby, images also make up much of the transfer size, which matters on mobile connections. Image work therefore helps both LCP and the total budget in the calculator.
Choose the format
web.dev notes that "modern image formats like WebP and AVIF may provide better compression than PNG or JPEG". Lossy compression works best on photographic, colorful images; check quality carefully on artwork with sharp edges or text, which is common in game thumbnails that include the game title. Serve a modern format with a fallback using <picture> where your audience includes older browsers.
<picture>
<source type="image/avif" srcset="tile-240.avif 240w, tile-480.avif 480w" sizes="(min-width: 1024px) 180px, 45vw">
<source type="image/webp" srcset="tile-240.webp 240w, tile-480.webp 480w" sizes="(min-width: 1024px) 180px, 45vw">
<img src="tile-240.jpg" width="240" height="300" alt="Game title" loading="lazy" decoding="async">
</picture>Serve the right size
Game studios often supply large master artwork. Shipping it unresized to a tile shown at 180 CSS pixels wastes bandwidth on every visit. Generate a few widths and let the browser choose with srcset and sizes; web.dev explains that "the sizes attribute describes the intended display size of the image in CSS pixels". Check that sizes matches your CSS grid at each breakpoint, or the browser will pick the wrong file.
Reserve space
Add width and height to every tile and banner. web.dev's lazy loading article recommends "adding width and height attributes to all <img> tags" so the browser reserves space and avoids layout shifts. This protects CLS whether images load early or late.
Load in the right order
| Image | loading | fetchpriority | Reason |
|---|---|---|---|
| Hero banner in first view | Default (eager) | high | Likely LCP element |
| First row of game tiles | Default (eager) | Default | Visible at once; may be LCP on mobile |
| Other carousel slides | lazy | low | Hidden until the carousel moves |
| Tiles below the first view | lazy | Default | Loaded as the player scrolls |
| Provider logos in the footer | lazy | Default | Rarely seen early |
web.dev is direct about the LCP image: "Never lazy-load your LCP image". The 2025 Web Almanac found that about 16% to 17% of pages still lazy-load theirs. Lazy loading also works for iframes, since <iframe loading=lazy> "has also been standardized".
Decoding and animation
decoding="async" lets the browser decode off the critical path; web.dev notes the default auto lets the browser decide. Replace animated GIF previews with short muted videos, which web.dev's video guide describes as far more efficient than animated image formats, and give each video a poster image.
Questions
Should every game tile use AVIF?
Test it. AVIF often compresses well, but check visual quality on tiles with titles and fine detail, and keep a fallback for older browsers.
Does lazy loading hurt search indexing of images?
Native loading="lazy" is a browser feature, and the images remain in the HTML. Problems arise mainly with script-based lazy loading that hides the image URL.
What alt text should game tiles have?
The game's name is usually enough, because the tile links to the game. Purely decorative art should have empty alt text.
Sources
- web.dev, Image performance, last updated November 1, 2023.
- web.dev, Browser-level image lazy loading for the web, last updated August 13, 2024.
- web.dev, Optimize Largest Contentful Paint, last updated March 31, 2025.
- web.dev, Optimize resource loading with the Fetch Priority API, last updated November 14, 2023.
- web.dev, Video performance, last updated April 2, 2026.
- HTTP Archive, Web Almanac 2025: Performance, published January 15, 2026.