GratefulAlive

Verified on various sizes of iPhones and iPads: Works perfectly, as expected thanks to dsonesuk! Now I can make my alternate images considerably "lighter" since "retina quality" isn't required, even on small retina screens, and this modification will make them snappy loading. (I tried using Samsung, and the ubiquitous Chinese Oppo etc phones too, but could not master the weird keyboards!)

Thank you, you are spot-on! The Author of the blazy script wrote... I've put alternative small images on my test site, so now I'll pedal off to find an iPhone in a mall to check Many thanks dsonesuk: Listening to Norwegian, Kirsten Flagstad right now... HenryPurcell's Dido and Aeneas: When I Am Laid In Earth.

One further query, if I may, I now have the loader.gif displaying nicely as expected, using your suggested code. But what does this code do? var bLazy = new Blazy({ breakpoints: [{ width: 420 // Max-width , src: 'data-src-small' }] When I reduce the viewport below 420px I see the same image made smaller, as expected, BUT when I swap the html line data-src-small="/img/different.jpg to another image in the same container, I only see the original data-src="/img/original.jpg So the js line , src: 'data-src-small' Doesn't appear to do anything on my test. Doubtless I've missed something. NB. I should mention; I had to remove the on-page style } .w3-third {width: 100% !important;} To get the full template to display properly. I assume you added that style merely to ensure your trial page displayed.

Thank you Sir! I copied your sample code as is, and then adjusted the image and js locations to suit my server... and it functions perfectly. I'm sure your responses will help many others who come along here in future. With much respect and gratitude.

What I like about the w3 Template is that the image is small in the side column, but on smaller viewports shifts to the centre column and become MUCH larger... retina quality without fussing over retinax2 formats of my images. It's just the loader being enormous too! I'm fiddling whilst waiting for some kid expert to respond, but so far all my fumbles have failed. I think the BBC site uses a form of blazy.js it functions well. I could delete the loader image call, but that's admitting failure, and we just don't quit, do we?

Thank you Inglome for taking the trouble to respond, much appreciated I'll follow your lead and make my own icons, weird browsers can find their own way. Loading all that FA library just for two teenie weenie icons is a mug's-game. Now I wonder if anybody has answered my other thread about delaying image loading using blazy.js?

So everybody loads the whole library even when they use only a couple of icons? Am I the only one who likes lean code and fast-loading?

I'm using blazy.js to delay loading images below the DOM. Whilst images are scrolled into the viewport it displays an animated gif, which is replaced by the desired image once loaded. The images are in the right column of the W3schools website template using this html: <div class="w3-row w3-padding-64"> <div class="w3-twothird w3-container"> <h1 class="w3-text-teal">Header Text</h1> <p>Main Text</p> </div> <div class="w3-third w3-container"> <p class="w3-border w3-padding-large w3-padding-32 w3-center"><img class="b-lazy" src=/img/loading.gif; data-src="/img/bigimage.jpg" alt="Picture" style="width: 100%;"></p></p> </div> </div> The script is from here: http://dinbror.dk/blazy/ The js script functions well, on the W3Template, but the loading.gif is displayed gigantic to fill the container width. (Same in FF and safari browsers.) (When I tried the Author's base64 method below; no loader displays at all on the template, then the bigimage shows up.) <img class="b-lazy" src=data:image gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="/img/image.jpg" alt="alt-text" /> The animated loading.gif is only 43px wide and 15px high, but because of the style="width:100%" it fills and expands with the container. How can I adjust the code so the loading.gif displays as 43px by 15px, but when the data-src image has loaded it displays to fill the container? In other words, how can I prevent the style="width: 100%;" applying to the animated gif?

Thank you very much for providing W3.css and the example template starters for us all. Very well thought out. The template I'm working on is here: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_webpage&stacked=h It calls fontawesome.4.7.0/font-awesome-min.css so I've downloaded fa from their web site to run on my server. And fontawesome-min.css calls the following fa files: @font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') The site I'm developing will only require the two basic icons on the W3example I cited, no more. So can I safely delete the rest, in fontawesome-webfont.svg and the other filesin the fa font folder, and just retain the code for those two? Which of these are essential to operate your example template? fontawesome-webfont.eot fontawesome-webfont.ttf fontawesome-webfont.woff fontawesome-webfont.woff2 FontAwesome.otf Thank you