Изображения загружаются быстрее в 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" />

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


html css optimization pagespeed
person GreatestSwordsman    schedule 16.07.2011    source источник

Ответы (5)


arrow_upward
32
arrow_downward

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

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

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

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

  • Изображение не является содержанием
  • Это не для печати
  • Вы можете использовать спрайт, чтобы уменьшить количество HTTP-запросов (тем самым повысив производительность).
  • Фоновое изображение анимируется медленнее, чем img
person pixelfreak    schedule 16.07.2011
comment
Почему бы вам сначала не проверить свои ответы? - А почему вы отвечаете на вопрос и получаете за это очки репутации. Почти все, что здесь спрашивают, можно узнать в гугле и сначала проверить ответы. - person Jawad; 16.07.2011
comment
@Jawad Отредактировано. Надеюсь, теперь это кошерно? :) - person pixelfreak; 16.07.2011
comment
Не поймите меня неправильно. Удивительно, как такие люди, как вы, находят время и прилагают усилия, чтобы помочь таким людям, как Вирендар, и мы действительно ценим это. - person Jawad; 16.07.2011
comment
использование спрайтов всегда приносит пользу, особенно для IE, эти HTTP-запросы напоминают мне езду за старым человеком по автомагистрали (шоссе), лол! - person Xavier; 16.07.2011
comment
Извините, в моих тестах некоторые браузеры загружают фоновые изображения (проверены Chrome и Safari), даже если они display: none. Этот ответ вводит в заблуждение. - person chowey; 03.02.2014
comment
@chowey Похоже, ты прав. Этому посту почти 3 года, может с тех пор что-то изменилось. Я обновлю свой ответ. - person pixelfreak; 05.02.2014

arrow_upward
5
arrow_downward

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

person sagi    schedule 16.07.2011

arrow_upward
2
arrow_downward

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

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

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

person DSharper    schedule 16.07.2011

arrow_upward
1
arrow_downward

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

person Two-Bits    schedule 16.07.2011

arrow_upward
1
arrow_downward

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

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

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

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

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

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

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

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

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

person stefanz    schedule 16.07.2011