WebP и мобильная версия?

Question

[yadscreech]

В ообщем есть паралакс на сайте, нужно сделать чтобы на планшетах и ноутбуках картинки НЕКОТОРЫЕ НЕ ЗАГРУЖАЛИСЬ ВОВСЕ(и одна менялась на другую специальную под планшеты и моб.),, а не просто загружались и прятались с dis-none. Прошу помочь с реализацией, читал про <pictures>, но там уклон в ретину, ничего не понял.

Суть:
Если нормальный браузер и большой экран - то грузи все и webp.
Иначе: Если нормальный браузер и маленький экран- то грузи одну и webp.
Иначе: Если плохой браузер и большой экран - то грузи все и png.
Иначе: Если плохой браузер и маленький экран - то грузи одну jpg.

Comments

[Rustam Bainazarov]

WebP не поддерживается EDGE, IE, Safari и недавними версиями Firefox.

А в целом, media-запросы вам в помощь.

[yadscreech]

Рустам Байназаров, как при помощи медиа я могу узнать в каком я нахожусь браузере?
И вообще чем помогут медиа, даже если вы display: none пропишите еще и с !important, картинка все равно загрузится, но не покажется.

[Rustam Bainazarov]

yadscreech, в современных (и не очень) браузерах img и фоны с display: none; не грузятся. Посмотрите в инспекторе сетевых запросов.

[Rustam Bainazarov]

yadscreech, и да, вам нужно скрывать какие-то img в мобильной версии?

Answer 1

[Dima Polos]

Вам точно сюда: Канал на YouTube

Вот, прям инструкция: видео, начиная с 23 минуты +\-

Еще бонус: классный доклад.
Успехов!

Comments

[yadscreech]

Если честно от туда и пришел, но думал у кого-то тут есть готовый код, просто скопировал бы, но видимо придётся полностью погрузится и разобраться, в любом случае - спасибо.

[Dima Polos]

yadscreech, да, я когда решил все по красивому делать, то показалось, будто вообще разучился верстать) как в притче про сороконожку, но результат от такого подхода, я ощутил сразу, гугл спид тест показал 100/100, и аудит по лайтхаусу был почти по всем параметрам близким к 100.