Source tag

#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?

#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.

#3

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

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

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

#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>
#5

I already gave you that in my post!

The 2x on the end means double density displays.

#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.

#7

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

#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?

#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.

#10 

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

Above is the only code I have

#11

I'll try once again :slight_smile:

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 :slight_smile:

#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.

#13

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