Affichage de la rétine et de la non-rétine sur les appareils correspondants comme ceci :
Fonctionne. Mais Google Pagespeed Insight indique qu'il ne peut pas rendre cela tant que le CSS n'est pas chargé, et nous en subissons une pénalité. Seulement en vue mobile, cependant - c'est le seul cas où Pagespeed Insights rend des images Retina de toute façon.
Notre fichier CSS complet se trouve dans le pied de page, car nous avons le CSS critique au-dessus-du-pli en ligne dans l'en-tête.
Ce code, cependant, fonctionne sans aucune plainte de Pagespeed Insights
Que manque-t-il ? Y a-t-il une dépendance que le navigateur doit lire les règles de style avant de savoir quelle source/srcset-image prendre ?
Cas de test :
Voici une page de test pour cela : http://pagespeed-srcset-nopicturefill.slople.com/ ... et voici ses résultats : https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpagespeed-srcset-nopicturefill.slople.com%2F&tab=mobile