Изображения загружаются быстрее в HTML или CSS? - PullRequest
26 голосов
/ 16 июля 2011

Если я загружаю изображение с помощью этого HTML-кода на боковой панели

Будет ли он загружаться быстрее / медленнее, чем если бы я вместо этого поставил на боковую панель где мой style.css (который вызывается в заголовке) имеет

.image {
  width: 200px;
  height: 200px;
  background-image: url('http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png');
}
<div class="image"></div>

Ответы [ 5 ]

30 голосов
/ 16 июля 2011

Это легко проверить с помощью Firebug (в Net), Chrome Developer Tools (в разделе Network), Fiddler или любого другого HTTP-анализатора, который вы предпочитаете.

Если вы поместите изображение в CSS в качестве background-image, изображение будет загружено только тогда, когда этот класс действительно используется и видимым .Если вы поместите его в img, он будет загружен немедленно и заблокирует рендеринг, даже если он невидим.

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

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

  • Изображение не является содержимым
  • Оно не для печати
  • Вы можете использовать спрайт для уменьшения числаHTTP-запросов (таким образом, улучшая производительность)
  • Это медленнее для анимации background-image, чем img
5 голосов
/ 16 июля 2011

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

2 голосов
/ 16 июля 2011

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

30 хитростей для оптимизации изображений на веб-страницах

Правила производительности Yahoo для веб-разработчиков

1 голос
/ 16 июля 2011

Я провел небольшой тест, используя аддон YSlow от Mozilla.

Без сброса css, jquery / javascript и прочего, я получил результаты

Использование У меня была эта структура внутри

        <div id="wrap">
        <img src="images/5.png" alt="" />
    </div><!--/wrap-->

и YSlow сказал мне, что страница была загружена за 0,149 с

Использование фона: url ()

Затем я поместил свое изображение в качестве фона на элемент div, называемый «обтекание», и результат оказался немного быстрее, среднее время загрузки составило около 0,125 с.

В этом тесте я использовал изображение в формате png размером 10,5 КБ (200 пикселей x 200 пикселей).

Кстати, вам нужно подумать, когда использовать или когда использовать в теге (например, span / div и т. Д.). Чтобы иметь профессиональную и красивую структуру, вы должны использовать тег только для изображений контента. Самый простой способ увидеть это отключить CSS. Если у вас есть необходимый контент (например, галереи, логотипы, аватары и т. Д.) Без CSS, это означает, что вы выбрали правильный путь. Бесполезно загружать некоторые вещи, такие как изображения с закругленными углами и другие элементы дизайна, используя теги, не важно, будет ли это немного быстрее. Подумайте, что человек, у которого медленное соединение, возможно, будет использовать версию без css, поэтому для него бесполезно загружать вас небольшим углом коробки. Он хочет видеть контент, а не глупые вещи, когда его пропускная способность медленная и ограниченная.

1 голос
/ 16 июля 2011

Одним из аргументов в пользу того, что изображения css быстрее, является то, что веб-приложения, использующие множество маленьких изображений, могут объединять их в одно большое мозаичное изображение и использовать css для обрезки файла исходного изображения в соответствии с границами содержащегося подизображения.Сокращение количества обращений к серверу для получения дополнительных изображений может значительно увеличить время загрузки таких приложений.На самом деле, Google использует эту идею во многих своих собственных приложениях, таких как gmail, хотя управлять им вручную может быть трудной задачей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...