I've been trying to implement the new srcset approach to responsive images, using the following HTML
<img class="swapImages"
srcset="assets/images/content/large.jpg 1200w,
assets/images/content/medium.jpg 800w,
assets/images/content/small.jpg 400w"
sizes="100vw"
src="assets/images/content/small.jpg"
alt="responsive image">
Im using chrome 40 and all I get is the largest image, resizing my browser, clearing the cache does nothing.
I read somewhere I had to polyfill, so I used the picturefill plugin, although chrome should support it.....still doesn't work.
I put together a demo page for it:
http://www.darrencousins.com/lab/resp-img-srcset/
What am I doing wrong/not getting?
Any help is massively appreciated.
You have it correct.
The thing is, that once your browser has the higher resolution picture (loaded, in cache), there is no point for it to download lower quality one, even when you make your window smaller (the point of this is to save traffic).
So if you want to test this, just make your window smaller and THEN load the page (after clearing the cache / or use incognito mode). You will get the mobile or tablet version. Then by making the window bigger, you'll at some point see your browser switching to higher resolution picture.
Update 2022; Simply use Ctrl + Shift + R shortcut (for Mac: Cmd + Shift + R) after resize, instead of clearing cache, so that the browser will reload, and ignore cache for current tab till done (In other words, full-reload without losing entire cache).
When used in an img tag, the srcset attribute leaves the decisions up to the browser in terms of which image to load as mentioned by TondaCZE. If you want to force browsers to load images at specified viewports, you want to use the picture element.
<picture>
<source srcset="large.jpg" media="(min-width: 1200px)" />
<source srcset="medium.jpg" media="(min-width: 800px)" />
<img src="small.jpg" />
</picture>
I have just noticed that your demo page (http://www.darrencousins.com/lab/resp-img-srcset/) was never displaying the mobile version (even when resizing the browser or using the DevTools - Device mode) on Google Chrome (version 48).
Changing the device pixel ratio to 1 seems to load the correct image.
I don't know why, I am wondering if the w descriptors take the device pixels ratio into consideration
We faced the same issue while working with srcsets for the first time in our project. After investing some time, one of our team members was finally able to crack the issue.
The reason why your code doesn't work is because of the mismatch of the sizes in srcset and sizes attribute. You have to provide double the width in the srcset for the browser to be able to match it with the width in sizes.
For example,
<img
srcSet="image1920w.png 1920w,image720w.png 720w"
sizes="(min-width: 960px) 960px,
360px"
src="www.image1920w.com"
alt="Sample"
/>
Here's a sample working code for you to try out.
Make sure you open it in incognito (since once the browser loads higher resolution image, it will not go back lower resolution image) and run the code first in browser size less than 1920px to see the smaller resolution image(sunset) and once you start increasing the browser size, you will be able to see the larger image (flower).
I guess you are testing on chrome browser, and the only reason its not working there is because its a chrome feature. See below stack overflow thread (it holds good for latest version of chrome v54 as well):
Google Chrome version 40 srcset attribute problems
Checked your page on IE8 and Firefoxv49 and things work like a charm!
The other thing I observed is that though chrome doesn't download other images, it resizes the one downloaded pretty well. So, in a way we are still in a much better condition had it only been this on page:
<img srcset="assets/images/content/large.jpg 1200w" alt="large image">
For anyone using Chrome DevTools sidebar, you can tell Chrome to disable the cache when DevTools is open. Changing your viewport and refreshing will then serve the correct responsive image if it's giving you the largest (cached) image all the time.
Open DevTools (F12)
Go to Settings
Scroll down to Network
Check Disable cache (while DevTools is open)
Have you tried to change DPR to 1.0? You can find it in the top bar of Chrome DevTools in responsive mode (try 380px width). After changing DPR, right-click on the reload page icon, then select "Empty cache and hard reload" best to do that in incognito mode. The browser should preload a 400w image.
It's work based on device pixel ratio (DPR). For example, say we have a device that has a viewport width of 412 px and a DPR of 2.6. So the browser chooses an image close to 803 px (412 _ .75 _ 2.6).
If You want to choose the image based on the viewport only, try using media attribute like this:
<amp-img
alt="grey cat"
media="(max-width: 469px)"
width="226"
height="340"
src="/static/inline-examples/images/cat-small.jpg">
</amp-img>
<amp-img
alt="grey cat"
media="(min-width: 470px) and (max-width: 669px)"
width="450"
height="340"
src="/static/inline-examples/images/cat-medium.jpg">
</amp-img>
<amp-img
alt="grey cat"
media="(min-width: 670px)"
width="650"
height="340"
src="/static/inline-examples/images/cat-large.jpg">
</amp-img>
In my case, the problem was a space in the webp image name. I renamed the file to remove the space character, and it worked!
<picture>
<source srcset="img/landing-small.webp" type="image/webp">
<source srcset="img/landing - small.jpg" type="image/jpeg">
<img src="img/landing - small.jpg" alt=""/>
</picture>
Open your development tool, then go to network tab and disable catch. That's all, nothing else.
Related
Using the following code to serve up responsive & optimized images.
<picture>
<source type="image/webp"
sizes="(max-width: 793px) 100vw, 793px"
srcset="
https://www.example.com/img3/santa-cam-2020,w_200.webp 200w,
https://www.example.com/img3/santa-cam-2020,w_354.webp 354w,
https://www.example.com/img3/santa-cam-2020,w_475.webp 475w,
https://www.example.com/img3/santa-cam-2020,w_581.webp 581w,
https://www.example.com/img3/santa-cam-2020,w_793.webp 793w"
>
<source type="image/jpg"
sizes="(max-width: 793px) 100vw, 793px"
srcset="
https://www.example.com/img3/santa-cam-2020,w_200.jpg 200w,
https://www.example.com/img3/santa-cam-2020,w_354.jpg 354w,
https://www.example.com/img3/santa-cam-2020,w_475.jpg 475w,
https://www.example.com/img3/santa-cam-2020,w_581.jpg 581w,
https://www.example.com/img3/santa-cam-2020,w_793.jpg 793w"
>
<img src="https://www.example.com/img3/santa-cam-2020,w_793.jpg" alt="" >
</picture>
The code works; is based upon the following resources; and, appears uncontroversial (?):
Mozilla: Responsive images
web.dev: Serve responsive images
GPSI (mobile test)/Lighthouse though say that code is not serving up properly sized images. See screenshot.
++++++++++++
Lighthouse / GPSI Screenshot:
++++++++++++
I have played with the "sizes=" (orginally provided by Cloudinary when it provided the img files) but to no avail.
I have removed srcset lines (starting from the largest file width, 793w). The GPSI mobile warning disappears if the last 2 lines are removed.
Also removed the .webp section (jic ;-)
I can confirm that the appropriately sized images are loaded with different screen resolutions. I tested this using Chrome DevTools. However, one has to do a hard clear on the browser cache first.
I get the same "Properly size images" issue running Lighthouse in incognito mode.
What am I missing or is there an issue with GPSI/Lighthouse?
Unsurprisingly, the problem is not with Lighthouse/GPSI.
I changed this line of code:
sizes="(max-width: 793px) 100vw, 793px"
To this:
sizes="50vw"
The proper image is still served up (confirmed in DevTools) and there is no longer a GPSI/Lighthouse warning.
So much for what I thought I knew about serving responsive images!
After reading all day about one method or the other I am still not sure what is the best for me, all sites explain the same thing but when I want to know the things that really worries me, nobody talks about that.
My case: I have almost all my images using width 100% and height to auto, and the image containers had dynamic size, for example 30vw, or 40%, etc. (not sure if in this case I still need to set height and width values in the img tag)
What I need to use if I want to provide different sizes for my images and webp format as well and leave the decision to the browser what to choose?
Can I provide webp image without picture and source tag?
Can I use the picture method and still let the browser choose what image shown?
Not sure either why we need to choose the fallback with simple img src for the smallest image, in that case if someone enter with IE and a big screen then the image will be always pixeled. In those cases I'd prefer make some users wait a little longer than provide them with a low resolution image.
Also.. having a low resolution image with the fallback option, not sure how influences in the individual image seo ranking.
Your description looks like a common use case for responsive images. If you have for example an image that is shown at 50% width on large screens and at 100% width on viewports smaller than 900px, your HTML could look like this:
<picture>
<source
type="image/webp"
sizes="(min-width: 900px) 50vw, 100vw"
srcset="image-500.webp 500w, image-1000.webp 1000w, image-1500.webp 1500w"
>
<img
sizes="(min-width: 900px) 50vw, 100vw"
srcset="image-500.jpg 500w, image-1000.jpg 1000w, image-1500.jpg 1500w"
src="image-1000.jpg"
>
</picture>
This way browsers that support <picture> and webp images select one of the image-*.webp files, browsers that support srcset and sizes select one of the image-*.jpg files and all other browsers show the image-1000.jpg.
The most important part with this technique is to specify the sizes attribute correctly so browsers can make good decisions which image to load. You can find more information about it here: https://ericportis.com/posts/2014/srcset-sizes/
The image you want to display on “old” browsers can be freely selected via the src attribute. Or you “polyfill” the feature via JavaScript with tools like Picturefill or respimage.
You can omit the <picture> and <source> elements and do the type switch on the server side via HTTPs Accept header as an alternative.
We have been using the uCKEditor plugin for umbraco for a few months now. We also installed a plugin for it called Image Maps.
Recently, one of our content editors noticed a sharp drop in performance while editing some pages. After testing it for a while I noticed that removing all image maps from the source completely solved the performance problem, the editor was responsive lightning fast again.
An example of an imagemap added by the plugin:
<img src="image.jpg" usemap="#imgmap20156281337" />
<map id="imgmap20156281337" name="imgmap20156281337">
<area coords="75,74,183,206" href="http://www.example.com" shape="rect"/>
<area coords="408,169,533,368" href="http://www.example.com" shape="rect" />
</map>
In reality, the plugin simply adds a few lines of HTML to the image, so I couldn't understand why it would affect performance so severely.
Therefore, I decided to check where the breakpoint would be for adding imagemaps. In a page with 5 images, I started adding imagemaps to those images via the plugin.
The first imagemap showed no performance drop. After the second image map, a slight delay started to manifest with every user action. Every imagemap afterwards made the delay progressively worse to the point where at 5 images with 5 imagemaps, the editor takes over 4-5sec to just move the cursor 1 character distance left/right. This is what my content editor colleague experienced.
I tried adding the imagemaps manually(without the plugin) and I noticed that we still get the performance issues. However, the editor seems to run fine in <>Source view, but as soon as we switch back to default the performance drops dramatically. It seems that the editor is having problems rendering the imagemaps on top of the images.
What is causing this horrible performance when working with multiple image maps in the same editor?
Is there anything we can do about it?
I discovered what was causing the problem!
While communicating with the creator of the imagemaps plugin, he referred me to his test page: http://www.martinezdelizarrondo.com/ckplugins/imagemaps.demo4/
When we are working locally in uCKEditor and we insert an image from the media picker, the image gets inserted using a relative local path like:
src="/media/1370030/4483_a.jpg"
Then I tried to paste the same html to the remote test page, and naturally, I had to include the full domain path to the image:
src="http://www.dphtrading.dk/media/1370030/4483_a.jpg"
The first thing I noticed was that locally, uCKEditor draws borders on the lines specified in the imagemaps for a specific image. I took a screenshot to illustrate:
http://imgur.com/dUJMzWn
While on the remote test server, there were no borders and no performance problems. So I inserted the full domain path for the images into our uCKEditor and this solved the performance problems (and removed the imagemap borders for some reason).
It looks like uCKEditor and probably CKEditor in general doesn't like the combination of relative file paths and imagemaps for the same image.
Very large images will not render in Google Chrome (although the scrollbars will still behave as if the image is present). The same images will often render just fine in other browsers.
Here are two sample images. If you're using Google Chrome, you won't see the long red bar:
Short Blue
http://i.stack.imgur.com/ApGfg.png
Long Red
http://i.stack.imgur.com/J2eRf.png
As you can see, the browser thinks the longer image is there, but it simply doesn't render. The image format doesn't seem to matter either: I've tried both PNGs and JPEGs. I've also tested this on two different machines running different operating systems (Windows and OSX). This is obviously a bug, but can anyone think of a workaround that would force Chrome to render large images?
Not that anyone cares or is even looking at this post, but I did find an odd workaround. The problem seems to be with the way Chrome handles zooming. If you set the zoom property to 98.6% and lower or 102.6% and higher, the image will render (setting the zoom property to any value between 98.6% and 102.6% will cause the rendering to fail). Note that the zoom property is not officially defined in CSS, so some browsers may ignore it (which is a good thing in this case since this is a browser-specific hack). As long as you don't mind the image being resized slightly, I suppose this may be the best fix.
In short, the following code produces the desired result, as shown here:
<img style="zoom:98.6%" src="http://i.stack.imgur.com/J2eRf.png">
Update:
Actually, this is a good opportunity to kill two birds with one stone. As screens move to higher resolutions (e.g. the Apple Retina display), web developers will want to start serving up images that are twice as large and then scaling them down by 50%, as suggested here. So, instead of using the zoom property as suggested above, you could simply double the size of the image and render it at half the size:
<img style="width:50%;height:50%;" src="http://i.stack.imgur.com/J2eRf.png">
Not only will this solve your rendering problem in Chrome, but it will make the image look nice and crisp on the next generation of high-resolution displays.
I am having some weird issues. I have a large image which is being shrunk to size 30px in the img link so:
img src="/company/images/logos/1.png" height="30px"
On all browsers and computers it looks fine except for firefox on a windows. I found out that when i rid the height constraint it looks fine but when i add the "30px" it looks messed up.
Any ideas on what i might need to do?
I'm guessing you're talking about issue where the default Firefox image resizing algorithm makes the image look "jagged".
In general, it's better to not let the browser resize the image.
You should instead make a version of the image that is already the correct size.
I'm not aware of a way to make the image look good when downscaling in Firefox.
See here for a comparison. (I used Firefox 3.6.15 / Windows 7)
If anybody has a way to make the first image downscale smoothly in Firefox, I'd like to know.