Уменьшить вес изображений для веб

Количество изображений на сайтах растет с каждым днем. Многие публикации теперь обходятся почти без слов и по сути представляют собой набор иллюстраций с подписями.

И все бы хорошо, но изображения ощутимо тяжелее "классического" содержимого интернета - текста. Если замерить размер каждой страницы, то откроется страшная правда: около 3/4 ее "массы" приходится на картинки.

А на сайтах с минимальным количеством текста - и того больше. Практически нормой стали страницы в 8-15 Мб. Отсюда - длительная загрузка, когда даже современные скорости передачи данных со всеми 3G и 4G не спасают. Если же учесть, что эти самые мегабайты еще и нещадно расходуют трафик (что особенно актуально для мобильных устройств)...

С другой стороны, с увеличением разрешения экранов компьютеров и смартфонов нужны все более качественные - а значит, «весомые» - изображения. Однако, тот же Google отмечает, что на долго загружающихся сайтах пользователи проводят меньше времени, чем на "легких". Как же можно соблюсти баланс между скоростью загрузки и качеством графического контента? Ведь понятно, что развешивать на страничках рисунки размером с почтовую марку - не выход. Но, несмотря на кажущуюся беспросветность ситуации, все же есть пара приемов, которые помогут существенно облегчить сайт без потери качества и зрелищности.

Использование современных веб-технологий

До сих пор на многих веб-страницах в качестве фона задействуют растровую и векторную графику. Хотя уже давно возможно заменить ее правилами CSS. Современная версия этой технологии (часто ее называют CSS3, но это, строго говоря, не совсем корректно: спецификация нынче состоит из отдельных модулей, многие из которых имеют совсем не третью, а всего лишь первую версию) позволяет "окрашивать" фон градиентами и даже узорами, добавлять тени и выпуклости к тексту, «рисовать» многоцветные рамки изощренной формы и т. д. Конечно, полноценное фото средствами CSS не создашь, но очень многое новый стандарт уже умеет.

Правильный выбор формата графических файлов

Без картинок на сайтах сегодня обойтись не получается, но, по крайней мере, стоит внимательно отнестись к тому, какой формат для какого типа графики использовать. В основном на веб-страницах задействуются три типа файлов: PNG, JPG (JPEG) и GIF. Тут очень важно отдавать себе отчет в том, для каких целей лучше подходит каждый из форматов. Если коротко, то основные правила примерно следующие:

JPG

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

PNG

Самое большое преимущество PNG - способность поддерживать прозрачность. А недостаток - малое количество цветов, резкие переходы между ними. Учитывая эти характеристики, напрашивается сфера применения: PNG оптимально подходит для логотипов, диаграмм, всевозможных графиков. Для уменьшения размера можно использовать PNG-8. Там же, где больше цветовых оттенков и требуется более высокое качество, лучше использовать PNG-24. Но такой файл будет несколько потяжелее.

GIF

Все еще достаточно распространен, особенно на старых сайтах. Но сейчас «прыгающие» картинки (основное преимущество формата - возможность создания анимаций) теряют популярность, все больше вызывают раздражение посетителей сайта. Поэтому использовать GIF нужно очень аккуратно, только когда совсем нет альтернатив. А альтернативы есть: для размещения коротких видеосюжетов, для которых чаще всего задействуют GIF, гораздо больше подойдет MP4 - его файлы в разы легче.

Надо сказать, разработчики не бездельничают: постоянно идут эксперименты с новыми форматами графики. И «приспособить» их стараются прежде всего под интернет. Из самых перспективных можно упомянуть два.

Первый - это SVG. Предназначен он, в отличие от других, широко используемых сегодня форматов, не для растровых изображений, а для вектора (который раньше в сети практически не использовался). Прежде все векторные картинки (ярчайшими примерами которых являются логотипы) перед размещением в интернете обязательно конвертировали в тот же PNG. Но теперь векторные рисунки можно размещать на сайтах и в «родном» формате. Главное преимущество такого подхода - масштабируемость. То есть, вне зависимости от размеров экрана и увеличения, такая картинка будет смотреться одинаково хорошо, без привычных при большом увеличении у растровых файлов плохого качества «зубчиков» и «ступенек».

Еще один многообещающий новичок - WebP. Его активно продвигает Google. А уж если эта компания за что берется, то как правило, своего добивается. Пока, правда, успехи не очень велики: не все браузеры работают с WebP, в настольных операционных системах тоже нет средств для его просмотра. Хотя достоинств у этого формата много. И одно из самых главных - крайне маленький размер файла при довольно высоком качестве. Как раз то, что и требуется от веб-графики.

Например, эта картинка в формате JPEG имеет размер в 193 Кб, ее же «производное» в WebP- всего лишь 96 Кб. Как видим, экономия существенная.

Сжатие файлов

А пока разработка и поддержка WebP еще толком не «допилена», для уменьшения размера картинок можно воспользоваться специальными «сжимателями» - оптимизаторами. Раньше наилучшим способом создания оптимизированного изображения была специальная процедура в Photoshop или другом редакторе. Обычно она называется «Оптимизировать для WEB» или «Сохранить для WEB». При таком способе обработки размер конечно становится меньше, но, как правило, в той или иной степени страдает качество, о чем графические редакторы честно предупреждают пользователя, выводя в окне предпросмотра перед сохранением несколько возможных вариантов разного "веса".

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

Позволяет загружать изображения размером до 10 Мб. Состоит всего из одной странички и выполняет единственную функцию - облегчение изображений при сохранении их качества. Которое, кстати, получается довольно высокого уровня, что не может не радовать.

Разные файлы сжимаются в разной степени (от чего это зависит - секрет используемых технологий). Но факт остается фактом: уменьшение размера составляет от 10% до 80%!

Одна подробность: кириллические названия файлов сервис «не понимает», поэтому перед загрузкой их лучше сразу сменить.

Результат можно сохранить на компьютер или загрузить на облачный диск: поддерживаются Google Drive и Dropbox.