Как стать автором
Обновить

Комментарии 34

Ни чего нового не узнал, зачем приделали тег React если примера правильно реализованого реакт компонента нету, для меня загадка.
В древние времена, когда еще никто не слышал про srcset, в интернетах ходила шутка, что мол можно в разы снизить мировой интернет-трафик если бы производители тогдашних браузеров рендерили гифки снизу вверх.
Очень актуальный был совет для… гм… определенной категории развлекательных сайтов.
Я бы даже сказал для оооочень уузкой категории сайтов.
В древних временах эта категория была не так уж узка и при упоминании слова интернет половина прохожих понимающе улыбалась, так как сейчас улыбаются при упоминании порнхаба.
Это все замечательно, а теперь когда вы обмазались форматами, у вас все равно будет jpeg для свойств типа background-image, потому что фоновые картинки не умеют в несколько форматов)))
есть конечно background-image: image-set()
но он же еще в черновиках и в firefox и edge он просто не работает))
Еще из забавного: картинка из img с примененным стилем, в котором указан display:none грузится браузером всегда. Если тот же файл картинки прикрутить через background — то вообще не запрашивается с сервера, пока display:none не будет снят по hover или другим событиям/яваскрипту.
До сих пор не могу понять зачем так сделали.
До сих пор не могу понять зачем так сделали.

Видимо чтобы при ховере не мигало все (типа workaround для прелоадинга)

Я думаю, по той причине, что для display: none блоков просто не существует свойства background-image, оно срабатывает только тогда, когда свойство display блока становится отличным от none.

Есть всякие хаки на эту тему. Например вставлять фоновые картинки тегом и абсолютно позиционировать, добавляя aria-hidden. Или же на сервере проверять заголовок accept, вешать класс на body, и уже через каскад вешать тот или иной формат в зависимости от класса. Да, это все костыли, но тем не менее, пока поддержки image-set() нет, можно использовать

В подавляющем большинстве случаев я не видел чтобы кто-то руками делал два три формата изображения ручками. Все это как правило конвертируется автоматом с настройками по умолчанию даже тот же jpeg. Стоит таска в каком нибудь gulp автоматом конвертить jpg в jpeg 80% webp80%.
А если сжимать jpeg ручками, ориентируясь не на 80% а на глаз, выигрыш оказывается куда больше даже с учетом современных форматов с настройками по умолчанию. Даже не знаю, стоит ли система такого усложнения, если, например, графику для верстки сайта сжимать руками. Да, на новых форматах еще лучше, но это усложнение.
Для контента сайта ладно, там без выбора после загрузки конверт в два три формата идет и сохранение на диск, видимо потому в спецификации это и прижилось первым.

Я очень жду какую нибудь нейронку, которая делает оценку сжатия картинки человечески. Сильно пожата или норм. Тогда ее следует обязательно использовать вместо параметра идиотских 80% которые иногда выдают больший размер, чем на входе)) Я бы поучавствовал в таком проекте))

Я лично наблюдал, как очередная поделка на gulp с конвертацией в форматы с большим количеством установок из npm однажды подменила jpeg lossless компрессор, на lossy даже не с мажорной версии))) И никто не создал issue с вопросом, вы чего творите?))
Я в шопе сжимал картинки, а на выходе у меня после «оптимизации» у них увеличивался размер)))
То есть главное что формат современный, а что там утилита делает вообще никого не парит))
да можно просто загрузить «картинку из img с примененным стилем, в котором указан display:none» ту же что и в фоне, она залетит в кэш браузера и моментально отобразится когда потребуется

Справедливости ради, есть простенький костыль на js, который подменяет background-image с webp на jpeg, если браузер не поддерживает первый формат. Но в спецификацию css вместе с picture логично было бы вводить свой формат background-image одновременно.

да, можно, но я не люблю так. Особенно после визуального сравнения «выигрыша» webp перед jpeg. Не велика там и разница. Никаких 30% я не вижу. Учитывая, что гонят графику на автомате в два формата с настройками по умолчанию, не оптимально все с точки зрения восприятия.
Я мерял на недавних проектах. Порядка 30% по сравнению с jpeg, а по сравнению с png — webp вообще просто космос!
image
Это одни и те же файлы, сконвертированные плагином gulp-webp в соответствующий формат.
А как вы замеряли? Единственный критерий — визуально приемлемая картинка c мксмальноприемлимыми артефактами сжатия. Нужно подгонять jpeg и webp под минимально допустимое качество визуально и сравнивать потом уже кб. png24 — это формат без сжатия. Если использовать там 8 битную палитру выигрыш тоже будет космос если нет задачи использовать всю палитру как в jpeg. tinypng.com
а если нужен jpeg с прозрачностью то да, только webp. Но тогда не будет обратной совместимости, потому что нечем заменить webp.
png24 — это формат без сжатия.

Со сжатием, но без потерь. В принципе, у webp тоже есть режим без потерь, но gulp-webp этого не учитывает, а лично я не сравнивал эти два формата.
да, верно. Имел ввиду без сжатия = без артефактов), толку от webp не много.
Каждый раз когда замечаю упоминание этото тега, смотрю в Google Analytics/Яндекс Метрику и вижу 80% мобильных устройств. Усложнять логику и хранить огромные фотки ради 20% вымирающих десктопов такое себе развлечение. Закрываю вкладку и забываю про этот тег.

Вы смотрите метрику для своих проектов, есть множество категорий сайтов для которых desktop версия приоритетнее чем pda

Descop/mobile, приложение… а про юзеров и не кто не думает, что с сохранением страничек делать будем ?C 5 версии html так усложнили движки браузеров, что в 6 версии чувствую придется внедрять тег 'save as', кроме шуток,Pdf формат сейчас уже проще в этом отношении выглядит. Мобильные версии делают ужасный pdf и не умеют большинство сохранять, а некоторые сайт писатели еще делают так что хрен сохранишь страничку (ладно бы библиотеки и читалки ...).Раньше некоторые браузеры могли все сохранить в одном файле, но теперь тег «img src»=«89787797976689a8s87778ss8d8d87d886868689wd88y8y8ydwdy» такого формата устаревший.Так еще сэйвы от одного браузера частенько не работают в другом…
мне кажется это потому что большинству сайто-делателей все равно — потому что то что вы видите на сайте для них несущественно (кроме багов тут и сейчас — т.е. с современными браузерами и стандартами),
а тем немногим, кому «не все равно» — тем наоборот, хочется чтобы вы не смогли сохранить то что вы видите у себя в браузере!
Для десктопа веб станицы действительно хрен сохранишь, кроме pdf, который не подходит, а для мобилы я использую
play.google.com/store/apps/details?id=it.nikodroid.offline&hl=ru&gl=US
Опять же -народ жалуется что сохранения не открывается другими браузерами.
Кто вам мешает сохранять в pdf? В закалдки?
pdf — частенько кривой, генерирует до фига пустых страниц или не сохраняет полностью статью. Проверите хотя бы на хабре, в половине случаев как обрезано…
Сохранять в закладки-а потом сообщение такой страницы нет… а хранилка интернета может и не сохранить этот сайт.
Зачем тогда сайт, можно же приложение сделать и забить на эти несчастные 20%, по заветам крупных игроков рынка. </sarcasm>

Огромные это сколько?

Ведь зачастую из-за адаптивного дизайна на мобиле картинка на 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>
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.