Anobjectn
KPCKevin Powell - Community
•Created by Rakudai on 4/1/2024 in #front-end
Coding responsive images the correct way
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.
6 replies
KPCKevin Powell - Community
•Created by octavia0914 on 4/2/2024 in #front-end
background scrolling when menu is open
generally if you want to stop scrolling in the background layer when a modal or a menu is open , you can try this
if when your menu is open some dom has a specific class - e.g. you can give the body or whatever container needed to have overflow:hidden but the key is using :has on an ancestor ... such as , but often you want to overflow hidden the body while keeping your menu normal - in case its tall or inside a short window.
3 replies
KPCKevin Powell - Community
•Created by Rakudai on 4/1/2024 in #front-end
Coding responsive images the correct way
...
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
6 replies
KPCKevin Powell - Community
•Created by Rakudai on 4/1/2024 in #front-end
Coding responsive images the correct way
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....
6 replies