Post Details

Learn HTML5 Graphics

******************************************************************************

Displaying Graphics in HTML5(with examples)

1) Selecting a Graphics Format

Pick the right format first—this affects quality, size, and capabilities.

JPEG / JPG: Photos & complex gradients. No transparency. Small files at medium quality.
PNG: Logos, UI, crisp edges, transparency needed. Larger than JPEG (lossless).
GIF: Simple animations, very limited color (256). Usually superseded by video/APNG/Lottie.
SVG: Vector logos/icons/diagrams. Infinitely scalable, tiny for simple art, stylable with CSS.
WebP: Modern, small files, supports transparency & animation. Broad support.
AVIF: Newest, often smallest for photos, supports transparency. Slightly heavier to encode, but great results.

Rule of thumb

Photo → AVIF (fallback WebP → JPEG).
Logo/icon/line art → SVG (or PNG if you only have a bitmap).
Short simple animation → animated WebP (or video if long/complex).

2) Preparing Graphics for Web Use

Checklist

full checklist and <picture> code explanation, all in easy words:

✅ Preparing images for the web (simple checklist)

Export to sRGB color profile
→ Makes colors look the same on all devices and browsers.

Crop to the largest size you’ll display (no oversized images)
→ Don’t upload a 4000px-wide picture if your site only shows it at 1200px. Bigger files = slower site.

Provide 1× and 2× versions for high-DPI screens
→ Modern phones and laptops have sharper screens. A 2× version keeps images clear on those displays.

Compress appropriately
- JPEG: 60–80% quality → smaller but still looks good.
- WebP/AVIF: default settings are usually fine.
  → Goal: balance quality and file size.
Name consistently
→ Use a clear naming style (example: hero-1200.jpg, hero-1200@2x.jpg). Keeps files organized.

Remove metadata (EXIF) if not needed
→ Saves space and avoids sharing hidden info (like camera details or GPS).

📸 Using <picture> for responsive images
```
<picture>
  <source type="image/avif" srcset="hero-1200.avif 1200w, hero-800.avif 800w" sizes="(min-width: 800px) 800px, 100vw">
  <source type="image/webp" srcset="hero-1200.webp 1200w, hero-800.webp 800w" sizes="(min-width: 800px) 800px, 100vw">
  <img
    src="hero-800.jpg"
    srcset="hero-1200.jpg 1200w, hero-800.jpg 800w"
    sizes="(min-width: 800px) 800px, 100vw"
    alt="Sunlight breaking over a mountain ridge at dawn"
    width="1200" height="800"
    loading="lazy" decoding="async">
</picture>
```
What each part means (easy version):
- <picture> → A wrapper that lets the browser pick the best image.
- <source type="image/avif" …> → If the browser understands AVIF (super small, high quality), it will use these files.
  - srcset="hero-1200.avif 1200w, hero-800.avif 800w" → Gives the browser two choices: a 1200px-wide image or an 800px-wide one.
  - sizes="(min-width: 800px) 800px, 100vw" → Says:
    - if the screen is at least 800px wide → show the image at 800px wide
    - otherwise → use full screen width (100vw).
- <source type="image/webp" …> → Same as above, but for WebP (used if AVIF isn’t supported).
- <img …> → The fallback (classic JPEG) if neither AVIF nor WebP works.
  - src="hero-800.jpg" → Default image.
  - srcset="hero-1200.jpg 1200w, hero-800.jpg 800w" → Same two size choices (1200px or 800px).
  - sizes="(min-width: 800px) 800px, 100vw" → Same display rule as above.
  - alt="…" → Text description (good for accessibility + SEO).
  - width="1200" height="800" → Real size of the default image. Helps browsers keep space ready so the page doesn’t jump around.
  - loading="lazy" → Don’t load until it’s near the screen (saves bandwidth).
  - decoding="async" → Browser can process it in the background → faster page loading.
In short:
- AVIF → WebP → JPEG fallback (modern → older).
- srcset + sizes = let browser pick the right size for the screen.
- width + height = no layout shift.
- lazy + async = faster and lighter website.

3) Inserting Graphics

Basic <img>

<img src="portrait.jpg" alt="Portrait of Dr. Maya Singh" width="600" height="750" loading="lazy">

Decorative image (no meaning) → empty alt

<img src="swirl-divider.svg" alt="" width="300" height="24" role="presentation">

