Well, I got the first 1/2 done. Have to go to bed now. Chow. http://bold-salad-1879.bss.design/
There is also this error src="assets/img/BR1-NE.jpg" srcset="assets/img/BR1-NE.jpg 1024w, BR1-NE-sm.jpg 512w"
For some reason the BR1-NE-sm.jpg doesn't have the assests/img path to it.
Saj
I found that BR1-NE-sm.jpg does not exist in the assets directory. I had planned on removing BR1-NE.jpg anyway. So that is what happens.. Thanks.
I just tried to verify size loaded on my S4 Samsung phone, and the only way I could do it was to send myself the first Photo which is set up with srcset. What I found was a 1024x768 file was being used. Perhaps the browser on the Cell does not have srcset feature! Perhaps src needs to be after srcset?
Anyway, I tried to do shrink Firefox to cell size, clear the cache and reload with small images. Using FF inspector I an image pops up over src= which shows as 527x395. The srcset images don't do that popup thing. Don't know what this means, but when I view image info by rightclick all the images shown loaded are the big ones.
Perhaps I should try chrome. I'd like to get this working or at least know why it isnt.
Chrome has something in the inspect that is a "natural" size which does not look like the sizes I've made available. Can't determine which one was loaded.
Maybe which ever one that is selected is loaded through src?
This time using FF, I shrank the window way down and then pointed to the preview site and cleared the cache. With a relatively short Cache period of 1 min. I found that with the inspector open, when I hit redraw all the information in the inspector window was refreshing and the image I had inspected came up as SRC= assets/img/Kitchen-2.jpg with a pop up of 292x219.
The browser makes the decision based on the image you are wanting to use in the srcset and what fits in the screen or something, gotta read the sites I linked to get a better understanding of it.
The browser I believe is manipulating the DOM and not the HTML so you will only see in the dev tool (F12) what seems to be the src being used. Which is why as I described how I can tell it worked in Chrome was that I edited the images by putting text in the image of the width of the particular image. So for the 512w image I added the text in the image of 512 and for the 1024w image I added 1024. Then when I used the device tool on Chrome I can see the images swap when I refreshed the page. So unless you do that it's going to be hard to see that it worked.
This shows what browsers support the feature. http://caniuse.com/#search=srcset
Saj
Am I wrong in thinking that the srcset is stupposed to be used within <picture></picture> elements? According to what I've seen so far, I haven't found it used in any other circumstances other than various media types such as picture, video, audio. According to w3schools it would be used like this:
<picture>
<source media="(min-width: 650px)" srcset="img1.jpg">
<source media="(min-width: 465px)" srcset="img2.jpg">
<img src="img3.jpg" alt="Flowers" />
</picture>
Are there other ways of using this that aren't documented on this site?
Yeah with that support setup that Saj posted, you will definitely need a fallback for some browsers that don't support srcset yet.
It's used in both formats img and source.
"The srcset and sizes attributes on img (or source) elements allow authors to define various image resources and "hints" that assist a user agent to determine the most appropriate image source to display (e.g. high-resolution displays, small monitors, etc)."
http://caniuse.com/#search=srcset
If you do a search for Responsive Images you should get several sites all talking about both methods etc...
And I posted... 2 links to sites... that talk about it.... :)
Saj
That's what the default image is in the src attribute is for, which is usually the image that can be seen in all screen sizes, the bigger one :) which means those that don't support it will have to deal with a larger image.
Saj
Thanks Saj. then I am guessing that it is working.
Why not just defer those images and have them load immediately after the page has loaded? https://varvy.com/pagespeed/defer-images.html To do this we need to markup our images and add a small and extremely simple javascript. I will show the method I actually use for this site and others. It uses a base 64 image, but do not let that scare you.
Would this make the page load & display faster with the Carousel? There are about 30 images and more like 70 If we include the SMall ones. Just render the first image? and use to base64 as the dummy image for the slides behind? If this technique works well it could be used for the "Photo" Tab too, because that is not Seen one the first display of the page. It would also speed up first page display time tremendously.
The html
<img src="image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
The javascript
<script> function init() { var imgDefer = document.getElementsByTagName('img'); for (var i=0; i<imgDefer.length; i++) { if(imgDefer[i].getAttribute('data-src')) { imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src')); } } } window.onload = init; </script>
script> function init() { var imgDefer = document.getElementsByTagName('img'); for (var i=0; i<imgDefer.length; i++) { if(imgDefer[i].getAttribute('data-src')) { imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src')); } } } window.onload = init; </script>
Usage - For most pages you can simply put the script right before the end body tag in your html. As far as the images go you want to copy the code above (labeled "the html") and replace "your-image-here" with your actual image path.
FRom https://varvy.com/pagespeed/defer-images.html
Base64 images will not be indexed by google if that is important to you for image rankings.
Well, that's an interesting point, but then aren't they then replaced with the actual images by the javascript, which would be imaged? I it would nice to know the answer to that, is there a way to test it?