Автор заинтересован в том, чтобы его текст был прочитан и интерпретирован так, как задумано. Поэтому подбор картинок к тексту сплошь и рядом — естественная задача автора. О том «Где брать иллюстрации для статей» я уже рассказывал.
Однако кроме адекватного содержания, иллюстрация должна соответствовать определённым техническим требованиям. Прежде чем загружать на сайт, изображение необходимо оптимизировать.
Если у вас есть свой сайт или вы работаете с сайтом заказчика, вам наверняка придётся оптимизировать изображения, и эта статья вам поможет.
Содержание
Что такое оптимизация изображений и зачем она нужна
Считается, что пользователи и поисковые системы любят сайты, которые загружаются быстро и не любят сайты медленные. На эту тему проводятся всевозможные исследования, которые дают неоднозначные результаты.
Мне, как пользователю тоже нравится, когда сайт загружается быстро. Примем в качестве рабочей гипотезы, что быстрая загрузка — это благо, и за неё стоит побороться.
Идём дальше. Скорость загрузки страницы сайта зависит от множества факторов: производительности серверов хостинга, качества кода, особенностей CMS, пропускной способности интернет-канала и др. И, разумеется, быстрота загрузки страницы зависит от размера контента.
Оптимизация изображений — это одновременно наука и искусство. Мы можем назвать это искусством, потому что никто не может дать определённый ответ, как лучше всего сжать конкретное изображение. Однако это и наука, ведь в нашем распоряжении есть разработанные техники и алгоритмы, которые могут значительно уменьшить размер ресурса.
(Из Рекомендаций Google для веб-разработчиков)
Типичный контент состоит из текста и картинок, причём изображения имеют размер гораздо больший, чем текст. Для сравнения, сейчас, когда эта статья уже почти готова, её текст «весит» около 100 kB, а изображения в сумме в 30 раз больше — более 3 MB, притом что это в основном скриншоты. Если вы будете использовать для иллюстраций снимки сразу из фотоаппарата, то их размер будет ещё больше.
Следовательно, скорость загрузки контента можно повысить, уменьшив размер файлов изображений. Перед загрузкой на сайт я оптимизировал иллюстрации из этой статьи, в результате чего их «вес» уменьшился в 10 раз.
Как проверить скорость загрузки сайта
Скорость загрузки вашего сайта можно проверить, например, с помощью специального сервиса компании Google. Введите URL страницы, загрузка которой вас интересует и дождитесь результатов.
PageSpeed Insights анализирует различные параметры, после чего выдаёт рекомендации и прогнозирует возможную экономию времени загрузки.
Как видим, изображения на этой странице — не единственный фактор, ухудшающий скорость, но самый весомый: рекомендации относительно картинок в самом верху списка. Если владельцу этого сайта удастся выполнить рекомендации, страница будет загружаться на 6 секунд быстрее, что весьма заметно.
По каким параметрам оптимизируются изображения
Характеристики экранов ограничивают визуальное качество изображений, поэтому нет никакого смысла использовать на сайтах картинки с такой же высокой детализацией, как, например, в изображениях для полиграфии. Целесообразно уменьшать разрешение картинки до уровня, достаточного для мониторов:
- размер изображения по длинной стороне сократить до ширины контентной области сайта, которая чаще всего принимается равной 960 px;
- использовать ограниченное количество цветовых оттенков — палитра для WEB включает 216 цветов;
- выбирать для изображений форматы файлов, допускающие высокое сжатие, например, JPEG (для анимированных картинок GIF, для картинок на прозрачном фоне PNG);
- метаданные (сведения о фотоаппарате, которым сделан снимок, о программе, в которой он обрабатывался, значения выдержки, диафрагмы, геоданные и др.) не нужны и для уменьшения размера файла их следует удалить.
Важно не забывать, что один из главных критериев оптимизации — баланс между уменьшением размера файла и сохранением детализации изображения.
Если, например, вы оптимизируете скриншот, на котором пользователь должен что-то прочитать, текст на оптимизированном изображении должен остаться хорошо различимым. В нечитаемой иллюстрации нет никакой пользы.
Другие примеры, когда высокая детализация изображения совершенно необходима: фото ювелирных украшений, вязаных изделий, репродукции гравюр и штриховых рисунков и т. п.
Однако перед оптимизацией стоит оценить исходное качество картинки и улучшить его настолько, насколько это возможно.
Начните с визуального качества
Это архиважный пункт:
- подправьте в фоторедакторе:
- яркость;
- контрастность;
- насыщенность;
- отрегулируйте баланс белого;
- выровняйте горизонт/вертикаль, если только наклон не задуман композиционно;
- увеличьте сюжетно важную часть кадра, обрежьте всё лишнее;
- чтобы скриншоты и изображения предметов на белом фоне не сливались с фоном страницы, добавьте к картинке рамку.
Качество фотографии — чёткость, нормальная яркость, точность цветов — напрямую влияет на восприятие иллюстрации читателем. Если фото слишком тёмное и детали неразличимы, смысла в нём нет. Вдобавок такие некачественные изображения раздражают пользователей и вынуждают их покинуть сайт раньше времени. Оно вам надо?
Инструменты для оптимизации изображения
Для подготовки изображений к загрузке на сайт используйте любой удобный инструмент. Все они дают примерно одинаковые результаты. Среди них есть узкоспециализированные, например, способные только сжать изображение, но есть и универсальные. Графические редакторы не только уменьшают размер, но позволяют также обрезать изображения, корректировать яркость, контраст и цвет.
Графический редактор
Все графические редакторы умеют изменять размер изображения, варьировать качество и степень сжатия данных, конвертировать файл из одного графического формата в другой. В программе Adobe Photoshop удобнее всего использовать для этого специальную команду:
Файл — Экспорт — Сохранить для Web
File — Export — Save for Web
или клавиатурную комбинацию Ctrl + Alt + Shift + S.
В открывшемся диалоговом окне установите следующие настройки:
- формат файла — JPEG;
- качество после сжатия, например, Medium;
- отметьте чекбокс Progressive, если хотите, чтобы изображение «проявлялось» постепенно;
- задайте размер изображения по ширине, например, 960 px.
Вместо выбора каждой настройки по отдельности, можно использовать подходящий пресет из выпадающего списка.
Переключаясь между вкладками Original и Optimized, посмотрите, как меняется картинка после сжатия по сравнению с исходной. Используйте подходящее значение Zoom (слева внизу). Если изображение не содержит мелких деталей или ими, с точки зрения содержания картинки, можно пренебречь, попробуйте ещё больше снизить качество и сократить размер файла.
Внизу слева программа показывает формат и размер файла после сжатия, а также длительность его загрузки при той или иной скорости интернета. Попробуйте разные значения настроек и посмотрите, как изменяется при этом размер файла. Свой набор настроек вы можете сохранить как отдельный пресет и использовать в дальнейшем для экономии времени.
Получившийся файл сохраните под желаемым именем.
Если вам необходимо подготовить к публикации снимки, полученные с фотоаппарата, и вы хотите сжать их, сохраняя точные цвета и детализацию, рекомендую вам посмотреть этот видеоролик. В нём, в частности, обсуждаются различные алгоритмы сжатия, вопросы выбора цветового пространства, улучшения резкости и др.
Графический редактор — универсальный инструмент. Он позволяет не только сжать изображение и конвертировать его в нужный формат, но и обрезать, задать соотношение сторон, добавить водяной знак, отрегулировать яркость, контраст и цветовой тон, внедрить в файл сведения об авторских правах и т. п.
При всех достоинствах полнофункционального графического редактора использовать его для оптимизации изображений не всегда возможно. Его у вас может просто не быть. Альтернативный вариант — воспользоваться одним из многочисленных онлайн-сервисов.
Онлайн-сервисы
По запросу «сжатие изображений онлайн» Яндекс выдаёт 17 млн результатов. Не надо далеко ходить: верхние строчки занимают сервисы сжатия изображений — выбирайте любой. Заходим, например, на сайт websiteplanet.com.
Можно загрузить сразу пакет изображений до 40 штук. Сервис обрабатывает их одновременно, а затем предлагает скачать одним архивом или сохранить на Google Диск или в Dropbox.
По такому же принципу работают и другие сервисы:
Все они дают примерно одинаковое сжатие. Пользователь не задаёт никаких настроек: загрузил файлы, подождал 2–3 минуты, скачал архив, распаковал, залил картинки на сайт.
Однако здесь есть узкое место: перечисленные сервисы сжимают изображение за счёт уменьшения качества, удаляют из файла метаданные, но никак не изменяют размер. Поэтому, если вы загрузите для сжатия картинку шириной 5000 пикселей, на выходе вы получите те же 5000 пикселей, хотя вам для вашего сайта хватило бы и 1000. Изображения получаются «недооптимизированными».
Большинство онлайн-сервисов оптимизируют изображения только частично: стирают метаданные и сжимают, не изменяя размер.
Сервис Image Optimizer позволяет задать максимальный размер изображения по ширине и высоте, но обрабатывает файлы онлайн только по одному. Если вы хотите сжимать картинки пакетами, вы можете скачать и установить десктопную версию Image Optimizer.
Плагины для CMS
Процесс сжатия изображений можно автоматизировать: специальные плагины сжимают изображения прямо во время загрузки в CMS. Один из таких плагинов Smush установлен на этом сайте, работающем на WordPress.
Помимо сжатия, у плагина есть другие полезные функции, например, отложенная загрузка. Изображения на странице загружаются не одновременно, а по мере просмотра их пользователем. В первую очередь загружается самая верхняя картинка, остальные — только если читатель до них дойдёт. Такой алгоритм сам по себе ускоряет загрузку страницы, особенно если на ней много изображений.
Вы можете попробовать другие плагины: TinyPNG, Optimus, Imagify или EWWW Image Optimizer. Они различаются дополнительными функциями и ограничениями. Например, бесплатный TinyPNG не позволяет оптимизировать больше 100 изображений в месяц. Зато плагин EWWW Image Optimizer даёт возможность указать файлы, которые сжимать не требуется. Это полезно, если на вашем сайте есть изображения, для которых важно сохранить мелкую детализацию. Это могут быть, например, фото ювелирных изделий и т. п.
Аналогичные по функционалу плагины есть для всех популярных CMS.
Оптимизация по шагам
- Убедитесь, что изображения выполняют главную задачу — поясняют и дополняют текст. Лишние изображения удалите.
- Отредактируйте изображения до наилучшего качества: обрежьте, отрегулируйте яркость, контраст, цвет.
- Уменьшите размер изображения до ширины контентной части страницы вашего сайта, например, до 960 px.
- Подберите степень сжатия, убедитесь, что иллюстрация сохраняет необходимую детализацию.
- Выберите наиболее подходящий формат файла и сохраните изображение в нём.
- Загрузите изображение в CMS.
- Заполните метатеги, сделайте подпись. Впрочем, это тема следующей статьи.
Если у вас появились вопросы, задавайте их в комментариях. И также делитесь своими соображениями об оптимизации изображений и интересным опытом.
Исчерпывающая инструкция. Спасибо!