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

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

Owebs
29 марта 2013
Просмотры 68
Рейтинг
Время чтения Время чтения: 8 минут

Оглавление
Развернуть Свернуть

Форматы изображений

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

Для фотографий лучше всего подойдет формат JPG. При сохранении укажите качество 60 из 100 или 8 из 12, в зависимости от заложенных стандартов в графический редактор. Самый простой способ подготовить фотографию к размещению на сайте: пережать ее в Photoshop. Откройте вашу фотографию в Photoshop и нажмите одновременно комбинацию клавиш Ctrl + Alt + Shift + S. В появившемся окне, выберите слева формат "JPEG"и профиль "High". Нажмите "Сохранить". Вот и все.

Для рисунков в векторе и просто маленьких изображений (меньше, чем 10х10 пикселей) лучше всего подходит формат PNG или GIF. Программа Color quantizer позволит дополнительно уменьшить размер выходного изображения. Она умеет вырезать ненужные заголовки и лишние цвета из палитры, что позволяет серьезно уменьшить размер изображения. Вам будет достаточно указать, сколько цветов использовать при сохранении изображения. Это число должно быть кратно 2. Меньше цветов - меньше размер изображения. Нет никакого смысла хранить информацию о 256 цветах, если в изображении, например, всего 6 цветов.

Ниже приведена таблица, которая позволяет наглядно убедиться в справедливости вышесказанного:

Фотография 200х150 пикселей
Не оптимизированная для web Оптимизированная для web
Пример Формат Размер
Не оптимизированная для web JPG 39 КБ
Оптимизированная для web PNG 63.6 КБ
Пример Формат Размер
Форматы изображений JPG 12.7 КБ
Размер изображений PNG 21.9 КБ
Рисунок в векторе 200х150 пикселей
Не оптимизированный для web Оптимизированный для web
Пример Формат Размер
Рисунок в векторе 200х150 пикселей JPG JPG 11.6 КБ
Рисунок в векторе 200х150 пикселей PNG PNG 9.29 КБ
Рисунок в векторе 200х150 пикселей GIF GIF 4.89 КБ
Пример Формат Размер
Размеры изображений JPG JPG 4.74 КБ
Размеры изображений PNG PNG 1.31 КБ
Размеры изображений GIF GIF 2.06 КБ

Размеры изображений

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

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

Размер: 66.8 КБ
Как выглядит на сайте (200х150 пикселей) Как выглядит на самом деле (400х300 пикселей)
Как выглядит на сайте (200х150 пикселей) Как выглядит на самом деле (400х300 пикселей)

Давайте теперь оптимизируем фотографию по методу, описанному в начале статьи и предоставим картинку нужного разрешения.

Размер: 12.7 КБ
Как выглядит на сайте (200х150 пикселей) Как выглядит на самом деле (200х150 пикселей)
Как выглядит на сайте (200х150 пикселей) Размер: 12.7 КБ Как выглядит на самом деле (200х150 пикселей)

По сравнению с первоначальным, размер картинки уменьшился в 5 раз! Улучшения на лицо.

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

  • Выбирайте правильный формат для сохранения, в зависимости от типа изображения.
  • Постарайтесь максимально сжать изображение, не забывая о сохранении качества.
  • Используйте на сайте изображения с правильными размерами.
  • Указывайте правильные пропорции для изображения в стилях.
Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 183
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 344
Рейтинг 6
14 декабря
5 месяцев назад

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

Создание сайтов через нейросети
Просмотры 365
Рейтинг 4
9 февраля
3 месяцев назад

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

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

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

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

Согласен