Фотографии или скриншоты — неотъемлемая часть для любой статьи или публикации. Но многие пользователи сталкиваются с проблемой долгой загрузки страниц с медиаконтентом, что вызывает негативные эмоции. Причина тому — отсутствие должной оптимизации контента. Об это в первую очередь должен заботиться руководитель проекта и SEO-оптимизатор. Фотографии и скриншоты на странице должны быть оптимального размера, который бы помещался на странице. Помимо этого изображение должно быть детализированным, иметь нужный формат и размер. Как это сделать? Читайте далее!
Проблема заключается в том, что современная фототехника позволяет делать снимки в высоком разрешении. Соответственно, их размер зачастую превышает 20-50 мегабайт. Несмотря на наличие у большинства пользователей скоростного интернета, объемные по весу страницы хуже индексируются поисковыми систему в виду своей загруженности. А неправильно подобранные пропорции приводят к тому, что при посещении сайта с мобильного телефона все картинки собьются.
Существует два ключевых размерных параметра для всех фото, загружаемых на сайт:
Если ваш сайт работает на движке Ecwid, то размер картинок оптимизируется в автоматическом режиме под каждое разрешение дисплея пользователя. Эту же функцию предлагают некоторые другие CMS. Но в большинстве случаев нужно в ручном режиме указать количество px. Оптимальный формат — 1000х1000 px.
Что касается веса медиаконтента, то, чем он меньше, тем быстрее будет грузиться страница. Также необходимо позаботится об оптимизации путем сжатия. Главное — не перестараться, иначе ухудшится качество отображения. Оптимальный вес картинки — 200-400 килобайт, в зависимости от размера.
Если сжимать в размерах оригинальное изображение и уменьшать его вес, качество детализации снижается, пропадают менее четкие детали на фото. Если ваша цель — показать даже не прорисованные элементы, добавьте их отдельным кадром с увеличением. Так вы сэкономите место и не допустите проблем с оптимизацией страницы. Используйте Photoshop.
Однозначно нужны! Для многих страниц на сайте нужны миниатюрные изображения (как и для страниц интернет-магазинов). Оптимальный их размер в пикселях — всего 250 px при весе в 50 килобайт. Достигните этого значения вручную в редакторе. А на сайтах на Ecwid миниатюры создаются автоматически!
Существует перечень пропорций, которые могут быть добавлены на сайт (оптимальные):
Проследите за тем, чтобы все скриншоты и фотографии на страницах сайта были одной пропорции. Это визуально скрасит оформление. Важно подбирать пропорцию и по ширине самого текста. Особенно важной эта информация будет если разработка интернет магазина не включала наполнение, а вам необходимо красиво и гармонично вписать изображения товаров на страницы своего ресурса.
Размеры картинки и алгоритм уменьшения напрямую влияют на резкость и детализацию. Для правильной настройки нужно использовать встроенную функцию в редакторе Photoshop. За резкость отвечают параметры Bicubic Sharper. Значение Image Size лучше оставить на уровне 1000 px. Чтобы настроить резкость большого снимка, уменьшайте его размер постепенно, каждый раз на 1000 пикселей. После каждого изменения устанавливайте параметр Bicubic Sharper для настройки резкости. Таким образом вы добьетесь нужного результата без необходимости дальнейшей корректировки.
Этот способ подразумевает собой создание двух слоев фото с разным уровнем резкости.
Следуйте такому алгоритму:
Здесь же вы можете использовать несколько хитростей. Например, добавьте на второй слой режим luminosity, чтобы не допустить проявления цветных ореолов.
Всего выделяют три актуальных формата фото и скриншотов для добавления на страницы:
Для выбора последуйте советам:
Не рекомендован ни в каком случае формат TIFF.
Чтобы уменьшить размер, потеряв при этом МИНИМУМ качества, воспользуйтесь сервисами: TinyPNG или JPEGmini.
Не у каждого есть полноценная версия Photoshop, особенно если дизайн и создание сайтов вашим призванием не является. Есть альтернатива в виде онлайн версии Фотошопа, которая доступна на их сайте. Несмотря на ограниченный функционал, при помощи веб-программы можно отредактировать размер, настроить резкость. А при необходимости можно приобрести базовую версию, цена которой составляет около 10-20 долларов.
Перечень альтернативных бесплатных редакторов фото:
Эта программа легко устанавливается на ОС Windows, Linux и MacOS. В базовый функционал входит работа со слоями, ретушью, коррекцией цвета. Можно редактировать картинки любого популярного формата, рисовать, вставлять текст.
Эта программа используется только в Windows. Многие ее знают, как один из базовых вариантов для упрощенного редактирования картинки. Программа подходит для полупрофессиональной обработки. В инструменты входит работа со слоями, резкость, коррекция цвета.
Этот редактор доступен в онлайн-режиме. Его особенностью является наличие большого количества фильтров (наверное, самое большое из всех перечисленных здесь приложений). Однако, углубленный функционал скрывается в платной версии.
Эта программа частично способна заменить Фотошоп, так как и по пользовательскому интерфейсу, и по функционалу его повторяет.
Все редакторы, кроме Paint.NET, можно установить и на Windows, и на MacOS.
Как видите, существует множество возможностей правильно настроить и оптимизировать медиаконтент для вашего сайта. Сделать это можно без значительного ограничения в качестве.