Закрыть
Вход на сайт
Регистрация
Вы успешно зарегистрировались!

Перейти к обучению
Регистрация
Войти на сайт

Как правильно использовать картинки на сайте?

07 September 2017
1229
В этой статье хочу закрыть вопрос использования картинок на сайте. Начинающие разработчики часто допускают в этом вопросе довольно мелкие, но влекущие ...

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

По сути, главное соблюдать два правила: 

  1. Картинка должна "весить" как можно меньше. Это значит что в ней должно быть как можно меньше килобайт. 
  2. Картинка должна быть четкой. Чтобы пользователи могли что-то на ней разглядеть и понять что хотел показать автор. 

Зачем она должна занимать как можно меньше килобайтного пространства? Дело в том, что когда пользователь открывает ваш сайт, он его скачивает, а это значит, что картинки, которые расположены на сайте он тоже скачивает, а для того, чтобы скачать каждый килобайт сайт необходимо потратить время и трафик. Следовательно, чем больше весят картинки, тем дольше сайт загружается, чем дольше сайт загружается, тем недовольнее становится пользователь. Вывод какой? Сжимайте ваши картинки!

И вот вам сразу первые советы: 

1) Делайте размер картинки минимальным

Если картинка на сайте отображается в размере 200px на 300px, то и в проекте она должна лежать такого же размера. Не надо брать картинку 2000px на 3000px, которую вы скачали из интернета, пытаться "упихнуть" в эти жалкие 200 на 300. Поработайте немного над картинкой, откройте ее в фотошопе и обрежьте. Для этого нужны инструмент "кадрирование" и 30 секунд вашего времени. Вам не убудет, а пользователю приятно будет. 

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

2) Сжимайте картинки

Любую необработанная картинку можно еще поджать без потери качества. Поджать, в смысле приуменьшить количество килобайт, которые она занимает. Для этого можно использовать онлайн сервисы по уменьшению размера (но это не удобно каждый раз сайты открывать) или приложения. Лучше скачайте приложение на комп (погуглите и найдите себе по душе) и закидывайте свои картинку в приложение, которое уменьшит ваши картинки в несколько раз и оставит качество хорошим. На практике, картинку в несколько Мегабайт можно уменьшить до нескольких сотен Килобайт. 

Если вы уже более-менее продвинутый пользователь, то настройте Gulp и пусть он сжимает ваши картинки, а также css и js заодно. 

Если у вас CMS и картинки грузятся из админки в больших количествах, что нет возможности все сжимать руками, то настройте CMS, чтобы она поджимала картинки немного. На php, ruby, python, на чем угодно есть способы это сделать.


Сейчас были озвучены самые главные правила по использованию картинок. 

В добавок хочу дать еще несколько советов:

1) Используйте по максимуму svg

Если еще не знакомы с svg, то советую посмотреть урок про него: ссылка

В двух словах, svg - это векторная картинка. Если не знаете что такое вектор, то вот вам ссылка на википедию

В чем плюс вектора? Он меньше весит! Если растровая картинка будет занимать 5Мб, то векторная может 5Кб. Ощутимо?

К тому же, картинки в svg можно поставить на сайт прямо в html! Вам не надо писать лишний img и делать новое обращение к серверу, которое занимает время. Можно внедрить картинку в код! Не верите? Попробуйте вставить этот код в ваш index.html и посмотрите что получится: 

<svg width="200" height="200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"/></svg>

Во-первых, вы увидите вот такую звезду: 

Во-вторых, весь html-документ с этой звездой занимает 354 Байта! А png-шка с этой же звездой  12 килобайт! Учитывайте, что картинка всего 200 на 200 кб и черно-белая. А если цветная и 2000 на 1000, то разница будет более существенная. 

Но! Есть одно но...как всегда есть НО!

SVG можно использовать если используются какие-то простые фигуры. В основном, это иконки. Если это фотография, то тут svg уже не прокатит...придется использовать jpg или png. 

В общем! Если можно использовать svg, обязательно юзайте svg! Если svg можно внедрить в код на прямую не используя img или backrgound-image, то внедряйте, если совсем траблы надо вставить с помощью тегов, то ладно, так и быть, делайте так. 

2) Правильно используйте форматы

Есть несколько основных форматов картинок, которые часто используются: jpg, png, gif

png - используйте, когда в картинке есть прозрачность.

jpg - используйте, когда в картинке нет прозрачности. 

PNG занимает больше места, чем JPG, поэтому jpg приоритетнее. Но в jpg нельзя использовать прозрачность, поэтому если она нужна, то вступает в силу png

gif - используйте, если в картинке необходима анимация. 

GIF ужимает картинку как под прессом, поэтому качества от них не ждите, но возможность анимирования приятная плюшка. 

3) Используйте спрайты

Опять же, если не знаете что такое спрайты, то добро пожаловать в урок про них: ссылка

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

4) Разделяйте моменты, когда вам нужен <img>

По факту, есть два способа поставить картинку на страницу. С помощью тега img или поставить на странице блок и задать ему background-image. Я лично больше люблю второй способ. Но есть два момента, которые заставляют меня использовать именно тег: 

  1. СЕО продвижение. Если я хочу продвинуть сайт по сео, то с background-image я далеко не уеду. Поэтому важные для сео картинки необходимо ставить на страницу тегом img

    Если вы хотите, чтобы картинки реально индексировались, то им необходимо указывать атрибут alt. Зачем его ставить и как описывается в уроке про тег img: ссылка.

    Честно скажу, что я на атрибуты alt забиваю и не указываю их. А если и указываю, то в оооочень важных местах. Но я не правильно делаю и меня надо по рукам бить. Надеюсь, что вы будете лучше меня. 
     
  2. Тег необходим в нюансах верстки. Иногда бывают такие ситуации, когда сложно сверстать блок именно так, как надо, используя background-image, вот тогда и приходит на помощь старый добрый <img>.

Так что, если эти две ситуации обходят вас мимо, то смело используйте background-image. Но это не запрещает вам везде ставить только img. Это дело вашего вкуса и приоритетов.


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