Оптимизация изображений для блога на движке WordPress

Давным-давно, около 20 лет назад был Mosaic. Часто время выхода Mosaic сравнивают с появлением современного интернета. Mosaic был первым браузером, который мог показывать изображения вместе с текстом, в отличие от остальных того времени, которые показывали их в отдельном окне. Хотя Mosaic не был самым первым графическим браузером, он получил широкое распространение.

Тогда экраны с 256 цветами были достаточно новыми, и все пользовались dial-up для выхода в интернет, и основной целью было в принципе показать изображение пользователю, какого качества оно было, считалось уже вторичным.

Перенесемся в сегодняшний день, все совершенно по-другому. Пользователи покупают мониторы с все более и более высоким разрешением, и естественно в этой ситуации изображения на сайте уже должны выглядеть отлично. С другой стороны, страницы сайта должны загружаться моментально, в том числе и на мобильных устройствах. Так как же добиться того, чтобы изображения быстро загружались без потери их качества? Ниже будут рассмотрены основы оптимизации изображений перед публикацией в WodrPress.

Тут действительно нужна картинка?

Естественно первый вопрос, который стоит задать себе, а действительно ли в этом месте нужна картинка? Может быть есть возможность заменить ее, ведь текст, символы, на изображении, могут быть заменены web-шрифтами и другими css-эффектами, которые загрузятся гораздо быстрее картинок. Все текстовые элементы типа кнопок, текстовых баннеров, заменяйте на варианты без изображений. Если все еще есть места где необходимо использовать картинки, читайте дальше.

Растр или вектор?

Растровые изображения состоят из сетки, с фиксированным количеством пикселей. Они плохо масштабируются, увеличение изображения приводит к неровностям, пикселизации. Фотоснимки цифровых камер, или изображения созданные в программах типа Adobe Photoshop, все это растровые изображения. От настроек качества сохраняемого изображения зависит и его размер. Например это может быть изображение с разрешением 7360 x 4912, снятое на хорошую цифровую камеру; размер такого снимка может превышать 36Мб. Очевидно, что это гораздо больше, чем требуется.

В отличие от растровых, где четко задан каждый пиксель векторные изображения построены математически. Их хорошо использовать для простых изображений, таких как логотипы, текст, иконки и т.п. поскольку они построены математически, при увеличении или уменьшении результаты пересчитываются, изображение строится заново и остается таким же четким.
Такие изображения создаются в программах типа Adobe Illustrator и хранятся в формате SVG (Scalable Vector Graphics). Не смотря на то, что WordPress запрещает использование формата SVG по соображениям безопасности (в теории файл SVG может содержать вредоносный код) есть плагины, которые позволяют обойти данное ограничение. Стоит отметить, что доступ к данной возможности предоставляйте только администраторам. Еще один момент заключается в том, что не все браузеры полностью поддерживают этот формат, поэтому используйте версию 1.1 формата, которая вышла в 2011 году и является актуальной на данный момент.

JPEG, GIF или PNG?

Современные браузеры поддерживают много растровых форматов; JPEG/JPG самый популярный. В рекламных баннерах часто используется формат GIF, он поддерживает 256 цветов. У PNG (Adobe’s Portable Network Graphics) гораздо меньше ограничений, в сравнении с JPEG или GIF теоретически он может стать стандартом Web-изображений.

У каждого из этих форматов есть плюсы и минусы. JPEG позволяет добиться хорошей компрессии файлов при сохранении качества. В JPEG используется метод сжатия lossy, такой же, как в MP3 аудио. В процессе сжатия, часть информации о изображении (пиксели) удаляется и вернуть ее уже не удастся. При высоком сжатии в формате JPEG появляются большие артефакты на изображении (пятна в больших областях одного цвета, размытые края). JPEG не поддерживает прозрачность. Т.е. все, что не залито каким-либо цветом, по умолчанию становиться белым, и если у вас не белый фон на сайте, это естественно станет тут же видно.

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

В PNG изображения получаются высококачественными, т.к. это формат сжатия без потерь. Но при этом PNG не так хорошо сжимаются как JPEG. PNG поддерживает прозрачность.

Лучшим инструментом для работы с растровыми изображениями считается Adobe Photoshop, хотя есть и другие программы, например бесплатный GIMP, или Pixelmator, или онлайн сервисы по работе с изображениями (напр. PIXLR).

Примеры ниже основаны на работе с Adobe PhotoShop CC.

Размер изображения

При работе с фото снятыми на цифровую камеру, первое что нужно сделать — уменьшить разрешение снимка. Это можно сделать в меню Image (Изображение), далее Image Size (Размер изображения). Не забудьте поставить галочку Constrain the Aspect Ratio (сохранять пропорции), далее измените ширину или высоту до необходимых, вторая величина будет рассчитана автоматически в пропорции.

Размер готового изображения должен совпадать с размерами указанными в HTML/CSS коде страницы. Возможно захочется оставить изображение большего размера, т.к. браузер все равно сожмет его до необходимых размеров при формировании страницы, не стоит этого делать, т.к. на эту процедуру браузеру тоже нужно время и в итоге готовая страница появиться чуть позже у пользователя.

