I was wondering if I could somehow use the srcset attribute in css to (for example) make all images 2x, it usually works like this
<img src="image.jpg" srcset="image.jpg 1x, higher-resolution-image.jpg 2x" >
I wonder if there's a way to use that in css to make all images displayed in 2x
Thanks in advance :D
You should find this post useful:
Is there a srcset equivalent for css background image
It mentions using image-set:
background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );
Related
I am currently trying to update my Website using the new loading="lazy" attribute as shown here: https://web.dev/native-lazy-loading
As seen in the video, everything works as expected, but compared with my waterfall diagram in chrome, it doesn't.
How it looks:
How it should look:
This is how its implemented:
<img class="has-border" src="https://andreramoncombucket.s3.amazonaws.com/static/assets/img/work/personal-website/pw_full.jpg" style="object-fit: cover;" alt="..." loading="lazy">
I had a similar issue when trying to implement it.
I use Chrome by default and it was not working. When I tested it in Firefox, it did work. That made me think it was a browser problem.
After digging in a bit more, I found out the "problem" for my case. It might be the same probably for many others.
It turns out Chrome is more impatient than Firefox when loading images tagged as lazy. That means it loads the images much earlier, so an image will not be loaded when it appears at the screen but earlier than that.
Firefox, on the other side, is loading the images almost when they are about to be shown at the screen.
The images I was testing were below the fold, but the page was not very long, so Chrome was loading the images anyway.
When I tried it in a much longer article, the images that were deep down the article did load lazily in Chrome as well.
Hope this helps!
I had a similar problem, and after some research, I found the solution:
Just need to add width and height to the IMG tag, this is because the browser needs to know the size of the element before applying lazy loading.
Your code:
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">
Your code after adding width and height:
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="200px" height="200px">
Another alternative is using inline style:
<img class="has-border" src="..." style="object-fit:cover; height:200px; width:200px;" alt="..." loading="lazy">
Take into consideration I just randomly set the dimensions of the IMG tag to 200px.
You can find more information on this web.dev article
hope it helps 👍
I have the worst reason it wasn't working - I forgot to add the width and height attributes (they were instead added as styles in my broken code)
optionally if you dont want to change your image size use this
Original code
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">
With working Lazy load with no size restrictions
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="auto" height="100%">
I have applied loading="lazy" to all of my images, included width="111px" height="111px" attributes for my <img> tags and even converted them into WebP format to reduce size, but my Firefox browser still keeps loading all images from the entire page. I don't touch or scroll after refresh.
The indicator Dev tools says that it is - lazy-img.
I use Nodejs, vue and tailwind.
What could be wrong?
It could be because of cache.
If you see here lazy-img in the Network tab that means everything is fine.
You can test on a private window if you want just to double check.
The image should be positioned as "relative" in style.
I can't seem to discern a difference in function or meaning between using the picture element or just using the img element with the srcset attribute. I understand how they work; I just don't fully understand why or when to choose one over the other.
It looks like img element is lighter, cleaner code, but does it mean and do the same thing? I'm using this in my code to serve up different scaled versions of the same image:
<img src="default.jpg"
srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w"
sizes="(max-width: 800px) 100vw, 12em"
alt="something" />
It does exactly what I want as far as serving up the correct scaled image and it seems to work in Chrome, Firefox, Edge, and Opera.
I know that pretty much the same thing can be done with this code:
<picture>
<source srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w"
media="(max-width: 800px)"
sizes="100vw" />
<source srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w"
media="(min-width: 800px)"
sizes="12em" />
<img src="default.jpg" alt="something" />
</picture>
So, what's the difference functionally? Why would I use more code to do essentially the same thing?
Is there a semantic difference? What would that be?
From w3.org img:
An img element represents an image and its fallback content.
Also from w3.org picture:
The picture element is a container which provides multiples sources to
its contained img element to allow authors to declaratively control or
give hints to the user agent about which image resource to use, based
on the screen pixel density, viewport size, image format, and other
factors. It represents its children.
If the srcset attribute already does this for the img element, why do we need a picture element as a container? What am I missing? Is there a difference in semantic meaning?
I read one other post on here with a comment that suggested that srcset on the img element was simply new and not completely reliable crossbrowser. Is that still true? Was that the only difference?
In your example, <picture> is useless, because you want to show the same image content everywhere.
<picture> is mandatory when you want to perform Art Direction, for example change the image width/height ratio when you hit a breakpoint, or crop the image to zoom in when you're on a small device.
Alongside art direction a use case for using <picture> is when you want to serve a different filetype. For example, Chrome supports webp which has better compression than JPG. The only way to have Chrome pick a webp file is by providing it through <picture>.
<picture>
<source srcset="image-800.webp 800w, image-400.webp 400w, image-200.webp 200w"
type='image/webp' media="(max-width: 800px)"
sizes="100vw" />
<img src="default.webp" alt="something" />
</picture>
I've got a thing like this:
<picture>
<source media="(min-width:1200)" srcset="big.jpg">
<source media="(min-width:840)" srcset="small.jpg">
<img srcset="big.jpg" alt="Test" />
</picture>
I'm also using picturefill.
My issue is that both firefox and chrome (the 2 I'm currently testing on), will load only big.jpg, even in small screens. Checked also on console's network trace.
My css sets img as basic fluid:
img{
display: block;
max-width: 100%;
height:auto;
}
So what's wrong in my code?
As for I haz kode's comment, the answer is: my code lacked unit declaration in media queries.
As for completeness, I also write here a better code for my use case: having a default image for small screens and different one from 840px up.
<picture>
<source media="(min-width:840px)" srcset="big.jpg">
<img srcset="small.jpg" alt="Foradori">
</picture>
This will work correctly and download only the right image for the current breakpoint.
Also remember we need picturefill to ensure crossbrowser support.
I'm using the srcset attribute on a web page I'm developing.
<img src="img/picture-820x496.jpg"
srcset="img/picture-820x496.jpg 1200w,
img/picture-374x226.jpg 992w,
img/picture-305x185.jpg 768w,
img/picture-707x428.jpg 300w" />
If I check which resources get loaded with the page, I see that Chrome 41 as well as FF using the polyfill as well as Safari 7 always load the image twice - once the full resolution and once the according size from the srcset attribute. What am I doing wrong here?
I had a similar problem, I found that if the src image was not one of those available in the srcset images the browser would load the src image regardless. The solution was to ensure the src image url matched one of the srcset images urls.
As an aside - as I understand the spec the w value following the image url should match (roughly) the width of the image. This allows the browser to best determine the image to display based on the sizes attribute and device pixel density. So you should probably alter the w values in your markup and add the sizes attribute (which allows you let the browser know the rendered image size using media queries and a fallback ie. (min-width: 640px) 600px, 50vw). Consider the example below:
<img src="img/picture-820x496.jpg"
srcset="img/picture-820x496.jpg 820w,
img/picture-707x428.jpg 707w,
img/picture-374x226.jpg 374w,
img/picture-305x185.jpg 305w"
sizes="100vw">
I want to have nice images in my HTML that display very nicely on browsers in computers with Retina displays. I'm guessing I just have to have a high resolution image in my img tag. But then the lower resolution browsers will all have to download this bigger file and then downscale it, maybe resulting in a lower quality image than if I downscaled it in a tool like photoshop.
I'm hoping there's something like this I can do:
<img src="/example.png" src-retina="/example-high-res.png"/>
What's the proper way to display 2 different images, 1 for normal displays and 1 for retina displays?
With CSS it's easy
With an image source attribute, there is less of standard way to do it. I've used a JS based approach myself checking window.devicePixelRatio:
<img id="example-img" width="100" height="100"/>
<script>
if (window.devicePixelRatio > 1) {
$('#example-img').src = "/example-high-res.png";
} else {
$('#example-img').src = "/example.png";
}
</script>
But if you can, use CSS and media queries. It's far cleaner.
There are several different approaches out there, and they have upsides and downsides. Apple themselves actually serve both retina and standard images to retina devices, which works but obviously results in pretty heavy downloads.
If you want something that's semi-automated, try Retina.js. From the description:
When your users load a page, retina.js checks each image on the page
to see if there is a high-resolution version of that image on your
server. If a high-resolution variant exists, the script will swap in
that image in-place.
The script assumes you use Apple's prescribed high-resolution modifier
(#2x) to denote high-resolution image variants on your server.
You need to make two (or possibly more) CSS files and use them depending on the user's browser settings with the help of JS. The css file for mobile site should make a new layout that is fully visible in a mobile phone.
Check out this SO Question to make a better understanding of the topic.
Use the responsive design principles for scaling up or down the image size depending on the device screen resolution.
In CSS you may define the max-width and max-height of the target device. This is how you declare it in CSS:
#media only and (max-device-width:1024px) and (orientation:portrait)
After that you have to specify the element width and height in percentage, relative to the parent element. This is the working method, however not the best one in terms of bandwidth consumption on mobile devices, because even if we set the percentage lower, the image is uploaded in it's native size and the downscale is done after the browser parsed the CSS document.
There are some proposals from W3C on terms how should the image been handled by different devices, but none of them are commonly accepted and standardized.
One of the most well received proposal is the new <image> and <source> tags, which accept different image source and depending the screen resolution use the most opportune image dimension.
<picture alt="">
<!-- low-res, default -->
<source src="small.jpg">
<!-- med-res -->
<source src="medium.jpg" media="(min-width: 400px)">
<!-- high-res -->
<source src="large.jpg" media="(min-width: 800px)">
<!-- Fallback content -->
<img src="small.jpg" alt="description of image">
</picture>
There is a polyfill which mimic the proposed picture element: https://github.com/scottjehl/picturefill
Here are two thoroughly explained article about the concept:
http://nicolasgallagher.com/responsive-images-using-css3/
http://css-tricks.com/on-responsive-images/
You could use a div with css background definition that specifies the image. Using css media-queries you could pick the right css definition when the client is a Apple device with a 'retina-display'.
You can do it with jQuery:
HTML:
<img src="/example.png" src-retina="/example-high-res.png"/>
Javascript:
if (window.devicePixelRatio > 1) {
$('img').each(function() {
var src_retina = $(this).attr("src-retina");
$(this).attr("src", src_retina);
});
}
This demo shows the way it works: http://jsfiddle.net/TLz7S/.
Note: I may be detecting the retina display wrong; I don't actually have one. If someone finds that incorrect, please let me know.