Элад Шехтер в статье "Complete Guide to Responsive Images!" рассказал про все подходы, которые можно использовать при создании адаптивных изображений.

В статье разбирается использование тега <picture> и тега <img> c атрибутами srcset и sizes для разных изображений в зависимости от плотности пикселей и ширины вьюпорта. Разбирается использование CSS-свойства image-set и CSS-функции image(). С помощью функции image() (её поддержки пока нет в браузерах) можно будет обрезать изображение и использовать в background-image изображение того типа, которое может быть отображено браузером.

Мне статья показалась чересчур справочной — не хватило живых практических примеров. Тем не менее она может послужить отличной стартовой точкой для изучения темы адаптивных изображений.

На Девшахте есть хороший перевод статьи.

#web #image #responsive

https://medium.com/@elad/a-complete-guide-for-responsive-images-b13db359c6c7

Майкл Шарналь недавно написал статью про исправление отображения фотографий в браузере, если они были сняты в портретной ориентации — "Image orientation on the web".

Информация о том, как был повёрнут фотоаппарат во время съёмки, находится в EXIF-данных изображения. Для того, чтобы изображение отображалось корректно, надо чтобы браузер прочитал эту информацию и повернул изображение. В Firefox для этого используется CSS-свойство image-orientation: from-image , в Safari изображение поворачивается автоматически, если есть EXIF-данные. Рабочая группа CSS решила, что последний вариант лучший и объявила image-orientation: from-image deprecated.

Пока не все браузеры отображают изображения в правильной ориентации. Одно из решений этой проблемы — поворачивать изображения при их сохранении на сервер. В статье описывается, как это сделать с помощью Node.JS.

Статья хорошая. Читать стоит, если работаете с загружаемым контентом пользователей.

#image #nodejs

https://justmarkup.com/articles/2019-10-21-image-orientation/

Пару недель назад инженеры из Netflix рассказали про новый открытый формат изображений — "AVIF for Next-Generation Image Coding".

Вопрос качества и объёма передаваемых изображений для Netflix стоит особенно остро, поэтому они присоединились к разработке нового формата изображений AVIF на базе кодека AV1, который в свою очередь используется для кодирования видео. На данный момент это один из самых лучших форматов, который превосходит по качеству webp, который был разработан на базе кодека предыдущего поколения VP8. AVIF поддерживает High Dynamic Range (HDR), Wide Color Gamut (WCG) и Standard Dynamic Range (SDR). Для сравнения качества сжатия разных кодеков был разработан специальный фреймворк. Результаты сравнения показали преимущество AVIF.

В ближайшем будущем стоит ожидать появления поддержки AVIF в браузерах — работа над добавлением AVIF в Chrome уже началась. Также The Alliance for Open Media разрабатывает свободную библиотеку для работы с новым форматом. В мае прошлого года поддержка AVIF была добавлена в Windows 10.

#image #codec #optimization

https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4