Background image (pure decoration or repeated texture) — use CSS

<div></div>
<style>
.hero {
  background-image: url('hero-texture.webp');
  background-size: cover;
  background-position: center;
  min-height: 40vh;
}
</style>

Use <img> for content images (participate in semantics, accessible via alt). Use CSS backgrounds for decoration.

4) Arranging Elements on the Page

Images are inline by default. Use layout systems for control.

Flexbox alignment

<div>
  <img src="product.png" alt="Blue ceramic mug" width="320" height="320">
  <div>
    <h3>Blue Mug</h3>
    <p>Dishwasher safe, 320ml.</p>
  </div>
</div>
<style>
.card {
  display: flex;
  gap: 1rem;
  align-items: center; /* vertically centers the image with text */
}
.card img { flex: 0 0 auto; }
</style>

Grid gallery (responsive columns)

<section>
  <img src="g1.jpg" alt="Café exterior" width="400" height="300" loading="lazy">
  <img src="g2.jpg" alt="Latte art" width="400" height="300" loading="lazy">
  <img src="g3.jpg" alt="Pastry case" width="400" height="300" loading="lazy">
  <!-- more... -->
</section>
<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
</style>

5) Controlling Image Size and Padding

Maintain aspect ratio, avoid distortion.

<img src="landscape.jpg" alt="Rolling hills" width="1200" height="800">
<style>
.responsive {
  max-width: 100%;
  height: auto;        /* keeps aspect ratio */
  padding: 8px;        /* space around image inside its box */
  border-radius: 10px; /* optional aesthetics */
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}
</style>

Crop visually within a fixed box (without editing the file) using object-fit:

<div>
  <img src="portrait.jpg" alt="Portrait of Asha" width="800" height="1000">
</div>
<style>
.thumb {
  width: 220px; height: 220px; overflow: hidden; border-radius: 50%;
}
.thumb img {
  width: 100%; height: 100%;
  object-fit: cover;   /* fills and crops */
  object-position: 50% 30%; /* adjust focal point */
}
</style>

6) Hyperlinking from Graphics

Wrap the image in an anchor. Keep accessibility in mind.

<a href="product-detail.html" aria-label="View details for Blue Mug">
  <img src="product-thumb.webp" alt="" width="220" height="220" loading="lazy">
</a>

If the image itself is the only link text, either:
- Put meaningful alt text on the image or
- Leave alt="" (decorative image) and put a meaningful aria-label on the <a>.

Open in new tab (use sparingly)

<a href="brochure.pdf" target="_blank" rel="noopener"> 
  <img src="pdf-icon.svg" alt="Download brochure (PDF)">
</a>

7) Using Thumbnail Graphics

Show a small version that links to the large/original.

<a href="photo-large.avif">
  <img
    src="photo-thumb.avif"
    srcset="photo-thumb.avif 1x, photo-thumb@2x.avif 2x"
    alt="Waterfall in monsoon season" width="240" height="160" loading="lazy">
</a>

Thumbnail grid with subtle hover

<ul>
  <li><a href="img1-1600.jpg"><img src="img1-320.jpg" alt="Sunset over beach" width="320" height="213"></a></li>
  <li><a href="img2-1600.jpg"><img src="img2-320.jpg" alt="Old fort walls" width="320" height="213"></a></li>
  <li><a href="img3-1600.jpg"><img src="img3-320.jpg" alt="Street market scene" width="320" height="213"></a></li>
</ul>
<style>
.thumbs { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 10px; list-style: none; padding: 0; }
.thumbs img { width: 100%; height: auto; display: block; border-radius: 6px; transition: transform .15s ease; }
.thumbs a:hover img { transform: scale(1.03); }
</style>

For a lightbox (click-to-zoom overlay), you’d normally add a small JavaScript library—but thumbnails + links work fine without JS.

8) Including Alternate Text (alt) for Graphics

Alt text is read by screen readers and used if images fail to load.

Informative image: describe the content briefly and specifically.
Bad: “image1” → Good: “Blue ceramic mug with speckled glaze”
Functional image (button/link): describe the action.
E.g., alt="Download annual report (PDF)"
Decorative image: alt="" (empty), and optionally role="presentation" so assistive tech skips it.
Complex charts/diagrams: short alt, plus a nearby text description or aria-describedby.

Examples

