I have been reading up on srcset and responsive images the last few days and experimented with it, I'm not quite sure I understand how a image is chosen.
I'm running on a 2160x1440 monitor, with a css pixel ratio of 1.5. Given the following example I was expecting the browser to display image_1.5x.jpg.
<img src="image.jpg" srcset="image_1.5x.jpg 1.5x, image_2x.jpg 2x">
But I always get the one with highest pixel ratio (2x in this case). If I would enter 30x, that image would be served. Isn't the one that matches my monitors pixel ratio the most appropriate one?
If I emulate a slow network connection the default image.jpg gets served.
I'm running Chrome, and I realize that depending on what browser is running, different results may occur.
Related
I don't know if this is the expected behaviour with the srcset attribute. But for some reason, it's not working for me.
So, I'm testing on windows and mac, srcset differentiates them by the pixel density. So 1x means lower (Windows) and 2x means higher (Mac)
But for some reason, even in Windows, it's showing the 2x image instead of 1x. This happens only for those images which have already been used in the page.
somewhere in the same file
<img src="already_used_image.jpg" >
<img
srcset="already_used_image.jpg 2x, normal_image.jpg 1x"
src="fallback_image.jpg"
>
I have checked the docs but couldn't find relevant info regarding this particular case.
I've decided to change my site to use srcset for the images to account for low dpi screens. My site is images heavy, and the default 400x400 thumbnails look very nice on a hidpi screen. On a lodpi screen they're an overkill as the actual size of displayed image is 165x165. After the changes my img elements look more or less like this:
<img class="img-rounded img-responsive"
src="/photos/tiny/gcu-01015.jpg"
srcset="/photos/tiny/gcu-01015.jpg 170w, /photos/thumb/gcu-01015.jpg 400w">
/tiny/ images are 170x170 and /thumb/ ones are 400x400. Sure enough, loading a page with these on a hidpi screens gives me 400x400 version. That shows the browser sees srcset and acts accordingly. I pull up the developer tools in Firefox, enable "Responsive Design Mode, change the "screen" size to 300x700 with device pixel ratio of 1.0 and reload the page. It still uses the/thumb/` version, even though the images on the page are now 120x120, and with dpr of 1.0 there's no point in pulling down 400x400 images.
Here's the page in question.
I've fiddled a bit with it but I couldn't find a good answer for the selection of the images. I'm pretty sure I'm missing something here :|
As far as I can tell, the srcset and sizes attributes focus more on applying a suitably scaled image for the device’s size and resolution.
There appears to be no facility to use these attributes to select an alternative image based on the screen size, such as one cropped or oriented differently.
Is this a correct understanding of the situation? Does that mean we will have to wait for the picture element to be widely supported for this task?
You are correct that srcset and sizes are only there to provide different resolution alternatives to the "same" image - there's no guaranty which resource will be picked.
If you want to provide cropped or proportionally different alternatives that are guarantied to match your responsive breakpoints, then <picture> is what you're looking for.
As far as support goes, <picture> is fully supported in Chrome and Firefox, soon to be supported in MS Edge, and not yet supported in Safari 9.
In the mean time, you could use picturefill to add that support to non-supporting browsers.
Personally, I have used the w-descriptors and srcset to display a variety of images based on the width of the available space.
It might seem rather crude but it works for me - I edit the image so that it becomes "art-directed" for a number of common breakpoints - turning it into effectively a number of different images.
Then, based on the size of the agent's screen, the browser will almost always choose the image which I have previously determined to be the most suitable.
For my approach, I did not use size, picture or any other property.
A code as simple as this appears to work:
<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />
I'm seeing a lot of inconsistencies with srcset attribute on img tags (responsive images) in Chrome 40.0.2214.91
Before I updated to Chrome v40 (I was on ~39), srcset attribute worked fine and would swap the image upon browser resize. Now, sometimes, the smaller version of the image will display if I have the browser set to the desired width then refresh the page. Other times it will not work whatsoever.
Testing jsbin:
http://jsbin.com/hulaconake/1/edit?html,output
Image tag I have:
<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">
I'm also testing this in another env with non-Placehold.it images, and using Picturefill.js http://scottjehl.github.io/picturefill/
I'm not having any issues in FF or Safari (both using picturefill).
iOS Chrome has similar problems.
Is my syntax wrong? Is there something going on I don't know about?
It's a feature not a bug. Chrome does not switch the size because Chrome already has a larger image in cache, so there is no need to download new data of the same image.
In case you want to use different images or same image with different crops, use the picture element.
Responsive images can be technically differentiated between 2 types.
srcset with source descriptors (let the browser choose the right image based on screen size/resolution, bandwidth…):
density descriptor (x) (for static image sizes, Retina vs. normal resolution)
width descriptor (w) and the corresponding sizes attribute (for flexible, responsive / adaptive images (automatically also includes Retina optimization)
and the picture element with its source[media] children (gives the author control about what srcset should be chosen by the browser depending on specific media queries)
So img[srcset] is for resolution switching and picture is for different images reacting to your design
What is the reason for the granularity of images in HTML documents?
I have scanned some documents and created corresponding JPEG images with the following properties:
image size: 2452 x 3508 pixels
resolution: 300x300 ppi
JPEG, RGB
and included them into an HTML document with: <img src="image.jpg" height="100%" />
I have opened the web page on a big monitor and on a notebook.
In both cases the quality of the images is very bad. They are too granular so that the text is difficult to read. Although if you open them in the standard Windows image viewer you can see every small detail.
How to include an image into an HTML document without losing the quality?
You are scanning an image at print quality and displaying it on a screen that usually cannot handle more than 96 DPI at max.
Re-scan the image using a lower DPI setting and don't try to display an 8 Megapixel image in a browser window.
This may seem counter-intuitive to what you wish to accomplish, but its not. You will never get a scanned image to display on a computer screen as if it where print quality. (Until we all have retina quality displays for monitors)
Try removing height="100%" from image tag.
<img src="image.jpg" />