Что лучше изображения или иконки CSS

Admin CSS, HTML, WordPress Обсудить

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

Есть много популярных сборников иконок, например: FontAwesome, Genericons, Material и другие. Я задался целью понять, что же лучше для сайта, загружать подобные иконки с помощью CSS или всё-таки воспользоваться старым и добрым методом — изображениями.

Преимущество CSS иконок в том, что во-первых их очень много на любой вкус, во-вторых они масштабируются без потери качества и в-третьих их легко вывести.

Из минусов CSS иконок. На различных устройствах они могут отображаться по-разному. Более существенный минус: дополнительно тянется несколько других файлов (шрифтов, css).

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

Первая иконка подключается следующей командой через файл functions.php в теме WordPress:

Затем, чтобы её вывести я добавил в CSS файл следующее:

Вторая иконка на изображении это обычное jpg изображение, у которого были следующие стили:

В итоге они заимели одинаковые цвета и приняли равное вертикальное расположение относительно текста.

В своём выборе я остановился на изображениях.

Для изображения в стилях CSS иконку сделал в 16 пикселей. Однако она сама имеет размер в 96 пикселей. На всякий случай. Вдруг плотность пикселей какого-нибудь монитора увеличиться в 6 раз. Не хочу чтобы картинки на сайте имели неподобающий вид.

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

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

Если вам пригодилась информация, помочь развитию сайта можно так:

Пожертвований за неделю: 650 рублей
Спасибо!

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи: "Что лучше изображения или иконки CSS".

Ваш e-mail не будет опубликован. Обязательные поля помечены *