Изображения загружаются быстрее в HTML или CSS?

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

<img src="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" height="200px" width="200px" alt="image" />

будет ли он загружаться быстрее / медленнее, чем если бы я вместо этого поставил на боковой панели где мой стиль.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>
26
css html optimization pagespeed

5 ответов

Это можно легко проверить, используя Firebug (Под сетью), Chrome Developer Tools (Под сетью), Fiddler или любой другой http sniffer вы предпочитаете.

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

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

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

  • изображение не является содержанием
  • это не для печати
  • вы можете использовать sprite для уменьшения количества HTTP-запросов (тем самым повышая производительность)
  • это медленнее, чтобы анимировать фоновое изображение, чем img
30

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

5

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

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

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

2

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

1

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

без сброса css, любого jQuery / javascript и других вещей, я получил результаты

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

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

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

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

затем я поместил свое изображение в качестве фона на div под названием "wrap" , и результат был немного быстрее, в среднем время загрузки-около 0.125 сек.

в этом тесте я использовал png-изображение, которое имеет 10.5 KB (200px X 200px).

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

1