Generate responsive image code with srcset, sizes, and picture elements
<img
src="/images/hero.jpg"
srcset="/images/hero-640w.jpg 640w, /images/hero-1024w.jpg 1024w, /images/hero-1920w.jpg 1920w"
sizes="(min-width: 640px) 1024px, (min-width: 1024px) 1024px"
alt="Descriptive alt text"
loading="lazy"
decoding="async"
/>srcset: Defines different image sources and their widths
The browser selects the most appropriate image based on screen size and pixel density.
sizes: Tells the browser how wide the image will be at different breakpoints
This helps the browser choose the right image even before downloading it.
/* Responsive Image Styles */
img {
max-width: 100%;
height: auto;
display: block;
}
picture {
display: block;
}
picture img {
width: 100%;
height: auto;
}
/* Aspect ratio containers */
.aspect-16-9 {
aspect-ratio: 16 / 9;
}
.aspect-4-3 {
aspect-ratio: 4 / 3;
}
.aspect-1-1 {
aspect-ratio: 1 / 1;
}
/* Object fit utilities */
.object-cover {
object-fit: cover;
}
.object-contain {
object-fit: contain;
}Help others discover this tool!
