Everything is working good in both Chrome and Firefox, yet I was dismayed to see that Microsoft Edge was showing small thumbnails instead of the proper size images. In fact one image is not even shown as a thumbnail. Not sure if it is the srcset code or Fancybox or even something else, causing the behavior. Any ideas as to what I need to do? Images on second half of this page: https://mrpitbull.com
data-srcset="dog-pictures/blue-remyline1920.jpg 1920w, dog-pictures/blue-remyline1366.jpg 1366w, dog-pictures/blue-remyline940.jpg 940w, dog-pictures/blue-remyline640.jpg 640w" title="CLICK TO ENLARGE" data-fancybox data-caption="Imagine coming home and being greeted like this everyday!"
img data-src="dog-pictures/blue-remyline940.jpg" alt="unbelievable remyline pitbull" width="940" height="529" class="lazyload" />
This code shows a picture as it should in all browsers, however the srcset function does not work, as near as I can tell. I pasted this code into the page using all of the same css and scripts. So, the problem would appear to be in the html code.
<a href="dog-pictures/blue-remyline1920.jpg" title="CLICK TO ENLARGE" data-sizes="auto" data-srcset="dog-pictures/blue-remyline1920.jpg 1920w, dog-pictures/blue-remyline1366.jpg 1366w, dog-pictures/blue-remyline940.jpg 940w, dog-pictures/blue-remyline640.jpg 640w" data-fancybox data-caption="Imagine coming home and being greeted like this everyday!">
<img data-src="dog-pictures/blue-remyline940.jpg" alt="unbelievable remyline pitbull" width="940" height="529" class="lazyload" /></a>
While I was waiting, I decided to roll back to my previous code, which is the one you are currently seeing. Until I can figure out how to code so that everything works, I am going to live with srcset not functioning. I am hoping somebody is familiar with what I am experiencing and has a solution.
Now, I have loaded three different codes, you will note with the first 3 pictures. The first is the one that is only showing a thumbnail in Edge. However it is the only one of the 3 that the srcset function is actually working (as seen in Firefox or Chrome). I increased the width size of the page (larger contain area allows for larger image to auto load) so that after the page is refreshed, the larger image is loaded, where the other images on the page continue to load the smaller default image size, indicating that the srcset function is not working. I thought I was all set, until discovering the something was terribly amiss with Edge.
The second image on the page is using the code from the example you provided. Fancybox works, yet the srcset is unresponsive. I purposely left my new mouseover icon off, so as to differentiate between the other two I have been working with.
The third image is my first code and works the same as the demo code above it. It is hard to tell if the srcset is working because of the size of the images I am using, and the size of the containing area. I suspected that it wasn’t working and only confirmed, after increasing my page width, which allowed for the browser to choose the next biggest size.
I think the problem in edge is that the image has no width because you have set it to auto and because its lazy loaded it doesn’t trigger whatever observes the srcset image requirements.
As a quick test I added the following code:
Now when you load in Edge the images do use the appropriate width image but are scaled to 100% at the same time. Note that some browsers do not apply srcset image on resize but only on refresh so when you resize in edge you get the same image shrinking/growing unless you click refresh.
To be honest I find srcset more pain than its worth and you inflict on a contiual window grabber like me multiple images loads when one would have done.
I would probably have used one large image, optimised it to a smaller file size than your small image anyway :).
If you find the that the width:100% works for you then you would probably need to also use media queries to limit the image width if you didn’t want it to be 100%. However, I would personally prefer the look of a 100% width image and not have gaps when the image reaches its maximum native size.
It worked exactly as you indicated. So I am thrilled. Thank you.
Based on what you related, I wonder if I should leave it with the 100% in the css or if I should get rid on the auto size in the html, and define media queries? I saw code with that, yet I did not know the formula to determine what to choose for my particular sizes.
This morning I removed the auto size out of the html and removed the width:100% from the css. And everything seems to be working. Later today I am going to watermark some images to see if the srcset function is working.
I will then experiment with the media query you provided. Thanks again.
Remember to clear the cache each time as browsers may use the larger image if it is cached already. Also on resize some browsers will only load the next image in sequence if refreshed.
Lastly if you start wide and close the window smaller then once again some browsers will not load the smaller image when you get smaller because they have loaded the better quality image already. Browsers are allowed to make the best choice hence the differences.
You should update the original post with this information so people do not waste time using old information. Either keep the original post current in some way (perhaps with an update) or say something so people do not waste time.
I learned (and confirmed) a lot after watermarking the sizes on the images. The top picture resized perfectly going both up and down, selecting the proper srcset image. With Firefox (however I have it set up) I could resize the browser like an accordion and the top image cycled through the sizes without having to refresh. The bottom image, remained the same, indicating that the code used was faulty, although worked good with fancybox.
I learned too that the size of the containing element has nothing to do with the size srcset chose. The size chose was based on the entire browser window width (realize this is not a revelation to most). Now, I have to rethink the sizes of the images I have chosen to use.
Code that works:
data-srcset="puppy-pictures/razors-edge-puppies-for-sale1920.jpg 1920w, puppy-pictures/razors-edge-puppies-for-sale1366.jpg 1366w, puppy-pictures/razors-edge-puppies-for-sale940.jpg 940w, puppy-pictures/razors-edge-puppies-for-sale640.jpg 640w" title="CLICK TO ENLARGE" data-fancybox data-caption="I am always excited when I find a Brindle puppy like this one in a litter."
data-src="puppy-pictures/razors-edge-puppies-for-sale940.jpg" alt="Beautiful Brindle Pit Puppy" width="940" height="529" class="lazyload" />
For problems such as this the first thing to do is to check the documentation. I was not familiar with the data-* attributes but I found data-* - SVG: Scalable Vector Graphics | MDN. So then I knew that you were using something customized so then I undersood what you mean by Fancybox. So then I searched for “Fancybox microsoft” and found the following: