Images, Media and Page Metadata
IntermediateImages are usually the heaviest thing on a page and the most common cause of layout shift. Metadata decides how the page looks in a search result and in a shared link.
Overview
Two subjects that sit together because both are about what surrounds your content. Images need dimensions to avoid shifting the page, modern formats to avoid wasting bandwidth, and alt text that describes purpose rather than appearance. Metadata — title, description, Open Graph, structured data — decides what a search engine shows and what appears when someone pastes your link into WhatsApp. Both are quick wins that are visible to everyone and are skipped constantly.
Images
Dimensions, formats, loading, and alt text that says something useful.
<img src="cover.webp" width="640" height="360" alt="" loading="lazy" decoding="async">
// width and height prevent layout shift — the browser reserves the
// space from the ratio before the file arrives. This is the single
// biggest cause of CLS.
// alt describes PURPOSE, not appearance
<img alt=""> // decorative — correctly empty
<img alt="Akshay Sonalkar"> // a portrait
<img alt="Solved problems rose from 12 to 48"> // a chart: state the finding
<img alt="Two Sum solution screenshot"> // not "image of a screenshot"
// Never omit alt entirely — a screen reader then reads the filename.
// Modern formats and responsive sources
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="…" width="1200" height="630">
</picture>
// loading="lazy" for below the fold; NEVER on the hero image —
// it delays your LCP. Preload that one instead:
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">Video, Audio and SVG
Playback that does not ambush the user, and inline SVG.
<video controls width="800" poster="thumb.jpg" preload="metadata">
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">
<track kind="captions" src="demo.vtt" srclang="en" label="English" default>
</video>
// preload="metadata" loads only the duration, not the whole file.
// Autoplay is blocked unless muted — and autoplaying with sound is
// the fastest way to lose a visitor.
<video autoplay muted playsinline loop> // background video only
// Captions are not optional: they serve deaf users, anyone in a
// noisy place, and everyone watching without sound — which is most
// people on a phone.
// SVG inline can be styled and made accessible
<svg viewBox="0 0 24 24" role="img" aria-labelledby="t" fill="currentColor">
<title id="t">Search</title>
<path d="…"/>
</svg>
// Decorative icon inside a labelled button:
<button aria-label="Search"><svg aria-hidden="true">…</svg></button>
// currentColor makes an icon inherit the text colour — one icon,
// every theme.Metadata
What search engines and messaging apps read.
<title>Two Sum in Java — Hash Map Solution | AiCanCode</title>
<meta name="description" content="Solve Two Sum in O(n) with a hash map.
Java and Python code, complexity analysis, and interview follow-ups.">
<link rel="canonical" href="https://aicancode.org/dsa/two-sum">
<!-- Open Graph: WhatsApp, LinkedIn, Slack previews -->
<meta property="og:title" content="Two Sum in Java — Hash Map Solution">
<meta property="og:description" content="…">
<meta property="og:image" content="https://…/two-sum.png"> <!-- 1200x630 -->
<meta property="og:url" content="https://aicancode.org/dsa/two-sum">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
<!-- Structured data: rich results -->
<script type="application/ld+json">
{ "@context":"https://schema.org", "@type":"TechArticle",
"headline":"Two Sum", "datePublished":"2026-09-08" }
</script>
// og:image must be an ABSOLUTE URL, or the preview is blank —
// the most common mistake, and invisible until someone shares a link.Key Points to Remember
- 1width and height on images reserve space and prevent the layout shift that dominates CLS
- 2alt describes purpose — empty for decorative images, and never omitted, or the filename is read aloud
- 3loading="lazy" belongs below the fold; on the hero image it delays LCP, so preload that one instead
- 4Captions serve far more people than deaf users, and autoplay with sound is blocked and unwelcome
- 5Open Graph tags control link previews and og:image must be an absolute URL or the preview is blank
Interview Questions
Sign in to ask AriaWhy should every img have explicit width and height?
When should alt text be empty, and when is omitting alt wrong?
Why should the hero image never use loading="lazy"?
Ask Aria about Images, Media and Page Metadata
Your personal AI tutor — ask anything about this concept
Revision Status
Personal Notes
Sign in to save personal notes for this topic.
Discussion
Sign in to join the discussion.