← All tutorials

GoCareerGo Tutorials

HTML Tutorial

Tags, attributes, HTML5 APIs and semantic markup — the web's foundation.

How to Make Images Responsive

Two complementary techniques: CSS for fluid sizing, and srcset for serving the right resolution.

img {
  max-width: 100%;
  height: auto;
}
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Descriptive text"
/>