Правила подготовки картинок для сайта
В эпоху мобильного веба и борьбы за увеличение конверсии выигрывают сайты, которые быстрее загружаются. Выигрывают ещё и потому, скорость загрузки сайта — один из критериев оценки качества сайта у поисковых систем. Это всего лишь один из тысячи критериев, но и сайтов тысячи, а первое место — одно.
Самые тяжёлые элементы на сайте — картинки. Перед публикацией их нужно подготавливать:
- Уменьшайте картинку до размера, в котором она будет использоваться на сайте.
- Используйте функцию «Сохранить для веб» в редакторах Фотошоп или Пиксельматор.
- Правильно выбирайте формат сохранения. Фотографии — это jpeg, картинки с небольшим количеством цветов и графики, однотонные или прозрачные — gif, полупрозрачные — png.
- Максимальное качество в формате jpg не нужно. Я использую параметр от 60 до 80 и выбираю наиболее оптимальный на глаз. Для формата gif уменьшаю количество используемых цветов и оставляю минимальное без потери качества.
- После сохранения в фоторедакторе уменьшайте вес файла с помощью бесплатной программы ImageOptim. Поддерживается пакетный режим, программа очень простая и удобная.
- Используйте строчные буквы в названии и разрешении файлов. Qwert.JPG и qwert.jpg — это два разных файла, из-за чего картинка не будет грузиться.
- При вёрстке задавайте атрибуты alt=Название картинки width=600 height=320.
- Прописывайте разные атрибуты alt для картинок.
- Для каждой картинки давайте нормальное название. И поисковой системе, и вам в исходном коде страницы будет понятно, что изображено на картинке по её названию. Бессмысленный набор qw-1-334-qqq.jpg этой информации не даст.
Жертвовать качеством картинки ради скорости нельзя. Но если не видно разницы, зачем грузить больше?
![]() |
![]() |
| 50 Кб | 12 Кб |
Дизайнерам и технологам стоит освежить в памяти Ководство про картинки
- http://www.artlebedev.ru/kovodstvo/sections/101/ — перспектива и вертикальные линии
- http://www.artlebedev.ru/kovodstvo/sections/134/ — способ определения предела масштабирования
- http://www.artlebedev.ru/kovodstvo/sections/169/ — подписи на фотографиях
Технологии развиваются, скорость интернета растёт, увеличивается количество компьютеров с дисплеем ретина, в вебе активно развивается векторная графика и формат SVG, но базовые принципы подготовки графики для веб не меняются.

