Оптимизация изображений, включая сжатие и сокращение числа фоновых картинок с целью получения быстрого сайта
01.09.2018
Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Долгая загрузка страниц вашего ресурса может оказать негативное влияние на его продвижение, а, значит, и на востребованность среди пользователей сети, поскольку поисковики учитывают этот фактор при ранжировании.
Поэтому для ускорения сайта жизненно необходимо максимально и по всем возможным аспектам оптимизировать составляющие, способствующие отображению различных элементов проекта, причем сжатие изображений в качестве одного из этих мероприятий играет не последнюю роль.
Вообще, все изображения на любом веб-ресурсе существуют двух видов. Во-первых, создаваемые с помощью тега img с соответствующими атрибутами , который помещается в HTML код страницы. А во-вторых те, которые выводятся с помощью средств CSS. Мы разберем оба этих вида, чтобы произвести оптимизацию должным образом и в полном объеме.
Чистка фоновой графики для уменьшения HTTP запросов
Прежде, чем описать основные действия по оптимизации, в том числе сжатию картинок на сайте, представлю вам свои мысли по поводу удаления лишних фоновых изображений. Это позволит сократить количество HTTP запросов, что также способствует уменьшению времени загрузки.
Если вы используете для управления проектом один из движков , что для современных реалий является вполне обычным делом, то в шаблонах могут быть фоновые картинки, в том числе символы и значки, входящие в состав дизайна и присутствующие на всех страницах.
Для отображения каждой из таких картинок посылается HTTP запрос на сервер, где хостится сайт. Чем больше изображений, тем большее количество запросов требуется, что не только не способствует ускорению вебсайта, но и оказывает дополнительную нагрузку на сервер.
Вывод подобной фоновой графики реализуется посредством значения «url» CSS свойства background или background-image, указывающего путь до картинки:
background-image: url(images/image-1.jpg);В примере выше дана относительная ссылка на место расположения графического элемента, который в основном и используется. Однако, в правилах CSS вполне может быть прописан и абсолютный путь ( чем отличаются относительные и абсолютные урлы ), например:
background:url (//goldbusinessnet.com/wp-content/themes/tiny-forge/images/spriteme1.png) no-repeat;Необходимо проинспектировать всю фоновую графику и удалить элементы, которые, по вашему мнению, не будут полезными с той или иной точки зрения. При этом не забывайте убрать из файла стилей, определяющего дизайн страниц, свойства, которые соответствуют конкретной картинке. Этим вы не только ликвидируете ненужные HTTP запросы, но и частично очистите ваш стилевой файл от лишних строк, что тоже поспособствует общей оптимизации.
В WordPress, например, за оформление вебстраниц отвечает style.css ( тут читайте подробности того, как вообще устроена тема для движка Вордпресс ). Именно в этом файле необходимо будет ликвидировать правила background и background-image для фоновых изображений, которые вы пожелаете удалить за ненадобностью. Точно таким же образом следует поступать и в дальнейшем при редактировании шаблонов, когда возникнет необходимость корректировки.
Понятно, что если вручную перелопачивать все картинки, подгружаемые на странице, это отнимет много времени, особенно, если их немало. Для того, чтобы немного облегчить проведение такой операции, можно воспользоваться специализированными плагинами для популярных браузеров.
Очень удобным для подобных целей является Web Developer для Firefox (впрочем, для Хрома тоже имеется своя вариация ). После установки расширения в верхнем правом углу окна браузера появится значок шестеренки, при нажатии на который откроется список возможных опций:
Если выберете пункт «Outline Background Images» , перейдя во вкладку «Images» , то все графические элементы, отображаемые посредством CSS, будут обведены красной рамкой. Таким образом вы сразу сможете их отсортировать.
Для того, чтобы узнать свойства, которые нужно удалить из файла style.css, просто щелкните правой кнопкой мышки по нужной картинке и из появившегося контекстного меню выберите пункт «Просмотреть код», если пользуетесь Хромом (для других браузеров название опции может быть другим, но суть при этом не меняется).
Этим действием вы вызываете инструмент разработчика, который обязательно входит в состав базового функционала всех новейших версий популярных обозревателей и является аналогом описанного мною когда-то плагина Firebug для Мазилы , где справа для выбранного элемента и будут присутствовать стилевые правила с указанием точного места их расположения в style.css (номер строки):
Теперь известно не только местоположение картинки по значению параметра «url» (в примере на выше приведенном скриншоте это папка «images», располагающаяся в корне сайта), но также и соответствующие данному изображению свойства стилей.
Далее можете сразу удалить фоновую картинку из папки, если в дальнейшем она нигде не будет использоваться. При этом в процессе редактирования могут возникнуть различные ситуации:
1. Вы желаете просто убрать фоновую картинку, но сохранить блок, в который она входит. При этом изображение может являться анкором ссылки на другую страницу или на внешний ресурс, правда, реализованным посредством CSS. Тогда возможно, например, заменить изображение текстом, вставив его между открывающим и закрывающим тегом a. При этом, естественно, следует удалить свойство «background».
Примером элементов фоновой графики служат значки напротив названия каждой из рубрик, которые часто используются в оформлении страниц. В этом случае нужно также ликвидировать лишь «background» или «background-image» в составе селектора, соответствующего данному классу или идентификатору CSS .
Очень вероятно, что в обоих этих случаях придется немного подкорректировать правила CSS, прописанные для этого класса, чтобы сохранить корректность дизайна.
2. Есть задача избавиться от картинки вместе с сопутствующими элементами. Тогда удаляются все составляющие из шаблона и стили для данного селектора. Конечно, те или иные классы могут использоваться в различных местах, это быстро и сразу не всегда возможно отследить.
Поэтому лучше для начала удалить из стилевого оформления правила «background-image» и/или «background», а уж затем подчистить весь файл style.css с помощью специальных средств.
Завершающим аккордом вы можете объединить некоторые фоновые картинки в так называемые CSS спрайты , что тоже поможет уменьшить количество HTTP запросов к серверу.
Оптимизация изображений для сайта
Теперь рассмотрим все необходимые действия, которые позволят по максимуму оптимизировать используемые картинки для получения быстрого сайта:
1. Начальные действия по оптимизации . При использовании уже готовых изображений для страниц веб-ресурса, взятых из интернета (для этого к вашим услугам различные фотохостинги, а также фотостоки и фотобанки, где можно подобрать картинки по теме и скачать их, в том числе бесплатно) либо при их формировании в различных редакторах (например, в Photoshop или его упрощенном аналоге Pixlr ) очень важно произвести с ними некоторые базовые операции.
Во-первых, если вы компонуете картинку из нескольких независимых фрагментов (я, например, нередко создаю таким манером скриншоты для большей наглядности), то желательно составить их таким образом, чтобы оставалось минимум пустого пространства между отдельными частями.
Во-вторых, в любом варианте следует производить обрезку всех изображений для минимизации их размеров в пикселах (ширины — width и высоты — height), что отнимет дополнительные миллисекунды от времени загрузки страницы. Это можно реализовать в любом мало-мальски раскрученном редакторе, иногда даже удобнее это делать в простенькой программе Paint, входящей в базовый функционал операционной системы Windows.
Однако, картинка не должна быть слишком маленькой, ведь интересы пользователей на первом месте. Здесь трудно оперировать конкретными цифрами, поскольку универсального варианта не существует, и многое зависит от тематики ресурса, дизайна и т.д.
2. Выбор формата картинки . Если вы используете обычные изображения со сложными переходами, то для веба их лучше всего сохранять в форматах растровой графики GIF, PNG или JPEG. А вот для картинок, состоящих из простых геометрических фигур, лучше использовать векторный формат SVG (он нередко применяется для создания логотипов).
Но, поскольку именно растровая графика востребована в подавляющем числе случаев, выясним, для каких картинок подходит тот или иной формат этой категории:
PNG — для контрастных изображений, в которых необходимо сохранить качественную прорисовку мелких деталей или присутствующего на них текста. Поэтому включенные на этом блоге в контент статей скриншоты, на которых очень часто имеются пояснительные надписи, я сохраняю обычно в этом формате. К слову, PNG еще и поддерживает прозрачный фон, что тоже может быть существенным при выборе графики; JPEG — для фотографий, а также картинок и скриншотов подобного типа с плавным переходом цветовой гаммы; GIF — для анимированных изображений.Прошедшая посредством выше описанных действий подготовка способна внести свою лепту в общую оптимизацию, поэтому ни в коем случае не пренебрегайте ею.
3. Сжатие картинок . После того, как изображения соответствующим образом подготовлены, в том числе оптимизированы их размеры по ширине (width) и высоте (height) в пикселах, самое время уменьшить их размер в байтах ( что это ?), который во избежание путаницы вполне можно именовать "весом", хотя это и не совсем корректно.
Минимизация веса графики, включая фотографии, и является по своей сути процессом сжатия, который можно осуществить с помощью специализированных средств (онлайн сервисов либо программ). В этом плане мне давно уже приглянулся сайт PunyPNG , в котором лучше всего сжимать графические файлы в формате PNG (хотя JPEG и GIF там тоже поддерживаются):
Жмете кнопку «Upload Images» для загрузки одного или нескольких файлов и спустя мгновения уже получите результат. На скриншоте видно, что подвергнутые стандартной компрессии ( без потери качества ) изображения сжаты весьма эффективно (на 38 и 39 процентов).
Обратите внимание, что наряду с ними PunyPNG выдал образцы, подвергнувшиеся сжатию с потерями (lossy), вес которых меньше веса оригинала в 3 раза и даже больше (на 63% и 71%). При этом совсем необязательно, что их итоговое качество при визуальном восприятии окажется заметно хуже по сравнению с картинками, сжатыми без потерь.
В любом случае, вы вольны скачать полученные файлы выборочно (кнопки «Download» напротив каждого файла) либо все разом в уже упакованном архиве ZIP для визуальной оценки. Правда, имейте ввиду, что сжатые с потерями изображения доступны для скачивания только после регистрации и последующего приобретения одного из платных тарифов (надпись «PRO ONLY»).
Для того, чтобы ускорить и объединить процесс создания изображений и последующей их оптимизации вполне разумно применить в своей работе редактор, например, уже упомянутый мною выше Фотошоп, где можно сохранять готовые картинки для Web, в связке с программой, имеющей в своем функционале алгоритм сжатия.
Однако, далеко не все в полной мере свободно владеют всеми нюансами работы в Фотошопе, а их изучение требует значительных затрат времени. К счастью, есть вполне адекватная альтернатива в виде онлайн инструмента Пикслр (ссылка на материал о нем дана выше, в самом начале этого раздела статьи), опции которого напоминают фотошоповские, но он проще для освоения.
Можно, например, поступить следующим образом. Создать нужную картинку в Pixlr, предварительно сохранить ее в нужном формате (как его выбрать, описано в пункте 2), а затем применить возможности программы FastStone Image Viewer и сжать до оптимальных кондиций .
Причем, программа Фастстоун дает возможность предварительно просматривать результат оптимизации и сравнить его с оригиналом. Например, степень сжатия фотографий, которые по определению должны сохраняться в формате JPEG, можно регулировать с помощью ползунка, чтобы добиться оптимального баланса в соотношении «размер — качество»:
4. Указание реальных размеров изображения . Оптимизация картинок непременно включает и это условие в том числе. Добавляя атрибуты widht и height при вставке картинки в HTML код страницы, обязательно указывайте их действительные значения.
Скажем, если размер фотографии 550 × 300 после завершения всех шагов оптимизации и в таком виде она загружена на хостинг, то параметры ширины и высоты должны быть соответствующими:
Почему это важно? Если вы вставляете в контент большую картинку и в целях корректировки задаете нужный размер в пикселах с помощью widht и height, то, естественно, браузер послушно исполнит указания и изменит действительные параметры ширины и высоты на требуемые.
Но при этом вес (размер в байтах) изображения останется прежним, а это никак не ускорит загрузку вебстраницы. Вот поэтому перед закачкой картинки на сервер необходимо полностью ее оптимизировать, окончательно установить размер и в дальнейшем не изменять его.
Хотя widht и height не являются обязательными атрибутами для тега img с точки зрения правил HTML, лучше их указать. В этом случае браузер сразу зарезервирует место для отображения графического элемента, что даст возможность еще быстрее его загрузить.
Надеюсь, все описанные выше шаги помогут вам, сэкономив дополнительные миллисекунды при загрузке страниц сайта, но при желании можете дополнить свои знания, почитав руководство по оптимизации от самого Гугла (для этого перейдите по данной ссылке).
Выполнение рекомендаций PageSpeed по сжатию картинок
Чтобы проверить, насколько оптимизированы ваши графические объекты, можно воспользоваться специальным онлайн сервисом Google PageSpeed Insights , который вынесет свой вердикт и даст практические рекомендации для исправления ситуации, ежели она того требует. Даю в качестве примера итог тестирования, проведенного с помощью этого инструмента, для одной из своих страниц записей в отношении изображений:
В самом верху страницы анализа Пейдж Спид выводит оценку общего уровня оптимизации по 100-бальной шкале . Данная веб-страничка изначально получила всего 62 балла из 100 для мобильных устройств (вы можете в этом убедиться, если, перейдя по данной выше ссылке, ознакомитесь с материалом о PageSpeed Insights, в котором есть соответствующий скриншот).
Это является чрезвычайно низким результатом, требующим немедленного вмешательства. Кстати, выполнять рекомендации Page Speed лучше всего на основе именно оценки для мобильников, поскольку уровень оптимизации для персональных компьютеров обычно выше.
Поскольку на этом блоге для страниц со статьями, результаты анализа одной из которых представлены выше, я изначально осуществлял сжатие картинок в соответствии с описанными в этой публикации правилами, именно касательно графических элементов картина оказалось не такой ужасной, как в отношении остальных ресурсов (скриптов, CSS и т.д.).
Гугл Пейдж Спид не нашел недочетов, например, в отношении основных картинок, вставленных в статью (первое изображение для всех постов у меня обычно в формате JPEG, а скриншоты, которых немало, сохранены в PNG). Остались лишь рекомендации PageSpeed для графики, подгружаемой со сторонних ресурсов, на которые я повлиять не в состоянии.
У вас же может оказаться более плачевная ситуация, вследствие чего придется сжимать все имеющиеся в составе контента страницы (а, возможно, и сайта) графические элементы. Поэтому прямо сейчас я хотел бы остановиться на ситуации, когда Пейдж Спид показывает необходимость сжатия основных изображений.
Конечно, это может быть исключительно в том случае, если вы ранее не уделяли должное внимание оптимизации графики и только сейчас озаботились этим вопросом. Что же тогда предпринять, если ваш сайт уже напичкан картинками, требующими сжатия?
Ну один вариантов решения этой проблемы лежит на поверхности. Дело в том, что в результате анализа инструмент Page Speed не только предоставляет оценку уровня оптимизации и пути исправления ситуации, но и дает после результатов анализа еще и ссылку на скачивание уже оптимизированных ресурсов для тестируемой страницы, включая изображения:
Вы можете воспользоваться этой возможностью и скачать на компьютер сжатые Гуглом картинки, запакованные в архив ZIP. А затем, предварительно распаковав их, закачать на сервер с помощью, например, Файлзилла ( здесь об этом софте подробные сведения ), причем в ту же папку, где хранятся исходные графические файлы с заменой последних.
Однако, такой подход к решению этой задачи не всегда удобен, хотя алгоритмы сжатия, применяемые Гуглом, весьма и весьма качественные. Подобный вариант можно с успехом применить, ежели у вас на сайте несколько десятков страниц, не больше. Ведь каждую из них придется подвергнуть анализу в Page Speed, поскольку графика в контенте на вебстраницах обычно разная. Примером могут служить статьи, включающие изображения на блогах.
Итак, если у вас много элементов графики в составе контента вебстраниц и вы наверняка знаете, что они требуют проведения процедуры сжатия, можно оптимизировать одним действием сразу целую группу изображений в пакетном режиме .
Для этого вы в силах привлечь один из онлайн сервисов , использующих качественные алгоритмы и позволяющих загружать сразу несколько файлов. Нет сомнения, что одним из самых лучших для сжатия графики в формате PNG является уже упомянутый мною PunyPNG.
Конечно, вы вправе произвести операцию в бесплатном режиме, загружая поочередно группы по 20 файлов, скачивая уже оптимизированные образцы на компьютер и закачивая их на сервер.
Правда, необходимо учитывать очень важный нюанс. Оптимизированные картинки обязательно нужно помещать в ту же папку, где расположены оригиналы, с заменой последних, иначе пути для изображений будут изменены и картинки не будут отображаться на сайте. Тогда для исправления положения вам придется вручную корректировать все URL.
Приведу пример. В Вордпресс, скажем, по умолчанию все изображения, загружаемые для постов, находятся в папке «Uploads» и распределяются в подпапках по годам и месяцам , поэтому полный урл до отдельно взятого графического файла выглядит примерно так:
//goldbusinessnet.com/wp-content/uploads/2012/06/optimizatciia-izobrazhenii.jpgЕсли у вас такая же ситуация, то поступать надо следующим образом. Взяли группу файлов из одной поддиректори (/2012/06/) и, загрузили на сервис, сжали их и вновь закачали туда же, заменив оригиналы. Затем процесс повторяется для другой подпапки и т.д.
Но, если файлов слишком много, вполне разумно будет зарегистрироваться на сайте PunyPNG и сделать апгрейд до нужного вам тарифа. Тарифный план Basic, например, облегчит ваш карман всего на 1 доллар в месяц, но зато позволит за тот же период подвергнуть качественной компрессии 3000 графических файлов. Более того, у вас появится возможность сжать их как с потерями, так и без потерь.
Другой способ осуществить пакетное сжатие — призвать на помощь ПО , установленное на компьютере. В качестве примера могу предложить тот же самый FastStone (ссылка на материал о нем в предыдущем разделе статьи), приглянувшийся мне еще и потому, что с помощью этой программы я делаю скриншоты для статей.
Чтобы провести операцию массового сжатия графических файлов, перейдите в нужную папку, где они располагаются, в верхнем меню нажмите «Сервис»:
Затем из контекстного меню выберите пункт «Пакетное преобразование/переименование», после чего откроется дополнительное окно с настройками, где следует открыть вкладку «Пакетное преобразование»:
Слева будет список содержащихся в выбранной вами папке графических файлов. Чтобы отфильтровать их перед началом процесса, установите нужный формат (JPEG, PNG, GIF) из выпадающего списка внизу слева, а также выходной формат для уже сжатых изображений.
В целях систематизации неплохо бы поместить оптимизированные картинки в отдельное место («Выходная папка»), чтобы не случилось затем путаницы. Для этого можно выбрать либо уже существующую папку, либо создать новую.
Далее добавляете подлежащие компрессии элементы в правое окошко с помощью одноименной кнопки, производите нужные настройки, которые будут доступны в результате нажатия кнопочки «Установки», и жмете «Старт» для запуска операции. После того, как сжатие завершится (более подробное описание этого процесса в Фастстоуне найдете здесь), действуете по описанной выше схеме, заменив находящиеся на сервере графические файлы на оптимизированные.
Наверное, ради разнообразия следует еще добавить парочку плагинов для WordPress , которые помогают оптимизировать уже имеющиеся изображения на сайте:
WP Smush.it — сжимает картинки, находящиеся в любом каталоге, имеет совместимость практически со всеми медиа-библиотеками; EWWW Image Optimizer . Основные преимущества: автоматическая оптимизация фона, плавная обработка пикселов, наилучшее соотношение «сжатие — качество», высокий уровень безопасности, хранение бесплатных оригиналов в течении 30 дней;Как обычно, в конце предлагаю видео, которое поможет восполнить возможные пробелы по сегодняшней теме и больше понять суть и необходимость оптимизации графики: