Comments 5
Progressive JPEG
Это относительно новая технология загрузки jpeg изображений
Лолшто? Эта технология во всю использовалась в браузерах 90-х, т.к. позволяла смягчить загрузку страниц модемами.
Классная штука, но в теории она может ухудшить метрики производительности TBT и TTI. Интересно было бы замерить в сравнении с base64. При большом числе картинок я бы подумал над тем, чтобы считать и рисовать канву в OffscreenCanvas, или вынес в ворклет на CSS Painting API (но тут в сафари беда).
Еще сравнение с скелетонами не совсем корректное, ведь скелетоны применяются тогда, когда еще нет никаких загружаемых данных, а у вас уже есть текст и этот хешик.
Progressive JPEG
Это относительно новая технология загрузки jpeg изображений, когда картинка загружается не линейно (сверху вниз), а сразу заполняет все пространство блока и загружается в несколько слоев (от самого худшего качества до наилучшего)
Этой "относительно новой технологии" аж 30 лет.
---
Вообще я не такой как все, я не люблю заблюренные подгрузки картинок, я хочу точно знать что мне показывается конечный вариант в максимальном качестве. Вот например стал недавно таки пользоваться телеграмом и очень бесит когда тебе присылают картинку, ты ее сохраняешь (и она сохраняется), а позже узнаешь что это была превьюшка в неполном качестве. Домохозяйкам наверное и так сойдет, а мне - нет.
Смысл миниатюр в base64 не только в том, чтобы быть мелкими, а чтобы инлайнить их прямо в html без внешних сервисов.
Проблема разных картинок на мобиле и десктопе мне кажется преувеличенной. Принципиально разными они быть не могут. Да, может быть немного разное кадрирование — да и плевать. Задача LQIP показать размытые очертания объекта, этого достаточно.
Классная статья, которая дает повод задуматься об вводе подобного механизма в свои проекты, но есть но:
Задача была - реализовать максимально адаптивный вариант без внешних исправлений верстки. Сейчас мы пробуем эту реализацию на других проектах и фидбек положительный, что не может не радовать.
Выглядит абстрактно и не несет в себе никакой информации. Хотелось бы увидеть графики и метрики, которые говорят нам о таком положительном эффекте =)
Прогрессивный рендер изображений с использованием blurhash