I am trying to change/art direct an image based on device and screen sizes — not just change the resolution of the image.
I am using the <picture> element, and it is working fine when I resize browsers on my desktop, but is not working on mobile devices.
The code currently reads:
<picture>
<source media="(min-width: 950px)" srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home.png">
<img src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”>
</picture>
I understand that <picture> is not supported on all platforms, so I also tried srcset, as follows:
<img srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png 500w,
http://phillipsperfections.com/images/PhillipsPerfections_Home.png 950w"
sizes="100vw”
src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”>
I want the image to always be 100% width, and to switch to a different image when viewing below 950px.
I am referencing code from here http://alistapart.com/article/using-responsive-images-now#section3, but am I missing something? Can someone point me in the right direction?
My working site is http://phillipsperfections.com/. You should be able to view source for all of the code.
Thanks so much!
Because the two versions contain different visual content, you are indeed “art-directing”, and should use the <picture> element (and not srcset) to switch between the two versions of your image.
(If the two versions were identical, scaled-up-and-down versions of each other, srcset would be the way to go).
Your <picture> markup looks correct; what mobile browser are you not seeing the expected version in? <picture> support is actually pretty good these days; here’s a current support matrix.
If you need the art direction to work in older browsers, you’ll need to use Picturefill — and inspecting your site, it looks like you are! But with some extra quotes which are preventing the script from loading:
<script src="“http://phillipsperfections.com/js/picturefill.js"" async=""></script>
If you change that to:
<script src="http://phillipsperfections.com/js/picturefill.js" async></script>
Do you see the desired behavior in the mobile browser that wasn’t showing it to you before?
Related
What the specification says about cases when the same path (or probably the same sized images) appear with different pixel density descriptors?
The following example renders differently in desktop (Windows) Firefox 82.0b2 and Chrome 85.0.4183.121. The image appears natively scaled in FF and half the size in Chrome
<html><head></head>
<body>
<img src="testpicture.jpg" srcset="testpicture.jpg 2x">
</body>
</html>
The reason I'm asking is because a commercial CMS I use very often uses such output. In order to encourage them to avoid this I need a clarification. In this CMS the rendered content works mostly properly in FF, but in Chrome the rendering is sometimes unexpectedly scaled or some image content not appears at all (probably relating to cache availability of different sizes).
Update: This is very likely a chromium issue when the browser due to internal logic related to caching chooses a wrong variant. But until it finally fixed, I'd rather not post my own answer
The srcset attribute is a feature that enable responsive images. Specifically srcset gives the browser a hint what resolution images are available. In your case there is only on definition which hints at one image (testpicture.jpg) which has double (2x) resolution. But since there is only one definition, the srcset attribute won't do nothing and could be omited.
A full example would look like this:
<img src="/files/16864/clock-demo-200px.png"
alt="Clock"
srcset="/files/16864/clock-demo-200px.png 200w,
/files/16797/clock-demo-400px.png 400w"
sizes="(max-width: 600px) 200px, 50vw">
Check out the MDN documentation for the image element and their guide on responsive image for further details.
I like markdown. I use it in combination with Template Toolkit, and basically I don't have to write any html. My webpages are static, having only the js snippet that Google analytics uses. I would mostly like to keep it that way. I have zero javascript experience.
I can do some degree of simple page layout using a handful of classes applied to DIVs.
So this
<DIV class=picr3>
![Shelterbelt-12][2]
Planting a shelterbelt, or any tree project...
***
</DIV>
[2]: /Images/Shelterbelt/Shelterbelt-12.jpg
is all the html I need to use to have an image sized to width 30% of the Content div floated to the right. The system isn't perfect, but it resizes reasonably well, and since the page is static it caches well, and is fast to deliver.
More important to me: I can spend time writing content, and very little tweaking layout.
The problem: If I serve an nice desktop image to a mobile phone, download times are high. If I serve an image of reduced resolution to make phone access quick, it looks like crap on a desktop.
In Html we now have the element, combined with the srcset and size attributes. This turns what used to be a simple img tag into this:
<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>
At this point, I'm looking at having to roll my own solution much along this line:
Replace <DIV> with <div> On my implementation of Markdown, being between lower case tags means that the content of that tag is not Markdown processed.
Come up with a standard naming convention, say whateverimage-L.jpg for the large version, -M.jpg for the medium version and -S. jpg for the small version.
Pre process the resulting markdown files to generate the full element from the embedded markdown. I think this is within my limited perl programming capabilities.
Gotchas?
This wheel has been invented already?
Better ways to approach this? Should I bite the bullet and do this with a javascript snippet?
Some other solution I've missing in my wandering of 'a maze of twisty passages, all different' that is the internet?
Note to moderators: This may be a better fit for webmasters.SE. Seemed it was more program-y. If you feel it should be over there, please move it.
this is the link to my website: http://oanceacezarfotograf.com
I have an issue when displaying images on iOS devices. When on every other device there is no problem at all, when accessing my site from any iOS device (have tried with my iPhone 6 and a friends iPhone 6) no images at all on the website will be shown.
The website is coded just in HTML so all the code is out there. I have already tried the solution shown in this post:
2017 Answer to "How to make background image fixed on iPhone6"
But then everything just screws up, as shown on http://oanceacezarfotograf.com/test.
I have no idea at all how to solve this or what causes the problem. Any help would be much appreciated.
Thank you.
iOS (and several other browsers) does not support webP image format: https://caniuse.com/#feat=webp
Either use supported image formats like jpg or use the picture tag to support both:
<picture>
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>
Source: https://css-tricks.com/using-webp-images/
Side note: Also consider downscaling the images, they are huge (6000x4000px) and take a while to load even at a higher speed connection.
I am using the picture element in HTML like so:
<picture>
<source media="(max-width: 375px)"
srcset="http://mysite/-/media/Images/picture.ashx?mw=375">
<source media="(max-width: 800px)"
srcset="http://mysite/-/media/Images/picture.ashx?mw=800">
<img src="http://mysite/-/media/Images/picture.ashx"
alt="responsive image that doesn’t break your layout">
</picture>
I am using a CMS to handle media, thus the .ashx extension. My CMS supports dynamically resizing images by appending a mw=X query string to call out max-width. My default mage is a .png with width of 1280px.
This appears to work great in Chrome 46.x. When I resize my viewport, the image shrinks appropriately to the various sizes.
What I'm confused on, is when I inspect network traffic (with both chrome and fiddler), I'm seeing my image downloaded twice. I've used chrome to set my viewport to an iPhone 6s and performed a "Empty cache and hard reload". What I see in fiddler is picture.ashx?mw=800 downloaded and then picture.ashx immediately following.
Screen shot from Chrome's network traffic:
Why is my browser downloading the image twice?
I found the problem. When using device mode in Chrome, the image is downloaded twice. If I just resize the browser window to a smaller size, it is not downloaded twice. I think this is just a bug in the Device Viewport.
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" />