📸 Day 9 — Image Optimization & Performance Tips

on

🖼️ Day 9 — Image Optimization & Best Practices

Welcome to Day 9! Images are essential for creating visually appealing websites. But if not optimized properly, they can slow down your website and affect user experience. Today you’ll learn how to efficiently use and optimize images for performance and accessibility.

📘 1️⃣ Adding Images

You’ve already used the <img> tag, but let’s recap how to use it properly with descriptive attributes. 

<img src="flowers.jpg" alt="A bunch of colorful flowers" width="400" height="250">

The alt attribute provides text for screen readers and helps search engines understand your content.

🧩 2️⃣ Common Image Formats

  • JPEG — Best for photographs, compresses well.
  • PNG — Supports transparency, ideal for logos.
  • GIF — Simple animations or low-color images.
  • SVG — Scalable graphics for icons and vector art.
  • WebP — Modern format, smaller and faster.

⚙️ 3️⃣ Responsive Images with srcset

To make your site mobile-friendly, use srcset to load images based on screen size. 

<img 
  src="image-small.jpg" 
  srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
  alt="Sunset over the mountains">

This technique lets browsers pick the right image size automatically.

🧱 4️⃣ Lazy Loading Images

Lazy loading delays loading of images until they appear in view, improving load speed. 

<img src="nature.jpg" alt="Nature background" loading="lazy">

🧩 5️⃣ Image Compression Tools

Before uploading, always compress images using online tools or apps such as:

  • TinyPNG — for PNG and WebP compression
  • Compressor.io — supports multiple formats
  • Squoosh — from Google for advanced optimization

🎨 6️⃣ Using SVGs

SVGs (Scalable Vector Graphics) are perfect for icons and logos. They stay sharp on all screen sizes. 

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="yellow"></circle>
</svg>

📦 7️⃣ Background Images

You can also use CSS to add background images to sections or divs. 

<div style="background-image:url('background.jpg');height:300px;background-size:cover;background-position:center;">
  <h2 style="color:white;text-align:center;padding-top:100px;">Welcome to My Page</h2>
</div>

🔍 8️⃣ Accessibility Tips

  • Always use descriptive alt text.
  • Don’t use images of text — use real text instead.
  • Ensure contrast between background images and text.
  • Keep file sizes below 200 KB where possible.

🧠 9️⃣ Practice Task

  1. Add responsive images to a webpage using srcset.
  2. Use loading="lazy" to improve performance.
  3. Embed one SVG logo in your HTML.
  4. Set a background image using inline CSS.

🧮 Mini Quiz

  • Q1: What is the benefit of using WebP format?
  • Q2: What does lazy loading do?
  • Q3: Which tag attribute provides text alternatives for images?

🎯 Summary

You now know how to add, optimize, and manage images effectively for performance and design consistency. Proper image optimization ensures faster loading and better user experience. Next, we’ll wrap up this module with a mini HTML project to put everything together.

Comments

Post a Comment