46. Responsive Images

Modern HTML tutorials commonly include responsive image ideas, often using attributes like srcset and viewport-aware patterns. This helps browsers choose suitable images for different screens.

Syntax

<img src="small.jpg" srcset="small.jpg 480w, large.jpg 800w" alt="Sample">

Example

<img src="photo-small.jpg"
     srcset="photo-small.jpg 480w, photo-large.jpg 800w"
     alt="Nature scene">

Output

The browser displays the most appropriate image source for the screen or layout.

Example

🏋️ Test Yourself With Exercises

Take our quiz on Responsive Images to test your knowledge.

Browse Quizzes »

Previous Next

💡 Did You Know?

Skill Eco is optimized for learning and training. We believe learning should be seamless. Our tutorials are streamlined for maximum clarity and regularly updated to ensure you’re learning with the best tools available.

In This Tutorial

Introduction to HTML Basic HTML Document Structure Headings Paragraphs Line Break and Horizontal Rule Text Formatting Tags Comments Attributes Links Open Link in New Tab

+45 more sections

⭐ Go Premium

Unlock all tutorials, quizzes and certificates.

Upgrade Now »