How to Display Different Images Based on Screen Sizes in HTML

How to Display Different Images Based on Screen Sizes in HTML

Ferenc Almasi β€’ 2020 September 15 β€’ πŸ“– 1 min read

You can create responsive images right inside HTML, by using the srcset and sizes attributes on images:

<!-- Use srcset with sizes to display different images based on screen size -->

<img srcset="small-nickcage.jpg 320w,
             medium-nickcage.jpg 768w,
             large-nickcage.jpg 1024w"
     sizes="(max-width: 320px) 280px,
            (max-width: 768px) 720px,
            1024px"
     src="large-nickcage.jpg"
alt="No need for introduction, you already know him" />
screensizes.html
Copied to clipboard!

srcset defines a comma-separated list of images with their intrinsic size. On the other hand, sizes holds a list of media queries with preferred image sizes. Meaning that if the browser matches the media query, the image will be displayed on the size specified next to the query.

How to Display Different Images Based on Screen Sizes in HTML
If you would like to see more Webtips, follow @flowforfrank
Looking to improve your skills? Check out our interactive course to master HTML from start to finish.
Master HTML

Resources:

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access exclusive interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Remove ads to learn without distractions
Become a Pro

Recommended