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

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

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

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

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

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

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

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
  
    wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
}

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

 .entry-meta .category:before {
    content: '\f115';
    font: normal 14px/1 FontAwesome;
    padding: 0 3px 0;
}

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

.img_folder {
    height: 16px;
    opacity: .6;
    vertical-align: text-top;
    width: 16px;
}

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

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

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

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

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

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

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

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

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