Комментарии 34
есть конечно background-image: image-set()
но он же еще в черновиках и в firefox и edge он просто не работает))
До сих пор не могу понять зачем так сделали.
Есть всякие хаки на эту тему. Например вставлять фоновые картинки тегом и абсолютно позиционировать, добавляя aria-hidden. Или же на сервере проверять заголовок accept, вешать класс на body, и уже через каскад вешать тот или иной формат в зависимости от класса. Да, это все костыли, но тем не менее, пока поддержки image-set() нет, можно использовать
А если сжимать jpeg ручками, ориентируясь не на 80% а на глаз, выигрыш оказывается куда больше даже с учетом современных форматов с настройками по умолчанию. Даже не знаю, стоит ли система такого усложнения, если, например, графику для верстки сайта сжимать руками. Да, на новых форматах еще лучше, но это усложнение.
Для контента сайта ладно, там без выбора после загрузки конверт в два три формата идет и сохранение на диск, видимо потому в спецификации это и прижилось первым.
Я очень жду какую нибудь нейронку, которая делает оценку сжатия картинки человечески. Сильно пожата или норм. Тогда ее следует обязательно использовать вместо параметра идиотских 80% которые иногда выдают больший размер, чем на входе)) Я бы поучавствовал в таком проекте))
Я лично наблюдал, как очередная поделка на gulp с конвертацией в форматы с большим количеством установок из npm однажды подменила jpeg lossless компрессор, на lossy даже не с мажорной версии))) И никто не создал issue с вопросом, вы чего творите?))
Я в шопе сжимал картинки, а на выходе у меня после «оптимизации» у них увеличивался размер)))
То есть главное что формат современный, а что там утилита делает вообще никого не парит))
Справедливости ради, есть простенький костыль на js, который подменяет background-image с webp на jpeg, если браузер не поддерживает первый формат. Но в спецификацию css вместе с picture логично было бы вводить свой формат background-image одновременно.
Это одни и те же файлы, сконвертированные плагином gulp-webp в соответствующий формат.
а если нужен jpeg с прозрачностью то да, только webp. Но тогда не будет обратной совместимости, потому что нечем заменить webp.
Вы смотрите метрику для своих проектов, есть множество категорий сайтов для которых desktop версия приоритетнее чем pda
а тем немногим, кому «не все равно» — тем наоборот, хочется чтобы вы не смогли сохранить то что вы видите у себя в браузере!
play.google.com/store/apps/details?id=it.nikodroid.offline&hl=ru&gl=US
Сохранять в закладки-а потом сообщение такой страницы нет… а хранилка интернета может и не сохранить этот сайт.
Огромные это сколько?
Ведь зачастую из-за адаптивного дизайна на мобиле картинка на 100% ширины, а на компе скажем треть. И эти мобильные 100% это уже 1080px, заметно больше трети обычного дисплея ПК или ноута
Куча форматов и разных размеров а казалось бы бери прогрессивный jpeg и вот тебе изображение в разном качестве и размере одним файлом. Для миниатюры достаточно прочитать небольшой кусочек файла. А если понадобится более качественное изображение достаточно догрузить ещё часть или до конца если требуется лучшее качество.
<source media="(orientation: portrait)" srcset="port-small-car-image.jpg 700w, port-medium-car-image.jpg 1200w, port-large-car-image.jpg 1600w" sizes="(min-width: 768px) 700px, (min-width: 1024px) 600px, 500px">
Вот тут у меня глаза вытекли. Сделать нормальное DOM-дерево? Нет, давайте запихаем списки в srcset и sizes. Отличное решение, нечего сказать. Как хочу, так и ворочу.
Починил, не благодарите:
<imgset src="land-medium-car-image.jpg" alt="Car">
<scalesize orientation="landscape" default="100%">
<sizes ifwidthscreen="700" width="500" />
<sizes ifwidthscreen="600" width="400" />
<imgif width="200" src="land-small-car-image.jpg" />
<imgif width="600" src="land-medium-car-image.jpg" />
<imgif width="1000" src="land-large-car-image.jpg" />
</scalesize>
<scalesize orientation="portrait" default="500">
<sizes ifwidthscreen="768" width="700" />
<sizes ifwidthscreen="1024" width="600" />
<imgif width="700" src="port-small-car-image.jpg" />
<imgif width="1200" src="port-medium-car-image.jpg" />
<imgif width="1600" src="port-large-car-image.jpg" />
</scalesize>
</imgset>
Почему стоит использовать тег <picture> вместо <img>