🖼️

Работа с изображениями в веб-разработке

Aug 17, 2024

Заметки с лекции о работе с изображениями в веб-разработке

Основные темы

  • Использование тегов и атрибутов для работы с изображениями
  • Оптимизация изображений для различных устройств и плотностей пикселей
  • Современные форматы изображений
  • Минификация изображений
  • Предзагрузка изображений

Стандартный тег IMG

  • Основные атрибуты: src и alt
  • Проблемы при загрузке больших изображений на медленном интернете:
    • Скачки контента при загрузке

Атрибуты width и height

  • Указываются в пикселях без единиц измерения.
  • Резервирование места в браузере для изображения:
    • Проблема скачка контента решается с помощью атрибутов width и height.

Поведение на мобильных устройствах

  • Браузер пропорционально уменьшает размеры изображений для мобильных устройств.
  • Необходимо использование правила max-width: 100% для адаптивных изображений.

Оптимизация под плотность пикселей

  • Современные экраны имеют различные коэффициенты плотности пикселей.
  • Пример: для ширины в 360 пикселей:
    • Для устройства с коэффициентом 2 нужно изображение шириной 720 пикселей.
    • Для устройства с коэффициентом 3 нужно изображение шириной 1080 пикселей.

Использование srcset

  • Атрибут srcset для указания вариаций изображений в зависимости от плотности пикселей:
    • Формат: image_path, descriptor
    • Браузер выбирает наиболее подходящее изображение.

Использование Picture и Source

  • Связка picture и source для более гибкого управления изображениями:
    • source использует атрибуты srcset и media.
    • Поддержка различных форматов изображений (например, AVIF и WebP).

Пример разметки

<picture> <source srcset="cat_mobile.avif" type="image/avif"> <source srcset="cat_mobile.webp" type="image/webp"> <img src="cat_mobile.jpg" alt="Кот" width="360" height="240"> </picture>

Современные форматы изображений

  • AVIF и WebP имеют меньший размер по сравнению с JPEG и сохраняют качество:
    • JPEG: 229 КБ
    • WebP: 194 КБ
    • AVIF: 137 КБ

Минификация изображений

  • Уменьшение размера изображений без потери качества.
  • Сжимает изображения на 50-70%.
  • Автоматизация минификации с помощью сборщиков проектов.

Предзагрузка изображений

  • Использование элемента <link> для предзагрузки изображений.
  • Атрибуты rel и href для указания нужного изображения:
<link rel="preload" href="cat.jpg" as="image">

Элементы fig и figcaption

  • <figure> объединяет изображение и подпись:
    • Обязательно использование одного <img> и одного <figcaption>.
  • Различие между alt и figcaption:
    • alt — для доступности (скринридеры).
    • figcaption — видимая подпись на странице.

Заключение

  • Грамотная работа с изображениями важна для UX и метрик сайта.
  • Использовать современные теги и форматы для оптимизации загрузки изображений.

Full transcript