Media Optimization — Complete Guide
Media Optimization — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.
On this page
HTML Tutorial · Lesson 20 of 100
Media Optimization
Basics → Forms & semantics → APIs & performance → Projects
Basics · 1 — Structure & media · ~6 min · HTML — Media & Content
What is this?
Optimize media with right formats, compression, lazy loading, and dimension attributes.
Why should you care?
MarkupVerse LCP suffers when heroes are multi‑megabyte PNGs.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<img
src="/hero.webp"
alt="MarkupVerse mobile app"
width="720"
height="900"
loading="eager"
fetchpriority="high"
decoding="async">
<img src="/gallery/1.webp" alt="Transfer screen" width="360" height="640" loading="lazy">Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Hero may be eager + high priority; below-fold lazy.
- Prefer webp/avif with fallbacks.
- Compress before upload.
Practice next
- Convert a PNG to webp.
- Lazy gallery images.
- Set width/height.
- Add picture with avif.
- Check Lighthouse images audit.
Remember
Compress + modern formats. Lazy below fold. Size attrs.
MarkupVerse media budget
Hero webp + lazy gallery.
Outcome: LCP improves on mobile.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
