Select Page

Category: responsive images

Sometimes `sizes` is quite important.

Paraphrased question from email: I just read your article Responsive Images: If you’re just changing resolutions, use srcset. In the age of “responsive websites,” srcset does not help in certain situations. For example, I have a popular products slider. On mobile, I have one image per slide where the images are 320px wide. On desktop, I have six images per slide where each is 160px wide. So the desktop images are smaller on desktop, not bigger. How do I handle this situation with srcset? I tried to be careful with that post title: “If you’re just changing resolutions, use srcset.” In this case, we’re changing the size of the images not just at certain resolutions, but at specific breakpoints as well, which means we’re also going to need to use the sizes attribute to get the most out of responsive images. The entire job of the sizes attribute is to tell the browser what size the image will be shown at, as per our CSS. A demo! Resize the width to see it alternate between the “Desktop” and “Mobile” views. See the Pen Responsive Images Slider by Chris Coyier (@chriscoyier) on CodePen. As the email mentioned, the “Desktop” version actually renders the images smaller (160px) than the “Mobile” version (320px). Let’s also account for 2x displays. To prepare ourselves, let’s have three versions of each image: 160px (for 1x...

Read More

An Almost Ideal React Image Component

Yes, this is a React component, but regardless if you care about that part or not, the “ideal image component” part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with: Placeholder space (and then flexible responsive styles after loading) Low-quality placeholder images Responsive images syntax (srcset) Image formats (e.g. using WebP when you can) Click-to-load on bad network connections Better UX for loading errors, with translatable copy That’s not even all of it. So much to think about with poor little . I enjoyed Alejandro Sanchez’s response: The readme file for this component is amazing to teach you how to think like a front-end developer. — Alejandro Sanchez (@alesanchezr) June 12, 2018 Direct Link to Article — Permalink The post An Almost Ideal React Image Component appeared first on CSS-Tricks....

Read More

w descriptors and sizes: Under the hood

Eric Portis digs into how the browser decides which image to downloads when you give it . Notably, a browser can do whatever it wants: Intentionally un-specified behavior lets browsers provide innovative answers to an open-ended question. Still, calculations happens based on what you give it and you can still do a good job with that part. The very weirdest part about all this is that the sizes attribute can alter an images “natural width”, which can lead to unexpected upscaling, a thing we’re trained to loathe. If you’re in that situation, you can either… use an inline width attribute set an inline style with a max-width embrace it and juoccasionalth occassinal upscaling Direct Link to Article — Permalink The post w descriptors and sizes: Under the hood appeared first on CSS-Tricks....

Read More
000webhost logo