Объявление:
Наши контакты: +7 (928) 029 69 59, +7 (909) 493 69 59

Создание и продвижение сайтов в Пятигорске, Черкесске и Ставрополе WEB студия DigitalART предоставляет услуги по разработке и созданию сайтов в Черкесске, Пятигорске и Ставрополе. Так же Мы предоставляем услуги по поисковой оптимизации и продвижению сайтов Черкесска, Ставрополя и Пятигорска в поисковых системах. Более подробные условия заказа создания или продвижения сайта в Ставрополе, Пятигорске или Черкесске, Вы можете узнать по телефонам +7 (928) 029 69 59, +7 (909) 493 69 59 Разработка и раскрутка сайтов в Черкесске, Ставрополе и Пятигорске 

Последние работы по созданию и продвижению сайтов нашей WEB студии в Ставрополе, Черкесске и Пятигорске

Дизайн-студия DigitalART » Photoshop,WEB графика » Оптимизация изображений для WEB сайта
20.01.2012

Оптимизация изображений для WEB сайта

Оптизация изображений для WEB

Оптимизация изображений для WEB сайта. Ускоряем свой сайт за счет оптимизации изображений сайта.

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

Давайте рассмотрим все этапы оптимизации изображений для WEB более подробно.

Шаг 1. Сохраняем изображения для WEB в Photoshop.

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

При создании изображений для WEB в Photoshop, нам нужно сохранять изображения не как обычно, а использовать стандартную возможность сохранения изображений для WEB, заложенную разработчиками программы (Файл -> Сохранить для WEB и устройств…).

Давайте сравним для наглядности все способы сохранения изображений.

Мы для примера будем использовать наш логотип, размером 500px на 500px. Давайте сохраним его привычным способом (Файл -> Сохранить Как…)

Оптимизация изображений для сайта
Оптимизация изображений для WEB сайта
Оптимизация картинок для WEB сайта

Теперь давайте сохраним тоже изображения через Файл -> Сохранить для WEB и устройств…

Оптизация изображений на сайте

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

Мы, для сохранения нашего логотипа выбрали PNG-8 и сократили палитру цветов до 32. В результате мы получили оптимизированное для WEB изображение, объем которого составил 21,92 Кб, против 91,1 Кб, при сохранении изображения обычным способом.

Удаляем из изображений не нужные метаданные.

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

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

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

Оптимизировав изображение с нашим логотипом, с помощью данной программы, мы получили выигрыш в 2 Кб, и объем оптимизированного изображения составил всего 19 Кб.

Оптимизация изображений для Веб сайта

Используя все перечисленные способы оптимизации изображений для WEB сайта, Вы в разы сократите общий объем вашей страницы, и тем самым увеличите скорость загрузки Вашего сайта.

Если у Вас возникли вопросы по данному уроку, Вы можете задать их в комментариях в конце статьи.

Скачать программу Webify для оптимизации изображений для WEB

Прокомментировать статью
Дата добавления: 20.01.2012
Эта запись опубликована 20.01.2012 в 14:52, автором DigitalART, и добавлена в рубрику Photoshop, WEB графика. Вы можете подписаться на обновления данной статьи по RSS 2.0

Об авторе

Студия WEB-Дизайна DigitalART предоставляет услуги по созданию и продвижению сайтов в поисковых системах в городе Черкесске и Карачаево-Черкесской Республике, а также в городе Ставрополе и Ставропольском крае.

WEB студия DigigtalART в интернете

Комментарии закрыты.

Вверх