Правила подготовки картинок для сайта

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

Самые тяжёлые элементы на сайте — картинки. Перед публикацией их нужно подготавливать:

  1. Уменьшайте картинку до размера, в котором она будет использоваться на сайте.
  2. Используйте функцию «Сохранить для веб» в редакторах Фотошоп или Пиксельматор.
  3. Правильно выбирайте формат сохранения. Фотографии — это jpeg, картинки с небольшим количеством цветов и графики, однотонные или прозрачные  — gif, полупрозрачные — png.
  4. Максимальное качество в формате jpg не нужно. Я использую параметр от 60 до 80 и выбираю наиболее оптимальный на глаз. Для формата gif уменьшаю количество используемых цветов и оставляю минимальное без потери качества.
  5. После сохранения в фоторедакторе уменьшайте вес файла с помощью бесплатной программы ImageOptim. Поддерживается пакетный режим, программа очень простая и удобная.
  6. Используйте строчные буквы в названии и разрешении файлов. Qwert.JPG и qwert.jpg — это два разных файла, из-за чего картинка не будет грузиться.
  7. При вёрстке задавайте атрибуты alt=Название картинки width=600 height=320.
  8. Прописывайте разные атрибуты alt для картинок.
  9. Для каждой картинки давайте нормальное название. И поисковой системе, и вам в исходном коде страницы будет понятно, что изображено на картинке по её названию. Бессмысленный набор qw-1-334-qqq.jpg этой информации не даст.

Жертвовать качеством картинки ради скорости нельзя. Но если не видно разницы, зачем грузить больше?

50 Кб 12 Кб

Дизайнерам и технологам стоит освежить в памяти Ководство про картинки

  1. http://www.artlebedev.ru/kovodstvo/sections/101/ — перспектива и вертикальные линии
  2. http://www.artlebedev.ru/kovodstvo/sections/134/ — способ определения предела масштабирования
  3. http://www.artlebedev.ru/kovodstvo/sections/169/ — подписи на фотографиях

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

Поделиться
Отправить
Популярное