This question has already been answered:

In an attempt to increase the figures for Google speed, he followed his recommendations and changed all the images on the site to webp format. Of course, without the back thought of cross-browser compatibility. Now Mozilla, Safari and IE cannot display images. Photos were uploaded and displayed both through the style sheet and through the admin part (Joomla).

Perhaps someone can help in the implementation of the following function. Determine the browser from which the visitor came (I know that it is not a safe option, but does not fit anything else) and globally change all the images on the site from webp to png. All duplicate images will be in advance in the same directories.

Perhaps the idea is crazy, but how can this be realized yet?

UPD Picturefill.js library will not work, as it does not affect the images inserted through the css background property.

Reported as a duplicate by LFC participants, freim , aleksandr barakin , 0xdb , Andrew NOP on Feb 8 at 6:29 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • @AlexanderSemikashev no, this library does not apply to images inserted via css - Vlad Yudkin
  • For css, we use Modernizr and then in css we can do it like this - Alexander Semikashev February
  • .no-webp .logo {background-image: url (logo.png); } .webp .logo {background-image: url (logo.webp); } - Alexander Semikashev February
  • BUT the browser will load both images, which is not good. - Alexander Semikashev
  • @AlexanderSemikashev know about this option, but it really is not good. I try to find media queries for different browsers. Found for Mozilla, but for IE I can not find such a solution. Safari is also needed. - Vlad Yudkin

1 answer 1

While I was looking for an answer, Mozilla released an update and now this browser, like Opera, Chrome supports webp format. Nevertheless, the problem with Safari, Edge is not much in a hurry to solve. For myself, I solved the issue of detecting the browser Edge, Safari and inserting code into the body tag. Further for them there are separate styles.

Here is the browser detection code (not the best option, and the code is partially only mine)

//safari css hack var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && navigator.userAgent.indexOf('CriOS') == -1 && navigator.userAgent.indexOf('FxiOS') == -1; if(isSafari == true){ var saf = document.getElementById("site-body"); saf.classList.add('img-of-future'); } // Get IE or Edge browser version var version = detectIE(); if (version >= 12) { console.log(document.innerHTML = 'Edge ' + version); var saf = document.getElementById("site-body"); saf.classList.add('img-of-future'); } /** * detect IE * returns version of IE or false, if browser is not Internet Explorer */ function detectIE() { var ua = window.navigator.userAgent; var edge = ua.indexOf('Edge/'); if (edge > 0) { // Edge (IE 12+) => return version number return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10); } }

  • Well, you understand that a person can go to the site from the old version of the browser? - Alexander Semikashev
  • Yes, of course. This is far from an ideal solution, but for those who "really need" should come up, as it was with me. - Vlad Yudkin