Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more

Day 9: Image Optimization & Performance

📘 Day 9: Image Optimization & Performance

Images are often the largest assets on a page. Properly optimized images improve load times, reduce bandwidth, and deliver better UX especially on mobile. Today we cover responsive images, formats, lazy loading, and preventing layout shift.

1. Use correct formats

  • WebP — modern, smaller files for photos (supported in most browsers).
  • AVIF — even better compression (newer support).
  • JPEG — good for photos (broad support).
  • PNG — for images needing transparency (use sparingly).
  • SVG — perfect for icons/logos, scales without loss.

2. Responsive images — srcset & sizes

srcset supplies multiple image files with width descriptors; sizes tells the browser how large the image will be in the layout so it can pick the best candidate.

<img 
  src="image-600.jpg"
  srcset="image-300.jpg 300w, image-600.jpg 600w, image-1200.jpg 1200w"
  sizes="(max-width:600px) 100vw, 600px"
  alt="A scenic view" width="600" height="400" loading="lazy">

How it works: the browser evaluates viewport & sizes, then selects the smallest file that meets needs — saving bandwidth on small screens.

3. <picture> — art direction & format fallback

Use <picture> to serve WebP first and then fallback to JPEG, or to change crop for different screen sizes.

<picture>
  <source type="image/webp" srcset="image-600.webp 600w, image-1200.webp 1200w" sizes="(max-width:600px) 100vw, 600px">
  <source type="image/jpeg" srcset="image-600.jpg 600w, image-1200.jpg 1200w" sizes="(max-width:600px) 100vw, 600px">
  <img src="image-600.jpg" alt="Scenic" width="600" height="400" loading="lazy">
</picture>

4. Lazy loading & decoding

Add loading="lazy" to images below the fold to defer loading. Use decoding="async" to avoid blocking rendering.

5. Prevent Cumulative Layout Shift (CLS)

Reserve space for images by adding width and height attributes or using CSS aspect-ratio. This prevents content from jumping when images load.

<img src="image.jpg" alt="..." width="800" height="533" style="max-width:100%;height:auto" loading="lazy">

Try it yourself — Responsive picture + lazy loading

Edit the code and run it. The demo uses public placeholder images so you can test responsive behavior.


Advanced performance tips

  • Use responsive & modern formats (WebP/AVIF) where supported.
  • Generate multiple sizes at build time (300w, 600w, 1200w) and use srcset.
  • Serve images from a CDN with proper caching headers.
  • Use width/height or aspect-ratio to avoid CLS.

Project of the Day

Create an article with a hero image that uses the <picture> element, provides WebP + JPEG sources, includes loading="lazy", and reserves space to avoid layout shifts. Measure impact with Lighthouse.

Comments

Post a Comment