[Pro] Experimenting with srcset

Freeway
1

My first attempt at the srcset attribute has given me mixed results.

I was able to get 2x images to show on retina displays (Safari and iOS) while only showing 1x images on regular displays.

But when it came to serving large, medium, small images in the appropriate circumstances, I could only and always ever get the large version to show (this aspect of secretes is only supported in Chrome and Firefox, currently).

I look forward to your comments and speculation about the source of my partial failure, and what you might think of the whole thing anyway.

http://cssway.thebigerns.com/workbench/srcset-first-attempt/

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Hi Ernie

I also have been giving this some thought after catching up on some ShopTalk podcasts while on holiday.

One of the articles linked to is a Blog post from Jason Grigsby at Responsive Images 101, Part 1: Definitions – Cloud Four but I haven’t read it through yet.

Being a lot more recent then the one from CC it may help with clarification.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

It works for me but only if I go from narrow to wide - not the other way round. If I make the page 226px wide using Chrome’s device mode in the dev tools and reload the page then the small image is displayed. Increasing the width from there to 404px displays the medium image, and anything above that will display the large image. It seems odd that it only works from small to large – displaying a wide angle shot at wider sizes and drilling down to a more detailed shot at smaller ones seems like it would be useful.

You can get better control over when to display the images using the sizes attribute. Using the following will get you something that seems to be pretty close:

sizes="(max-width: 320px) 50vw, (max-width: 768px) 70vw, 282px"

Broken down, the first part says that at 320px wide and lower the image will be 50% of the viewport width, so the small image will be display at anything 320 and below. At 320–768 it will be 70% of the viewport width, so the medium one is used between 320–500(ish) and then the large one will be displayed. Anything above 768 and the image will always be 282px wide so the medium image is used.

For better high-dpi results you can remove the 320 query and up the 768 one to 100vw.

I found this article (and the subsequent one) provided an easier to follow description of srcset and sizes than the CSS Tricks one: Responsive Images 101, Part 4: Srcset Width Descriptors – Cloud Four

Joe

On 12 Jul 2015, at 09:17, The Big Erns email@hidden wrote:

My first attempt at the srcset attribute has given me mixed results.

I was able to get 2x images to show on retina displays (Safari and iOS) while only showing 1x images on regular displays.

But when it came to serving large, medium, small images in the appropriate circumstances, I could only and always ever get the large version to show (this aspect of secretes is only supported in Chrome and Firefox, currently).

I look forward to your comments and speculation about the source of my partial failure, and what you might think of the whole thing anyway.

http://cssway.thebigerns.com/workbench/srcset-first-attempt/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

Can someone of you brave people tell me, what the “retina” version of the following image would be?

1960px x 750px 72dpi

Is it:

3920px x 1500px 72dpi

or

3920px x 1500px 36dpi

I’m fear of not understanding the issue at all.

Oh and btw, I did some small things myself as well and published it recently:

http://backstage.kimmich-digitalmedia.com/testings/imageresize/img-res-adjusted.html

on this thread:

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

On Jul 12, 2015, at 4:30 PM, Thomas Kimmich email@hidden wrote:

Can someone of you brave people tell me, what the “retina” version of the following image would be?

1960px x 750px 72dpi

Is it:

3920px x 1500px 72dpi

This one. Or it could also be set at 144ppi (or any other ppi) if you like, but the important thing to realize is that it really doesn’t matter what ppi you set a photo to when it comes to the Web. Ppi is for print software, mainly, and even there it is a convenience method to set the image to a particular physical dimension at a particular pixel density when you first import it into the page. It is and has always been up to you to ensure that when an image is displayed at a particular physical dimension, it has sufficient pixels per inch to give the illusion of continuous tone and adequate detail.

Walter

or

3920px x 1500px 36dpi

I’m fear of not understanding the issue at all.

Oh and btw, I did some small things myself as well and published it recently:

http://backstage.kimmich-digitalmedia.com/testings/imageresize/img-res-adjusted.html

on this thread:

Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

Thanks, Joe-- I found that helpful (there is more of a response now) although I’d be a liar to say that I understand it better now. I guess that I’m used to directing the outcomes with regular media queries while this seems more of a suggestion to browsers. Signaling “intent” to a machine sounds weird to me.

Thomas, I don’t know if this is the “right” answer (my math skills suck) but I look at pixel width at 72ppi and just double for 2x images. I’ve no “retina” devices (other than virtual ones) so I don’t know how they appear unless someone complains. Although it is usually Google which complains how heavy my images tend to be.

In either case, it’s hard to care about something that is difficult to understand.

http://cssway.thebigerns.com/workbench/srcset-first-attempt/

freewaytalk mailing list
email@hidden
Update your subscriptions at: