Оптимизация графики для web

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

Форматы представления изображений в Интернет

В Интернете размещаются изображения трёх графических форматов:

  • GIF
  • PNG
  • JPEG

GIF

Особенности: Поддерживает палитру в 256 цветов, поддерживает 1 уровень прозрачности (100%)

Тип сжатия: без потерь.

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

PNG

Особенности: Поддерживает палитру в 256 цветов, поддерживает различные уровни прозрачности (не во всех браузерах корректно отображается)

Тип сжатия: без потерь

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

JPEG

Особенности: поддерживает палитру более 16 млн. цветов. Не поддерживает прозрачность.

Тип сжатия: с потерей качества

Применение: полноцветные фотографические изображения.

Оптимизация графики в GIMP

GIMP - бесплатный графический редактор, аналог Photoshop.

Оптимизация в GIF и PNG:

  1. Откроем изображение (Файл/Открыть)
  2. Зададим изображению режим "Индексироанные цвета" (Изображение/Режим/Индексированные цвета) См. рис. 1.
    оптимизация графики
    Рис.1

  3. Задайте цветовую карту "Создать оптимальную палитру" или "Использовать оптимизированную для веба палитру", если изображение содержит малое количество цветов (рис.2).
    оптимизация изображений для web
    Рис.2

  4. Сохраняем изображение в нужном формате (GIF или PNG) прописав его вручную в поле "Имя" или выбрав из списка "Выберите тип файла (по расширению)"

JPEG

  1. Откройте нужное изображение в GIMP (Файл/Открыть).
  2. Для его оптимизации из верхнего меню выберите команду Файл/Сохранить как.
  3. В появившемся окне выберите для файла расширение, прописав его вручную в поле "Имя", либо выбрав его из списка "Выберите тип файла (по расширению)". Нажмите "Сохранить"
  4. В появившемся окне Вы можете, перемещая бегунок для парметра "Качество" Вы можете найти оптимальное с Вашей точки зрения соотношение Качество изображения/размер файла. Также задав параметр "Сглаживание" в разделе "Дополнительные параметры" Вы можете сгладить появившиеся в результате снижения качества нежелательные резкие границы между разными цветовыми областями.(рис.3)
    оптимизация графики для web

    О том, как оптимизируется графика в Adobe Photoshop вы можете узнать, изучив наши дистанционные курсы html css: "HTML, CSS и оптимизация графики для web".