Интересно только одно понять: Lighthouse требует webp и avif Если использовать везде

Question

Интересно только одно понять: Lighthouse требует webp и avif Если использовать везде

только webp - получается safari раньше 2022г. (т.е. большой процент) - отображать изображения вообще не будет, получается так наверное ?

#frontend #programming #russian

0

20.05.2023

16 ответов

21 просмотр

userconcept Concept Автор вопроса

Andrey Dremin
На всех моих коммерческих проектах иконки были png...

Ну я не спора ради, но на моих сайтах, уже лет 5 точно все иконки в svg )

0

20.05.2023

Evgeniy Beskrovnyy

Разберитесь с графикой в вебе, просмотрите какие-то базовые видео. Вы должны покрывать весь спектр браузеров с помощью разных форматов графики. Браузер, который поддерживает более новый формат, загрузит только его. Например, если ваше изображение в jpg формате, вы поставляете в браузеры следующий минимальный набор оптимизированных вашей системой сборки изображений: 1. jpg 1x 2. jpg 2x 3. webp 1x 4. webp 2x 5. avif 1x 6. avif 2x

0

20.05.2023

Катеринка

Andrey Dremin
На всех моих коммерческих проектах иконки были png...

Иконки пнг?🤔

0

20.05.2023

Andrey Dremin

Катеринка
Иконки пнг?🤔

Да)

0

20.05.2023

Andrey Dremin

Катеринка
Иконки пнг?🤔

0

20.05.2023

userconcept Concept Автор вопроса

Evgeniy Beskrovnyy
Разберитесь с графикой в вебе, просмотрите какие-т...

Я с вами полностью согласен, набор изображений приведенный в качестве примера отличный - но есть такие моменты: -) Это повышает требования к backend'у (здесь это не считаю аргументом, т.к. backend'ер должен грамотно уметь выполнять свои задачи, иначе пусть его задачи выполняет тот, кто умеет их выполнять грамотней и меньше ленится получать новые знания 🙂) -) Что в таком случае делать с изображениями background-image ? )

0

20.05.2023

Катеринка

Andrey Dremin

Свг же должны быть

0

20.05.2023

Andrey Dremin

Катеринка
Свг же должны быть

Да,они будут меняться на другие

0

20.05.2023

Evgeniy Beskrovnyy

userconcept Concept
Я с вами полностью согласен, набор изображений при...

тоже самое, определять поддержку через директиву @supports

0

20.05.2023

userconcept Concept Автор вопроса

Evgeniy Beskrovnyy
тоже самое, определять поддержку через директиву @...

Сейчас изучаю вопрос, везде почему-то рекомендуют использовать modernizr, на мой взгляд - тогда лучше уж jpeg'ом ограничиться, без webp 😀 А вы, если не секрет, как детектите поддержку браузером такого набора изображений, на каждое конкретное с помощью css supports ?

0

20.05.2023

Evgeniy Beskrovnyy

userconcept Concept
Сейчас изучаю вопрос, везде почему-то рекомендуют ...

Зачем привлекать js, если работает CSS?

0

20.05.2023

userconcept Concept Автор вопроса

Evgeniy Beskrovnyy
Зачем привлекать js, если работает CSS?

Да да, я о том-же, но к примеру такая конструкция как-то своеобразно выглядит, это причем без avif'а:

0

20.05.2023

userconcept Concept Автор вопроса

Evgeniy Beskrovnyy
Зачем привлекать js, если работает CSS?

Или как вы предлагаете через supports выбирать изображение из 6 вариантов ?

0

20.05.2023

Evgeniy Beskrovnyy

userconcept Concept
Или как вы предлагаете через supports выбирать изо...

Примерно так, но естественно автоматизировать SCSS-ом .bg { background-image:url(real-img-name.jpg); } @supports (background-image:-webkit-image-set(url(jopa.webp) 1x)) { .bg{ background-image:-webkit-image-set(url(real-img-name.webp) 1x) } } @supports (background-image:image-set(url(jopa.webp) 1x)) { .bg{ background-image:image-set(url(real-img-name.webp) 1x) } } @media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi) { .bg{ background-image:url(real-img-name@2x.jpg) } @supports (background-image:-webkit-image-set(url(jopa@2x.webp) 2x)) { .bg{ background-image:-webkit-image-set(url(real-img-name@2x.webp) 2x) } } @supports (background-image:image-set(url(jopa@2x.webp) 2x)) { .bg{ background-image:image-set(url(real-img-name@2x.webp) 2x) } } }

0

20.05.2023

userconcept Concept Автор вопроса

Evgeniy Beskrovnyy
Примерно так, но естественно автоматизировать SCSS...

Спасибо! Да, наверное из того, что можно придумать - действительно наиболее грамотное решение )

0

20.05.2023

Andrey Dremin · Accepted Answer

Andrey Dremin

На всех моих коммерческих проектах иконки были png так что мне кажется что ты зря паришься)

0

20.05.2023

169 похожих чатов

Интересно только одно понять: Lighthouse требует webp и avif Если использовать везде

16 ответов

Похожие вопросы