Независимо от наличия собственного коммерческого сайта, личного сайта-портфолио или онлайн-магазина перед владельцами бизнеса возникает задача:
оптимизировать исходные изображения для эффективного применения на веб-страницах сайта.
Под термином «оптимизация изображений для Интернета» предполагается три варианта изменения изображений:
- Улучшить визуальную привлекательность.
- Обеспечить быструю загрузку контента и веб-страниц.
- Подготовить для корректной индексации поисковыми системами.
В новой статье от WaterMillSky читатели блога узнают о наиболее действенных методах оптимизации изображений и познакомятся с популярными онлайн-инструментами.
1. Качество начинается с фотостоков
Фотографии с фотостоков будут отличным вариантом контента для наполнения сайта профессиональными изображениями. В 2022 году огромное количество сайтов предлагают стоковые фото высокого качества. Они доступны для бесплатного скачивания и коммерческого использования. Ниже самые популярные веб-ресурсы:
При загрузке стоковых фотографий чаще всего предлагаются изображения в формате JPEG. Для сжатия фотографии потребуется уменьшить размер (вес) и загрузить собственную версию. Рекомендуется начинать с изображений большого формата.
2. Какой тип файла выбрать и что лучше: JPEG или PNG
Для изображений используются разные форматы: JPG, PNG, SVG, GIF. На сайтах применяются в основном форматы JPEG, JPG или PNG.
Рекомендации по сохранению оригинальных изображений:
- Для фотографий — однозначно выбираем формат JPG. Он обладает меньшим весом, чем PNG-файлы.
- Для графических элементов, дизайнов, логотипов, инфографики и картинок с объёмным текстом — выбираем формат PNG 24 бит. Этот формат имеет больший размер файла и одновременно отличается лучшим качеством при большем размере файла, позволяет масштабировать графический контент без потери исходного качества, обеспечивает прозрачный фон при создании логотипов.
3. Оптимизируйте изображения для ускорения загрузки и улучшения дизайна страниц
При публикации изображений необходимо найти оптимальный баланс между размером файла и его разрешением. Оба параметра связаны прямой пропорциональностью: чем больше весит изображение, тем больше его разрешение. Для печатных изданий это очень хорошо. Но на сайтах такие изображения снижают производительность интернет-страниц, ухудшают пользовательский опыт, а это приводит к снижению позиций сайта в поиске Google. Особенно негодуют мобильные пользователи, когда сайт долго открывается, а картинки медленно грузятся.
Изображения какого размера будут в самый раз
Обеспечить корректный баланс между качественными и количественными характеристиками помогут следующие критерии:
- Оптимальный вес — меньше, значит лучше. Фотография в 250 КБ будет более рациональным выбором, чем аналог в 10 Мб.
- Размер в пикселях — изображения имеет две стороны, которые измеряются в пикселях. Чаще всего используются размеры сторон до 2 000 пикселей
- Разрешение в точках на дюйм (PPI) — оптимальная плотность плотность изображения составляет от 100 до 150 PPI.
Как узнать характеристики файла: размер, вес и разрешение
Чтобы определить точный размер графического файла и размер изображения необходимо открыть свойства файла:
- При щелчке правой кнопкой мыши по файлу раскрывается контекстное меню, в нижней части будет строка «Свойства».
- При нажатии на эту строку появится окно, где на вкладке «Общие» показывается размер файла в Кб или Мб.
- На вкладке «Подробно» раскрывается информация об изображении: ширина и высота в пикселях, горизонтальное и вертикальное разрешение в точках на дюйм, глубина цвета.
Что нужно знать о размере файла
- Наилучший размер файла составляет не более 1 Мб для крупных и фоновых изображений, для других графических файлов до 300 Кб и менее.
- Размер большинства других небольших графических файлов может составлять 300 КБ или меньше.
- В процессе сохранения скачанных фотографий и при технической возможности рекомендуется использовать опцию «Сохранить для Интернета», чтобы размер изображения был оптимизирован для сайта.
Что делать, когда размер исходного изображения превышает возможности сайта
Иногда оригинальные цифровые фотографии весят больше 1 Мб. Это создаёт некоторые трудности при использовании на веб-сайте. Чтобы отредактировать фотографии для размещения в сети воспользуйтесь следующими советами:
- Уменьшите размер изображения — пропорциональное изменение ширины и высоты изображения в меньшую сторону поможет снизить размер файла.
- Уменьшите разрешение изображения — изменить уровень качества с помощью программ для работы с фотографиями, которые автоматически снижают до 72 dpi и 92 dpi.
- Сожмите изображение — бесплатные программы TinyJPG или TinyPNG помогут уменьшить размер графического файла без потери качества изображения.
4. Оптимизируйте изображения под единый стиль и одинаковый размер
Когда на странице используются идентичный стиль и единственный размер элементов — изображения смотрятся лучше. Выравнивание элементов страницы — текста, картинок, столбцов и другой информации — обеспечит должную согласованность. Например, фотографии разных размеров приводятся к одному размеру, а картинки получают вертикальную или горизонтальную ориентацию.
5. Дайте правильное название каждому графическому файлу
Многие пользователи даже не задумываются, какие имена у фотографий. Прежде чем загружать фото на сайт, переименуйте все изображения для унификации обозначений, упрощения управления контентом и повышения эффективности SEO-оптимизации. Для достижения высокой согласованности элементов используйте строчные буквы и цифры от 0 до 9. Не рекомендуется добавлять пробелы или знаки препинания.
6. Добавьте альтернативный текст и подписи
Пользователи загружают изображения на свои сайты, но часто забывают заполнить служебные поля с дополнительной информации для успешной SEO-оптимизации. В частности, теги Alt или альтернативный текст не видны обычном посетителям, но они предоставляют поисковым системам базовую информацию о каждом изображении.
Поэтому, после добавления каждого изображение на сайт, обязательно заполните поле «Альтернативный текст». Для этой цели подойдет фраза из нескольких слов с описанием изображения или фотографии. В альтернативный текст будет полезно добавить релевантные ключевые слова: без повторений и строго по теме контента.
А ещё для изображений пригодятся подписи, потому что пользователи чаще просматривают описания изображений и реже читают другие тексты на сайте.
7. Разместите изображение рядом с текстом
Для публикации выбирайте картинки и фотографии, что связаны с основным текстовым контентом интернет-страницы. Изображение с окружающей релевантной информацией и связанными ключевыми словами получит лучшее ранжирование, а страница — более высокие позиции в органической выдаче.
Избегайте распространённых клише при использовании стоковых фотографии. Для образовательного сайта рекомендуется размещать оригинальные фото, где представлены преподаватели и студенты, показаны учебные помещение, продемонстрирован образовательный процесс. Такие фотографии заинтересуют посетителей сайта и помогут поисковым системам корректно ранжировать веб-страницы.
Контрольный список по оптимизации веб-изображений
А теперь посмотрим, как работают правила на примере конкретного сайта. Исходный материал: фотография бокала на Unsplash, имя файла «RHuFEhZTfN6MW14.jpeg», размер 612 Кб, разрешение 2309×1721 пикселей. Для публикации на сайте в качестве небольшой фотографии придётся немного изменить характеристики и название файла.
- Переименовать изображение — в понятную надпись для людей. Например, «стеклянный-бокал-для-вина.jpeg»
- Использовать фотоинструмент — чтобы изменить размер и обрезать изображение до нужного размера. Для примера выбирается размер 1200×720.
- Проверить размер файла — после изменения параметров фотографии размер файла составил 124 Кб.
- Загрузить фото на сайт — добавить подпись для посетителей и заполнить альтернативные теги для поисковых машин.
Выполнение правил поможет улучшить внешний вид изображений, ускорит загрузку страниц. В результате будет польза для SEO-продвижения. Закрепите действия с изображениями на практике, чтобы пожинать плоды оптимизации сайта в ближайшем времени.
