Posted on By seodiz_baza_

Оптимизация изображений (картинок и фотографий) сайта

оптимизация сайта и его картинок

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

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

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

Как оптимизировать изображения

Для начала рассмотрим процесс оптимизации изображений и фотографий перед их публикацией в статье. В зависимости от размера и качества вес каждой неоптимизированной картинки или фотографии может достигать астрономической величины 100Kb или даже 200Kb, что можно сравнить с текстовым документом состоящим примерно из 35 тыс. слов или 200.000 символов. Ну как впечатляет? По сути это целая книга или диссертация из 110 стандартных формата A4 страниц.

Оптимизация картинок и фотографий для публикации на сайте

Для того, чтобы публикуемые вами изображения имели хорошее качество но небольшой вес их следует сохранять в соответствующем и наиболее оптимальном для каждого их типа формате. Самые распространенные форматы изображений: JPG, GIF и PNG (8 или 24).

JPG — самый оптимальный формат для фотографий и многоцветных изображений с большим количеством оттенков и полутонов. Изображения в этом формате имеют расширение .jpg и имеют самое лучшее качество при относительно небольшом весе файлов.

GIF — весьма популярный формат графических изображений более низкого качества (не более 256 цветов), поддерживающий прозрачность и анимацию и именно поэтому его чаще всего используют для создания анимированных баннеров, иконок, аватаров и других картинок сайта с расширением .gif.

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

Поэтому этот формат оптимально использовать для фоновых картинок с градиентом, красивых иконок с прозрачными участками. Единственным минусом этого формата является отсутствие поддержки в ранних версиях браузера Internet Explorer (IE 5,5-6), который обходится применением css-хаков.

Но это еще не все. Мы можем уменьшить вес изображений еще больше, но для этого нам понадобится графический редактор изображений. Лично я при работе с изображениями использую Photoshop (куда уж без него) и PaintNet (бесплатная программа для работы с изображениями) и именно на их примере я обьясню как оптимизируются изображения для сайта.

В Фотошопе: открываем изображение, на вкладке ФАЙЛ (File) жмем на пункт СОХРАНИТЬ ДЛЯ WEB (Save for Web) и во всплывающем окне выставляем нужный формат и качество изображения.

На скриншоте хорошо видна разница между неоптимизированной фотографией (вес: 269K) и оптимизированной (я понизил качество до 70% а вес фотографии уменьшился до 35,18K, это почти в 8 раз).

В Paint.Net: открываем изображение, на вкладке ФАЙЛ выбираем пункт СОХРАНИТЬ КАК…, во всплывающем окне вводим желаемое название файла, жмем на кнопку СОХРАНИТЬ и во всплывшем окне выставляем нужное качество изображения в процентах.

Как видите я выбрал для использованной в примере фотографии те-же самые 70%, но полученный результат, превзошел даже полученный Фотошопе (чего я и сам не ожидал). Напомню, исходный вес изображения у нас был 269K, фотошоп при качестве 70% сжал его до 35K, a Paint.Net до 22,5K.

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

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

Оптимизация фоновых изображений, используемых в дизайне сайта

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

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

  • Использование спрайтов — все используемые изображения и картинки собираются в один файл (спрайт, как правило это png) и выводятся в нужном месте при помощи позиционирования в CSS (свойством: background-position).
  • Кодирование изображений в base64 — реальные изображения весят намного больше, чем их закодированная в формате base64 текстовая версия. Я обычно использую онлайн сервис, при помощи которого можно не только кодировать но и раскодировать любое изображение

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

Читайте также: изображения оптимизация