Source tag

Stribor45 2018-01-22 01:03:28 UTC #1

I would like to use <source> tag to show one image if display is retina display and other image in all the other cases. I see all of the examples online showing media queries based on display size rather than based on pixel ratio. How would I go about doing this?

SamA74 2018-01-22 13:39:09 UTC #2

Have you considered using the srcset attribute for this?

Though a simpler approach I have used is to show an image of double the display resolution to everyone, but increase the compression ratio to slim the file-size. The extra resolution (even at reduced size on normal screens) makes up for the quality loss from compression.

PaulOB 2018-01-22 15:08:37 UTC #3

In case you missed it in Sam's link its like this:

<img src="small-photo.jpg" srcset="big-photo.jpg 2x" >

However I usually use the method that Sam mentioned or use svg instead.

Stribor45 2018-01-22 16:00:30 UTC #4

This example below queries based on screen size but I want to query only retina displays....

<!DOCTYPE html>
<html>
<head>
<title> Responsive images are here! </title>
</head>

<body style="width:100%">

<picture>
<source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w">

<source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw"
srcset="stick-figure.png 416w, stick-figure-hd.png 416w">

<img src="stick-original.png" alt="Human">
</picture>

</body>
</html>

PaulOB 2018-01-22 16:15:43 UTC #5

I already gave you that in my post!

The 2x on the end means double density displays.

SamA74 2018-01-22 18:30:47 UTC #6

Yes, that's the method I use for things like photographs and the likes. I use SVG for more graphical type images such as logos and icons, taking over the role I previously gave to PNG images. SVG is super light-weight and always displays crisp at any size. A stick figure may be a candidate for SVG, though I have not seen the image.

Getting back to <picture> Vs srcset, the general consensus seems to be: to use srcset if you are swapping one image for a different size version of the very same image.
Then use <picture> more for art-direction where the alternate image has been re-arranged in some way. For example one time I have used it is on an advertising banner, where I swapped the banner for a different version, with a different aspect, where the design was more suitable for a smaller screen.

Stribor45 2018-01-23 02:40:55 UTC #7

I imagine I cant test this piece of code unless I use actually use device with retina display

Stribor45 2018-01-23 02:54:19 UTC #8

What I was hoping to do is show my image (32x32) in other displays and 64x64 on retina displays.

My original image was 64x64 and I made 32x32 version so my idea was to show something like this

<img src="my32x32image.png" width="32" height="32" /> <!-- if regular display -->
<img src="my64x64image.png" width="32" height=32" /> <!-- if retina display -->

<picture><img src="my32x32image.png" srcset="my32x32image.png 1x, my64x64image.png 2x"/></picture>

When I load the page on my iPhone I can see that it loads 64x64 image (it is very crisp comparing to other images located right next to it which are all 32x32) but what i am confused is why is 64x64 is same size as the image right next to it which is 32x32?

TechnoBear 2018-01-23 09:40:13 UTC #9

You have specified the width and height of both images at 32 px each in the HTML. Unless you override this in the CSS, the images will both display at that size.

Stribor45 2018-01-23 16:17:24 UTC #10

<picture><img src="my32x32image.png" srcset="my32x32image.png 1x, my64x64image.png 2x"/></picture>

Above is the only code I have

PaulOB 2018-01-23 17:37:54 UTC #11

I'll try once again

I gave you the correct code in my post but you still are not using it. Get rid of the picture element as that was not in the code I posted and is a whole different kettle of fish.

You just need this

<img src="my32x32image.png" srcset="my64x64image.png 2x">

Although it would be better if you also included the width and height attributes so the browser can allocate the space (e.g. width="32" height="32").

The 2x at the end of the srcset tells the browsers that this is a retina image and displays it at half its native size because it maps it pixel to pixel on the double density. With a normal image it stretches a pixel to cover two pixels and that's why normal images are blurry on retina.

More info here and elsewhere

SamA74 2018-01-23 18:04:08 UTC #12

You can use the device emulation modes in Chrome's dev tools. Though that won't display double density on a normal monitor, so you probably won't see any difference whether the code is working or not.
One workaround for this is to temporarily swap the images for versions with a distinct visible difference other than their resolution.

system 2018-04-25 01:04:19 UTC #13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

ThemesPodcastArticlesPremium