Image sizes for responsive images

Help
1

Hullo! I’ve been putting off implementing images on my site because I keep getting stuck. I use Eleventy, and I have the image plugin working (albeit with earlier versions, I think, since I haven’t updated to Eleventy 3). Right now I’m working on a shortcode that creates an image with a caption. The plan is for it to be the full width of my <main> section on my website.

<figure class="captioned-image">
	<picture>
		<source 
			type="image/avif" 
			srcset="x-300.avif 300w, x-600.avif 600w, x-700.avif 700w, x-1400.avif 1400w" 
			sizes="(min-width: 90rem) 50vw, 100vw">
		<source 
			type="image/webp" 
			srcset="x-300.webp 300w, x-600.webp 600w, x-700.webp 700w, x-1400.webp 1400w" 
			sizes="(min-width: 90rem) 50vw, 100vw">
		<source 
			type="image/jpeg" 
			srcset="x-300.jpeg 300w, x-600.jpeg 600w, x-700.jpeg 700w, x-1400.jpeg 1400w" 
			sizes="(min-width: 90rem) 50vw, 100vw">
		<img
			src="x-300.jpeg"
			width="1400"
			height="933"
			alt="[alt text]"
			loading="lazy"
			decoding="async">
	</picture>
	<figcaption>
			<p>[caption text]</p>
			<p><a href="x-1400.jpeg">View full size.</a></p>
	</figcaption>
</figure>

This is what I have so far. But I get confused when choosing image widths and sizes attributes; I don’t really know what makes sense for my site. This responsive image linter suggested: sizes="(min-width: 800px) 620px, calc(94.58vw - 118px)", but I’m not sure what image widths would go with that.

How do other folks pick sizes when doing responsive images?

1 Like
2

I don’t pick sizes for responsive images. I only pick formats. My CSS for images is also pretty basic:

img {
    max-width: 100%;
    height: auto;
}

This keeps images from overflowing their containers and preserves aspect ratio. I figure that’s all I need, and any further effort on my part is overkill.

3

That’s fair - I guess I should actually see whether or not different dimensions are necessary; maybe having file formats with better compression is sufficient.

I’m just worried about making folks download a bunch of heavy images on my project pages.

4

It’s fine if you want to resize huge images to something more reasonable, like a 4K screenshot down to 25% of its original size, but I don’t think you need multiple sizes. That would just make your image processing tasks more complicated and more time/processor intensive.

5

@eladnarra check out my shortcode if you want to see how mine is managed.

6

Thanks! Looks like its output is kinda similar to what I’ve got, although your shortcode is much cleaner, haha.

How did you decide on the widths/sizes that you have?