04070, Украина, г.Киев, ул.Братская, 6, оф.23 +38 (089) 120-59-49

Оптимизируем фотографии для сайтов: детальная инструкция

Оптимизируем фотографии для сайтов: детальная инструкция

Фотографии или скриншоты — неотъемлемая часть для любой статьи или публикации. Но многие пользователи сталкиваются с проблемой долгой загрузки страниц с медиаконтентом, что вызывает негативные эмоции. Причина тому — отсутствие должной оптимизации контента. Об это в первую очередь должен заботиться руководитель проекта и SEO-оптимизатор. Фотографии и скриншоты на странице должны быть оптимального размера, который бы помещался на странице. Помимо этого изображение должно быть детализированным, иметь нужный формат и размер. Как это сделать? Читайте далее!

Как выбрать правильный размер фото для сайта

Проблема заключается в том, что современная фототехника позволяет делать снимки в высоком разрешении. Соответственно, их размер зачастую превышает 20-50 мегабайт. Несмотря на наличие у большинства пользователей скоростного интернета, объемные по весу страницы хуже индексируются поисковыми систему в виду своей загруженности. А неправильно подобранные пропорции приводят к тому, что при посещении сайта с мобильного телефона все картинки собьются.

Существует два ключевых размерных параметра для всех фото, загружаемых на сайт:

  •         Вес, который контент занимает в памяти устройства (компьютер или мобильная техника), измеряется в килобайтах и мегабайтах.
  •         Размер — Px — измеряется в пикселях, обозначает площадь, которую занимает картинка на странице.

Если ваш сайт работает на движке Ecwid, то размер картинок оптимизируется в автоматическом режиме под каждое разрешение дисплея пользователя. Эту же функцию предлагают некоторые другие CMS. Но в большинстве случаев нужно в ручном режиме указать количество px. Оптимальный формат — 1000х1000 px.

Что касается веса медиаконтента, то, чем он меньше, тем быстрее будет грузиться страница. Также необходимо позаботится об оптимизации путем сжатия. Главное — не перестараться, иначе ухудшится качество отображения. Оптимальный вес картинки — 200-400 килобайт, в зависимости от размера.

Оптимизируем фотографии для сайтов: детальная инструкция - фото

Кадрирование картинок

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

Нужны ли миниатюры?

Однозначно нужны! Для многих страниц на сайте нужны миниатюрные изображения (как и для страниц интернет-магазинов). Оптимальный их размер в пикселях — всего 250 px при весе в 50 килобайт. Достигните этого значения вручную в редакторе. А на сайтах на Ecwid миниатюры создаются автоматически!

Какие пропорции фото нужно добавлять на сайт

Существует перечень пропорций, которые могут быть добавлены на сайт (оптимальные):

  •         1:1 (квадрат с ровным сторонами);
  •         4:3 (высокий прямоугольник);
  •         3:2 (простой прямоугольник);
  •         16:9 (низкий прямоугольник).

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

Настраиваем правильную резкость для фото в Photoshop

Размеры картинки и алгоритм уменьшения напрямую влияют на резкость и детализацию. Для правильной настройки нужно использовать встроенную функцию в редакторе Photoshop. За резкость отвечают параметры Bicubic Sharper. Значение Image Size лучше оставить на уровне 1000 px. Чтобы настроить резкость большого снимка, уменьшайте его размер постепенно, каждый раз на 1000 пикселей. После каждого изменения устанавливайте параметр Bicubic Sharper для настройки резкости. Таким образом вы добьетесь нужного результата без необходимости дальнейшей корректировки.

Photoshop

Способ изменения резкости для опытных пользователей

Этот способ подразумевает собой создание двух слоев фото с разным уровнем резкости.

Следуйте такому алгоритму:

  1.    Уменьшите размер картинки при помощи параметра Image Size, выбрав дополнительно параметр Bicubic Sharper.
  2.    Добавьте второй слой на фото параметром Duplicate Layer.
  3.    Сделайте второй слой более резким (параметр Filter → Sharpen → Sharpen).
  4.    Сделайте первый слой более прозрачным (параметр Opacity в окне Layer).

Здесь же вы можете использовать несколько хитростей. Например, добавьте на второй слой режим luminosity, чтобы не допустить проявления цветных ореолов.

Какой формат картинок лучше всего подойдет для добавления на сайт

Всего выделяют три актуальных формата фото и скриншотов для добавления на страницы:

  •         JPEG — наиболее актуальный формат, который поддерживает сжатие с потерей качества или без него (зависит от конечного размера);
  •         PNG — формат, позволяющий получить наиболее детализированную картинку после сжатия;
  •         GIF — формат, поддерживающий анимационные изображения (максимум — 256 цветов).

Для выбора последуйте советам:

  •         если изображение имеет много деталей, выбирайте стандартный JPEG;
  •         если изображение имеет много ровных заливок, выбирайте PNG, так как в формате JPEG сжатие придаст картинке пиксельности, что будет заметно на ровных краях;
  •         для анимации выбирайте GIF.

Не рекомендован ни в каком случае формат TIFF.

Чтобы уменьшить размер, потеряв при этом МИНИМУМ качества, воспользуйтесь сервисами: TinyPNG или JPEGmini.

Что делать, если нет Photoshop?

Не у каждого есть полноценная версия Photoshop, особенно если дизайн и создание сайтов вашим призванием не является. Есть альтернатива в виде онлайн версии Фотошопа, которая доступна на их сайте. Несмотря на ограниченный функционал, при помощи веб-программы можно отредактировать размер, настроить резкость. А при необходимости можно приобрести базовую версию, цена которой составляет около 10-20 долларов.

Перечень альтернативных бесплатных редакторов фото:

  1.       GIMP.

Эта программа легко устанавливается на ОС Windows, Linux и MacOS. В базовый функционал входит работа со слоями, ретушью, коррекцией цвета. Можно редактировать картинки любого популярного формата, рисовать, вставлять текст.

  1.       Paint.NET.

Эта программа используется только в Windows. Многие ее знают, как один из базовых вариантов для упрощенного редактирования картинки. Программа подходит для полупрофессиональной обработки. В инструменты входит работа со слоями, резкость, коррекция цвета.

  1.       PicMonkey.

Этот редактор доступен в онлайн-режиме. Его особенностью является наличие большого количества фильтров (наверное, самое большое из всех перечисленных здесь приложений). Однако, углубленный функционал скрывается в платной версии.

  1.       Pixlr.

Эта программа частично способна заменить Фотошоп, так как и по пользовательскому интерфейсу, и по функционалу его повторяет.

Все редакторы, кроме Paint.NET, можно установить и на Windows, и на MacOS.

Как видите, существует множество возможностей правильно настроить и оптимизировать медиаконтент для вашего сайта. Сделать это можно без значительного ограничения в качестве.

Готовы обсудить проект ?
Мы работаем 365 дней в году и допоздна! +38 (089) 120-59-49 или [email protected]
Сделать заказ