Ускоренная загрузка изображений в HTML или CSS?

Ответ 1

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

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

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

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

• Изображение не является контентом
• Не печатается
• Вы можете использовать спрайт для уменьшения количества HTTP-запросов (тем самым повышая производительность).
• медленнее анимировать фоновое изображение, чем img

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

Без какого-либо css reset, любого jquery/javascript и других вещей, я получил результаты

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

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

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

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

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

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

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