Coding responsive images the correct way
Hi there! I've always wondered what the correct is to code responsive images on a website, in containers and other elements.
Either something that can fit different image sizes and still make sense layout wise or make the code clean and logical.
I've tried learning the correct way as I never feel quite satisfied. Like having the image percentage wise of the container, having a set px size and other methods.
(It doesnt help that every website do it way different)
I would like to know the "best" way of doing it if possible, thank you!
2 Replies
there is no single correct way, and every project has its own different priorities for speed and beauty. Also you can compress some images way more than others if that image is a background (other content will partially cover) or has an overlay partially obscuring.
two things in general:
1. what is the size of the file being downloaded, and 2. its optimization. These include concerns re size and file type.
re types:
You'll find it hard to beat jpg for most photos, with a jpg compression set somewhere from 40-60% usually works. For images with fewer colors and maybe large areas of flat color, pngs work better. png is a little more effort to optimize: can you get away with png8bit (reduced # of colors) , or do you need full nice transparency of png24? Even when you are pretty good at optimizing png, look at tinypng.com to see what they can do. And though its a little more complicated depending on your platform, see if you can serve webm or avif ... the complexity arrises partly from the fact that not all browser support those formats so you cant just assume, you need a technical solution to solve when to serve those versions and when to serve that png/jpg....
...
re size (dimensions):
if you want the images to look good, the size of the file displayed should be at least the size that its displayed at... meaning if a pic will be shown at 500px wide by 200px tall or smaller, the image can be a little larger (say 640w) so it can look nice on high resolution displays, but if its 1920px or larger, doesnt matter how well optimized it is, its too big and a waste. Some images are fine to stretch or repeat (and thus be smaller than the area they are displayed in), but you'll know when those come up.
there are different ways of setting up with size of an image your users will actually download so look at picture element and srcset and sizes , sometimes all you need is different media queries in your css where you indicate which exact file(s) are loaded.
the topic is way bigger than any one comment can cover but I hope this is helpful
ah, your question isnt so much about responsiveness and performance, its more about layout. More design decision that one correct way there. For example do you want the image to be taller/shorter naturally or does always at the same aspect ration regardless of if a tall or wide images is selected? Does the image need to appear the same height as the text and as such be dependent on the size of the message?
if you have a design target or know your content constraints, I could give you more precise opinions / suggestions.
Yeah I've looked into the deeper things about images etc, I've worked for some companies that with your description in question. But thanks alot for the detailed explanation
For now its only responsiveness with css and it scalong with the viewport size properly in coding. But sinds then I figured my own way