Вставлять картинки или делать через CSS?

Question

[gera7]

Подскажите, правильно ли я понимаю что в тех случаях где можно сделать оформление(дизайн) страницы через CSS, надо делать через CSS, а не вставлять картинки? Вот например значок VK (ссылка в виде картинки), лучше делать через css, заливать цвет, ставить букву В, делать круглые края? Или же просто вырезать и вставить картинку? Результат один и тот же, но количество затрачиваемого времени несоизмеримо больше. Стоит ли заморачиваться в данном случае с CSS?

Или вариант опять таки ссылки в виде картинки прямоугольной формы и желтым фоном, понятно что через CSS это просто, но так же в этой прямоугольной форме изображена стрелка, которую придется вырезать и вставлять. Опять таки, как лучше поступить, вырезать элемент целиком или делать прямоугольник, ставить рамку, заливать цвет и в него уже вкладывать картинку со стрелкой?

Как правильно поступать, помогите разобраться?В чем плюсы или минусы того или иного подхода? Спасибо.

Answer 1

[Денис Инешин]

Есть несколько причин.

1. Уровень абстракции. Поисковики умеют индексировать картинки, по этому, те изображения, которые относятся к оформлению, а не к контенту должны быть вынесены оттуда и размещены в css, там же где и все остальные стили.
2. Возможность динамично менять внешний вид сайта, например реализовывать адаптивность. Это делается легко на CSS с помощью media queries, а вот на стороне HTML уже гораздо сложнее и может потребоваться использовать JavaScript.
3. Меньший вес. CSS сегодня умеет рисовать очень многое, на некоторых проектах экономия на кол-ве картинок и их весе может достигать 90%. Например одни лишь скругленные уголки отрисованные на CSS могут сократить итоговый вес картинки очень существенно. И это делает интерфейс гораздо более отзывчивым особенно на крупных проектах, где важна каждая милисекунда.

Comments

[Евгений Петров]

Такие вещи, как border-radius и box-shadow снижают производительность рендеринга. Особенно последний.

[Денис Инешин]

Евгений Петров: да, везде важен баланс

Answer 2

[Алексей Уколов]

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

Answer 3

[Андрей]

Каждая картинка - это отдельный запрос к серверу. Все это замедляет загрузку страницы (не говоря уже о том, что растровые картинки сами весят больше). Конечно png-спрайты частично решает эту проблему, но времени на их создание тоже уходит немало. Еще один минус использования картинок для таких задач - они размыленно смотрятся на retina и QHD мониторах, число которых растет изо дня в день.

Для таких вещей, которые вы описали, используйте иконочные шрифты или svg спрайты.
Самое популярное решение сейчас - это Font Awesome - там уже есть огромное количество иконок, которые подойдут для решения ваших задач. Другие аналогичные сайты - IcoMoon и Fontastic.
Для остальных случаев (редкие иконки) можно сделать иконочный шрифт самостоятельно (последние 2 сервиса кстати с этим отлично справляются). Надо просто загрузить туда свои svg. На первый взгляд это может показаться сложным, но как только реализуете этот метод хоть в одном проекте - о вырезании картинок забудете навсегда. Плюс такими элементами можно управлять через css - например, менять цвет при наведении.

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

Answer 4

[Дмитрий Шинкарь]

тю) ссылку на глиф-иконку VK навесь и все))