Теперь поговорим о снижении глубины цвета (Bit Depth). Лучшие камеры сейчас позволяют использовать до 14 бит на канал. Часто фотографы работают в 16 или 32 битном режиме для сохранения качества фото, до момента финальной публикации. Это составляет огромную цветовую гамму, которая все равно не будет отображаться на большинстве sRGB мониторов. Если изображение еще не в режиме 8-бит, переведите его в этот режим. Это можно сделать в меню Image (Изображение) -> Mode (Режим) -> 8 Bits/Channel (8бит/канал). Это сразу же уменьшит размер выходного файла.
Хотя я рекомендую редактировать изображения до загрузки в WordPress, можно использовать и встроенные средства WordPress, а именно Media Library (Медиафайлы) для ресайза картинок. Например, если мое изображение 1000 x 621, а я хочу всего лишь 300 x 186, кликните Edit Image (редактировать) внизу.

Optimizing Your Images for WordPress
Появиться окно с разными опциями редактирования изображения.

Optimizing Your Images for WordPress
Затем в поле Scale Image (Масштабировать) изменяем первое значение (ширина) на 300, высота автоматически будет пересчитана и станет 186 пикселей, затем нажмите Scale (Масштабировать), чтобы увидеть как изменилось изображение и затем, если все ок, Update (Сохранить).

Optimizing Your Images for WordPress
Как видите, новый размер изображения 300 x 186, а так же уменьшился размер файла с 913KB до 110KB.

Save As или Save for Web (Сохранить как… или Сохранить для ВЕБ и устройств)

В идеале, ваша камера настроена так, чтобы сохранять снимки в raw, далее вы конвертируете их в TIFF 16 бит и потом обрабатываете. Как только вы обработали изображение и сделали ресайз под необходимый размер перед вами встает выбор в каком формате сохранить изображение, и какого качества (и соответственно размера).

Optimizing Your Images for WordPress
Как видно на скриншоте выше, в uploader (загрузчике) Media Library (Медиафайлов) WordPress`а установлено ограничение на максимальный размер загружаемого файла. На самом деле это гораздо больше, чем вам реально понадобиться. Ограничения в меньшую сторону нет, чем меньше будет файл, в разумных пределах, тем лучше.

В кодексе WordPress даны рекомендации на размер загружаемых файлов — изображения высокого разрешения размером 60-100 Кб, маленькие и низкого разрешения — 30Кб и меньше.
Также когда вы сохраняете готовое изображение используя Save As (Сохранить как…) вы не используете всех возможных настроек оптимизации. Если вы пользуетесь не PhotoShop, а другим редактором, посмотрите, при сохранении обязательно должны быть настройки формата готового изображения и его качества, если вы сохраняете в JPEG. Заранее нельзя однозначно сказать с какими настройками вам стоит сохранить изображение, поэксперементируйте немного, добиваясь оптимального соотношения размер-качество.

С другой стороны если вы сохраняете используя Save for Web (в PhotoShop), вам будет доступна возможность предпросмотра результата, и куча опций оптимизации. Кроме изменения Bit depth в диалоговом окне вы можете сразу сделать ресайз (масштабирование) изображения. Настройки в этом окне интуитивно понятны.

Как правило я ставлю галку Progressive (Чересстрочно), чтобы люди с медленным соединением могли видеть как изображение постепенно появляется. Так же убедитесь что Convert to sRGB (Преобразовать в sRGB) активна.
При изменении опций смотрите на результирующий, приблизительный, размер сохраняемого файла.

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

Что делать с изображениями, которые вы уже загрузили в WordPress

Если во время чтения этой статьи вы думали что же делать с сотнями или даже тысячами уже загруженных изображений, не расстраивайтесь, не все потеряно.

Первым шагом с помощью плагинов проверьте скорость загрузки страниц, возможно дело не только в изображениях. Существует множество способов ускорить работу сайта на WordPress.
Так же вам смогут помочь множество плагинов по автоматическому сжатию изображений. Вот, например, несколько из них:

EWWWW Image Optimizer
WP Smush.it
Imsanity

Подытожим

Итак, подведем итог, вот краткий список того что вам надо сделать/проверить для оптимизации изображений, перед публикацией в WordPress:

* Изображение действительно нужно или его можно заменить вставкой спецсимволов и т.п.
* Есть возможность использовать векторное изображение вместо растрового?
* Выберете наиболее подходящий формат: GIF для небольших, возможно анимированных изображений, в 256 цветов. JPEG хорошо сжимается, но при большом сжатии очень сильно теряет в качестве. PNG сохраняет качество, поддерживает прозрачность, но по объему больше.
* Редактируйте изображение с максимальным разрешением и глубиной цвета, до момента публикации.
* Если пользуетесь PhotoShop`ом всегда используйте Save for Web вместо Save As.
* При редактировании изображений вносите изменения последовательно, по составленномву вами мини-плану, помечайте себе удачный настроки при работе с теми или иными изображениями.

Оригинал статьи тут: http://www.sitepoint.com/optimizing-your-images-for-wordpress/

2 Комментарии “Оптимизация изображений для блога на движке WordPress

Добавить комментарий