Фотография кота, загруженная прямо с телефона, может весить несколько мегабайт, хотя в записи блога она занимает всего 700 пикселей по ширине. На большом экране разницу между исходником и подготовленной копией почти не разглядеть. А телефону читателя всё равно приходится скачивать тяжёлый файл. Если таких кадров в статье десяток, даже аккуратно оформленная страница будет открываться медленно.
Поэтому подготовка снимков — не просто нажатие кнопки «сжать». Для каждого места на странице нужно подобрать размер и формат, проверить качество, решить, когда загружать файл и как он выглядит на узком экране. В семейном блоге фотографии прогулок, детских рисунков и проделок питомца — часть истории. Отказываться от них ради скорости не нужно.
Почему фотографии задерживают страницу
Открывая запись, браузер получает текст, стили, шрифты и изображения. На фотографии часто приходится заметная часть всех загружаемых данных. Чем тяжелее файл, тем дольше он передаётся; размеры в пикселях влияют и на его отображение. На домашнем Wi-Fi задержку легко не заметить, а в дороге, при слабой мобильной связи, вместо кадра какое-то время виден пустой прямоугольник.
Есть и другая неприятность. Если пропорции изображения не заданы заранее, браузер сначала размещает текст, а после загрузки снимка сдвигает его вниз. Читатель дошёл до подписи под фотографией хорька — и строка уехала из-под пальца. Подготовка изображений помогает избежать таких скачков.
В первую очередь обычно стоит проверить крупный кадр в начале записи: его видят сразу. Но общий вес страницы тоже важен. Десять неудачно подготовленных фотографий могут замедлить чтение на телефоне не меньше одной огромной обложки.
Начните с того, где и как будет показан кадр
Исходник с камеры сохраните отдельно, а для публикации сделайте копию. Ориентируйтесь на ширину места, где появится снимок: если текстовая колонка занимает около 720 CSS-пикселей, фотография шириной 4000 пикселей ей ни к чему. Но файл ровно в 720 пикселей может выглядеть слегка размытым на экране с высокой плотностью пикселей. Для такой колонки можно попробовать вариант в полтора-два раза шире области показа и посмотреть на результат на разных устройствах.
Миниатюре в списке записей нужна своя версия — отправлять туда полноразмерную обложку расточительно. И наоборот: маленькую миниатюру не стоит растягивать на всю ширину статьи. Детали шерсти, книжной страницы или детского рисунка от этого не вернутся.
Если тема сайта поддерживает адаптивные изображения, браузер может выбрать размер файла под экран читателя. Система публикации нередко создаёт несколько версий при загрузке, а в разметке использует srcset и sizes. Проверьте, как это работает именно у вас: несколько файлов на сайте ещё не означают, что телефон получает меньший. Следите и за кадрированием. Для обложки 16:9 и квадратной карточки могут понадобиться разные варианты, иначе у кота по краям пропадут уши.
Как выбрать формат, не испортив изображение
Одного «самого быстрого» формата для всех картинок нет. Выбор зависит от содержимого и возможностей сайта: фотография, рисунок с чёткими линиями и значок на прозрачном фоне по-разному переносят сжатие. Лучше сравнить готовые файлы на экране, чем полагаться на расширение.
- JPEG подходит для обычных фотографий без прозрачности. Степень сжатия можно менять, но при чрезмерной экономии появляются дефекты на шерсти, волосах, мелких буквах и плавных переходах цвета.
- WebP часто уменьшает размер фотографии при сопоставимом видимом качестве и поддерживает прозрачность. Сравнивайте результат с конкретным исходником: одинаковой экономии от всех файлов не будет.
- AVIF иногда даёт ещё более компактный файл. Перед массовым переходом проверьте отображение в браузерах ваших читателей, работу редактора и сайта, а также время создания файлов.
- PNG пригодится для графики с прозрачностью или изображений, где важно сохранить резкие края без потерь. Для большой фотографии он обычно слишком тяжёлый.
- SVG удобен для простых значков и схем из линий и фигур, но не для фотографии питомца. Не загружайте на сайт SVG из непроверенного источника: содержимое такого файла требует внимания к безопасности.
Формат с потерями не обязательно испортит снимок. Иногда небольшое снижение точности почти незаметно на экране, зато файл становится легче. Присмотритесь к лицу ребёнка, глазам животного, подписи на школьной поделке и краям предметов — там чрезмерное сжатие видно быстрее всего. Важный семейный снимок пусть остаётся в архиве в исходном виде; на сайте достаточно хорошей экранной копии.
Когда изображение содержит текст
Сфотографированный лист со стихотворением или расписанием проверьте отдельно. После уменьшения буквы могут стать нечитаемыми, даже если в целом снимок выглядит аккуратно. Если текст важен для записи, лучше набрать его прямо на странице, а фотографию оставить дополнением. Тогда содержание можно будет прочитать и при увеличенном шрифте, и если изображение не загрузится.
Сжатие, обрезка и скрытый вес
Сначала обрежьте лишнее, если это не меняет смысл кадра. Например, пустая стена вокруг детского рисунка может занимать большую часть фотографии. После обрезки рисунок станет крупнее без лишних пикселей. Затем уменьшите размеры и сохраните копию в выбранном формате. Так проще получить предсказуемый результат, чем пытаться до предела сжать огромный исходник.
Внутри файла могут храниться модель камеры, дата съёмки, а иногда и местоположение. Удаление ненужных метаданных не заменит уменьшения фотографии, но перед публикацией семейных снимков полезно проверить, не остались ли в копии координаты дома или школы. С цветовым профилем действуйте внимательнее: если после экспорта оттенки изменились, сравните файл в браузере с исходником.
Можно записывать вес файла до и после обработки, но строгой нормы в килобайтах для каждой картинки нет. Светлый портрет на спокойном фоне и кадр с осенними листьями отличаются по сложности. Нужен файл, который хорошо выглядит на странице и не заставляет читателя скачивать лишнее. Появились пятна вокруг усов кота или распались буквы на открытке — вернитесь к менее сильному сжатию.
Ленивая загрузка: полезна не для каждого кадра
Снимки далеко внизу страницы не обязательно загружать сразу. «Ленивая» загрузка откладывает получение файла, пока читатель не приблизится к нему. В длинной записи о прогулке начало статьи появится без ожидания всех фотографий из конца. Во многих системах публикации эту настройку можно включить без ручной правки каждой страницы.
А вот обложку, которая видна сразу, обычно откладывать не стоит: если браузер поздно узнает о ней, главный кадр появится с задержкой. Для него важнее правильно подобрать размер и начать загрузку вовремя. Фотографии ниже первого экрана, напротив, обычно подходят для отложенной загрузки.
Укажите ширину и высоту изображений либо задайте их пропорции в оформлении сайта. Браузер сможет заранее оставить место под кадр; это не значит, что фотографию придётся растянуть до размеров исходника. Проверьте на телефоне, что она вписывается в колонку, а текст при прокрутке не прыгает.
Проверка скорости без сложного проекта
Не обязательно пересохранять весь фотоархив за один раз. Возьмите запись с несколькими крупными снимками и сравните её до и после изменений. Так станет понятнее, что тормозит именно ваш блог, а старые семейные фотографии не пострадают от поспешной массовой обработки.
- Откройте страницу на телефоне. Посмотрите, какой кадр появляется первым, остаются ли пустые места, сдвигается ли текст. Если есть возможность, проверьте страницу не только на домашнем Wi-Fi, но и при более медленном соединении.
- Найдите самые тяжёлые файлы. Их вес и фактически загружаемые версии видны в инструментах разработчика браузера или в отчёте проверки производительности. Обратите внимание на снимки, чьи размеры в пикселях намного больше области показа.
- Подготовьте копии для разных мест. Отдельно проверьте обложку, фотографии в тексте и миниатюры. Исходники храните вне сайта, чтобы при необходимости сделать новые версии.
- Сравните вид и поведение страницы. Откройте обновлённую запись на узком и широком экране. Посмотрите, не потерялись ли важные детали, удачно ли обрезаны кадры, не скачет ли текст и какой файл действительно загружается.
- Повторите измерение. Сравнение одной и той же страницы до и после обработки полезнее оценки «на глаз». Если обложка всё ещё появляется поздно, проверьте, не включена ли для неё отложенная загрузка.
Отчёт помогает найти проблему, но саму запись тоже нужно посмотреть. Он может показать медленную загрузку крупного кадра или сдвиг содержимого. А исправление зависит от причины: где-то достаточно уменьшить файл, где-то нужно наладить выбор адаптивной версии, а где-то — заранее задать пропорции.
Что учитывать при пакетной обработке старых записей
Если за годы в блоге накопилось много фотографий, автоматический плагин или встроенная функция сайта может создать облегчённые версии сразу для нескольких записей. Перед запуском сделайте резервную копию файлов и базы данных. Затем проверьте настройки на разных снимках: тёмной фотографии кошки, ярком детском рисунке и кадре с мелким текстом. Узнайте, сохраняются ли оригиналы и можно ли отменить обработку.
После этого откройте старую запись как обычный посетитель, а не только в редакторе. Кэш сайта или браузера порой показывает прежний файл — убедитесь, что сравниваете новую версию. Проверьте и мобильный вид: снимок, удачный в широкой статье, может оказаться слишком сильно обрезанным в узкой карточке.
Доступность тоже зависит от подготовки изображения
Содержательному снимку нужен краткий альтернативный текст. Он передаёт главное, если картинка не загрузилась или человек пользуется программой чтения с экрана. Перечислять всё в кадре не требуется. Если для рассказа важно, что хорёк забрался в корзину с детскими карандашами, достаточно описать это действие. Для чисто декоративной картинки не нужно повторять соседний текст.
Подпись решает другую задачу: в ней можно сохранить семейную подробность — например, что корзину собирали перед первым школьным днём. Альтернативный текст описывает значимое содержание снимка. Это пригодится и читателю, который отключил изображения ради экономии трафика.
Перед следующей публикацией сохраните исходный снимок, сделайте копию под ширину колонки и проверьте её в браузере. Если фотография стоит в начале записи, уделите ей отдельную минуту: убедитесь, что она не загружается с задержкой, остаётся чёткой на телефоне и не сдвигает текст под собой.