<!-- Informative -->
<img src="team.jpg" alt="Four developers high-fiving in the studio" width="1200" height="800">
<!-- Functional (acts as a link button) -->
<a href="signup.html">
  <img src="cta-join.svg" alt="Join now">
</a>
<!-- Decorative only -->
<img src="divider.svg" alt="" role="presentation">

9) Adding Figure Captions

Use semantic <figure> and <figcaption> so captions are associated with the image.

<figure>
  <img src="konark-wheel.webp" alt="Intricate stone chariot wheel at Konark Sun Temple" width="1200" height="800" loading="lazy">
  <figcaption>Konark Sun Temple, Odisha — stone wheel detail.</figcaption>
</figure>
<style>
.figure {
  margin: 1rem 0;
  text-align: center;
}
.figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.figure figcaption {
  font-size: 0.95rem;
  opacity: 0.8;
  margin-top: 6px;
}
</style>

Complete Mini-Page Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Displaying Graphics Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    :root { --gap: 14px; }
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; padding: 24px; line-height: 1.5; }
    header { max-width: 1000px; margin: 0 auto 24px; }
    .hero { border-radius: 12px; overflow: hidden; }
    .grid { max-width: 1000px; margin: 24px auto; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
    @media (min-width: 720px) { .grid { grid-template-columns: 1.2fr 1fr; } }
    figure { margin: 0; }
    figcaption { font-size: .95rem; opacity: .8; margin-top: 6px; }
    .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--gap); list-style: none; padding: 0; }
    .thumbs img { width: 100%; height: auto; display: block; border-radius: 8px; transition: transform .15s ease; }
    .thumbs a:hover img { transform: scale(1.02); }
    .card { display: flex; gap: 1rem; align-items: center; padding: 12px; border: 1px solid #eee; border-radius: 10px; }
    .card img { flex: 0 0 auto; border-radius: 8px; }
  </style>
</head>
<body>
<header>
  <h1>Displaying Graphics in HTML5</h1>
  <picture>
    <source type="image/avif" srcset="hero-1600.avif 1600w, hero-1000.avif 1000w" sizes="(min-width: 900px) 900px, 100vw">
    <source type="image/webp" srcset="hero-1600.webp 1600w, hero-1000.webp 1000w" sizes="(min-width: 900px) 900px, 100vw">
    <img src="hero-1000.jpg" srcset="hero-1600.jpg 1600w, hero-1000.jpg 1000w" sizes="(min-width: 900px) 900px, 100vw"
         alt="Forest valley with morning fog and sunbeams" width="1600" height="900" loading="lazy" decoding="async">
  </picture>
</header>
<main>
  <!-- Content image with caption -->
  <figure>
    <img src="logo.svg" alt="Acme Labs—geometric flask logo" width="240" height="80" style="max-width:100%;height:auto;">
    <figcaption>SVG for sharp, scalable logos.</figcaption>
  </figure>
  <!-- Linked image (functional) -->
  <a href="product.html" aria-label="View Blue Mug product details">
    <img src="product-thumb.webp" alt="" width="160" height="160" loading="lazy">
    <div>
      <h2>Blue Mug</h2>
      <p>Click image to view product details.</p>
    </div>
  </a>
</main>
<section>
  <h2>Thumbnails</h2>
  <ul>
    <li><a href="img1-1600.jpg"><img src="img1-320.jpg" alt="Tea plantation terraces at sunrise" width="320" height="213" loading="lazy"></a></li>
    <li><a href="img2-1600.jpg"><img src="img2-320.jpg" alt="Mountain stream with rocks" width="320" height="213" loading="lazy"></a></li>
    <li><a href="img3-1600.jpg"><img src="img3-320.jpg" alt="Wildflowers in meadow" width="320" height="213" loading="lazy"></a></li>
  </ul>
</section>
</body>
</html>

Quick Best-Practice Recap

Choose AVIF/WebP for photos (with JPEG fallback), SVG for logos/icons.
Always include alt—or alt="" for decorative.
Set intrinsic width/height to prevent layout shift; control size with CSS.
Use srcset/sizes (and <picture>) for responsive images & modern formats.
Use loading="lazy" for off-screen media; decoding="async" to improve rendering.
Arrange with Flexbox/Grid; avoid <table>/float for layout.
Thumbnails: link small → large; consider a lightbox later if you add JS.