ivangdavila_image/web.md

Web Image Optimization

Responsive Images

Standard srcset widths: 320w, 640w, 768w, 1024w, 1366w, 1600w, 1920w

<img
  srcset="image-320.webp 320w,
          image-640.webp 640w,
          image-1024.webp 1024w,
          image-1920.webp 1920w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
>

• Do not generate every possible size; match real CSS breakpoints.
• Four or five sizes is usually enough for one asset.
• Width descriptors are safer than DPR-only guesswork when layouts vary.
• If art direction changes by viewport, use <picture> or separate crops, not one crop forced everywhere.
• Do not force a single desktop crop into mobile if the subject or text loses meaning; mobile often needs a different crop, not just fewer pixels.

LCP, Lazy Loading, and Fetch Priority

Use loading="lazy" for:

• Below-the-fold images
• Galleries and long lists

Do not lazy-load:

• Hero or likely LCP images
• First visible product or content images
• Critical background replacements that define the first viewport

Useful defaults:

• LCP image: loading="eager" and consider fetchpriority="high"
• Non-critical images: loading="lazy"

Aspect Ratio and CLS

Always reserve space:

<img width="800" height="600">

Or:

.container { aspect-ratio: 16 / 9; }

Common ratios:

Ratio	Use
16:9	Hero banners, video covers
4:3	Traditional photos
3:2	DSLR photos
1:1	Products, avatars, social
21:9	Wide banners

• Never ship web images without reserved space if layout stability matters.

Format Rules for Web

• AVIF first when the stack and audience can handle it.
• WebP is the pragmatic default for most modern photo delivery.
• PNG stays useful for UI, screenshots, diagrams, and alpha-safe assets.
• JPEG is still a fallback, not a failure, when compatibility wins.
• SVG is ideal for icons and simple illustrations but must be validated against the target pipeline.
• OG and social-preview images are a special case: PNG or high-quality JPEG often survive platform ingest more predictably than aggressively compressed modern formats.
• Meaningful content images should not be hidden only in CSS backgrounds when semantic HTML image delivery would be more accessible and controllable.

SVG and Text-in-Image Rules

• Run SVGs through SVGO.
• Keep viewBox; remove hardcoded width and height when CSS should control size.
• Inline very small critical SVGs; externalize bigger or reusable ones.
• Avoid embedding essential copy inside raster images when HTML text should carry meaning.
• If the SVG comes from design tools, inspect it for hidden raster layers, giant embedded paths, or exported cruft before shipping it.

CMS and Pipeline Reality

• Many CMSs and site builders resize, rename, or recompress uploads after you hand them off.
• If the destination pipeline creates its own responsive derivatives, start from a clean master instead of pre-baking every size blindly.
• A web upload that looks sharp in the media library can still be rendered too large in the layout and become blurry.

Delivery Traps

• Shipping one oversized source and trusting CSS to resize it.
• Using one crop for every breakpoint even when the composition breaks on narrow screens.
• Choosing AVIF for everything even when fallback or encoding time makes the workflow worse.
• Forgetting that email builders, CMS pipelines, and some older browsers may still flatten the format decision back to JPEG or PNG.

Performance Checklist

□ LCP image not lazy-loaded
□ Width/height or aspect-ratio reserved
□ Modern format chosen intentionally
□ srcset/sizes only for real breakpoints
□ No oversized originals shipped to the browser
□ Alt text present when the image conveys meaning