Изображения

Изображения — это обычно девять десятых веса страницы. Текст всего сайта весит меньше одной неподготовленной фотографии с телефона. Поэтому работа с картинками — самый быстрый способ сделать сайт быстрым.

Зачем это знать

Нейросеть напишет разметку картинки правильно, но файлы готовите вы. Снимок с телефона весит четыре мегабайта и имеет ширину 4000 пикселей — на странице он показывается шириной 800, а грузится целиком. Три правила ниже убирают эту беду за десять минут.

Какой формат брать

Практическое правило: фотографии — WebP, всё нарисованное — SVG. GIF не нужен нигде: короткое видео в современном формате весит в десять раз меньше. Перегнать снимок в WebP можно прямо в браузере — например в Squoosh, ставить программы не нужно.

Размер файла и размер на экране

Это разные вещи, и путать их дорого. Если картинка показывается шириной 800 пикселей, файл шириной 4000 не даст ничего, кроме веса. Готовьте файл по месту показа с запасом вдвое — для экранов с высокой плотностью точек.

Разметка: четыре обязательных атрибута

<img src="/assets/img/open-server.webp"
width="1200" height="750"
loading="lazy"
alt="Окно Open Server: выбор версии PHP в настройках">

• width и height. По ним браузер заранее оставляет место, и текст не прыгает, когда картинка догрузилась. Ставятся даже тогда, когда размер задан в CSS: это пропорции, а не жёсткий размер.
• loading="lazy". Откладывает загрузку картинок, до которых читатель ещё не долистал. Не ставится картинке первого экрана — её нужно грузить сразу.
• alt. Текст вместо картинки. Его читают программы чтения экрана и показывает браузер, если файл не загрузился.

Как написать alt

Описывайте не файл, а то, что на картинке важно в этом месте страницы. «Скриншот» и «фото» писать не нужно — и так понятно, что это изображение.

Пустой alt="" — это не небрежность, а осмысленное «читать нечего, пропусти». Отсутствие атрибута означает другое: диктор прочитает имя файла вслух.

Один снимок для телефона и для монитора

Картинка первого экрана на мониторе показывается шириной 1200 пикселей, а на телефоне — 360. Грузить телефону большой файл расточительно: это чужой трафик и лишние секунды ожидания. Решение — подготовить два-три файла и дать браузеру выбрать самому.

<img src="/assets/img/hero-800.webp"
srcset="/assets/img/hero-400.webp 400w,
        /assets/img/hero-800.webp 800w,
        /assets/img/hero-1600.webp 1600w"
sizes="(min-width: 1024px) 800px, 100vw"
width="800" height="500"
alt="Первый экран сайта: заголовок и блок кода рядом">

В srcset перечислены файлы с их настоящей шириной в пикселях, в sizes — какой ширины картинка будет на странице. Браузер сам сопоставит одно с другим и учтёт плотность точек экрана. Атрибут src остаётся запасным вариантом для тех, кто этого не понимает.

Что просить у нейросети

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

Как проверить, что получилось

• Открыть вкладку «Сеть» в инструментах разработчика и посмотреть вес каждой картинки.
• Прокрутить страницу сверху донизу: текст не должен прыгать при появлении картинок.
• Отключить картинки в браузере: вместо каждой должно быть понятное описание.
• Сложить вес всей страницы: для статьи с картинками разумный предел — около мегабайта.