CSS image sprites

Я использую 4 отдельных изображения на своем веб-сайте. Теперь, если я использую спрайты изображений, чтобы отобразить эти 4 изображения, это уменьшит HTTP-запрос, если так мне интересно.CSS image sprites

рассмотрения ниже примере 1: (здесь 2 запросов HTTP направляется)

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
#home { 
width: 46px; 
height: 44px; 
background: url(sevenwonders.gif) 0 0;//first http request 
} 

#next { 
width: 43px; 
height: 44px; 
background: url(sevenwonders.gif) -91px 0; //second http request 
} 
</style> 
</head> 
<body> 

<img id="home" src="something.gif"> 
<img id="next" src="something.gif"> 

</body> 
</html>

рассмотрения ниже примера 2 (2 запроса HTTP посылается)

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

<img id="home" src="tajmahal.gif">//first http request 
<img id="next" src="pisatower.gif">//second http request 

</body> 
</html>

Спасибо вам большое за ваше драгоценное время ,

источник

2016-02-28 Mari Selvan

Каков ваш вопрос в точности? В первом примере у вас будет только один HTTP-запрос, так как это только одно изображение, но используется дважды с смещением фона. –

спасибо @ johnny kutnowski .anyhow я сделал два запроса http для одного изображения. это мое сомнение –

не могли бы вы спроектировать ответ @johnny kutnowski –

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

Рассмотрим следующий пример:

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
#home { 
width: 46px; 
height: 44px; 
background: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg) 0 0;//first http request 
} 

#next { 
width: 43px; 
height: 44px; 
background: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg) -91px 0; //second http request 
} 
</style> 
</head> 
<body> 

<img id="home" src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG"> 
<img id="next" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"> 

</body> 
</html>

возвращает только 3 запросов: 1 на изображение в теле и 1 для CSS фонового изображения, используемые в два раза.

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

Выберите метод и придерживаться его: либо использовать образа в вашем теле (что приведет к нескольким изображений и, следовательно, несколько запросов) или использовать нейтральные элементы, как в div с заданными background-image свойствами, используя background-position, чтобы компенсировать спрайты изображения.

источник

2016-02-28 11:52:57

Хорошо объяснено. @Mari Selvan Это зависит от требования дизайна выбрать метод. Но цель должна заключаться в том, чтобы быстро загружать страницы и минимизировать запросы там, где это возможно. Поэтому использование спрайта везде, где это может быть хорошо. +1 – CodeRomeos

@ МариСелван рад помочь! Если вы считаете, что это решает ваши проблемы, подумайте о том, чтобы принять мой ответ, поэтому будущие пользователи также могут воспользоваться этим. –

Во-первых, мне интересно, почему вы решили использовать тег <img> и приложить к нему фоновое изображение?
Во-вторых, каждое изображение src будет http-запросом (в css и в теге html), поэтому использование спрайта - это, безусловно, хорошая идея, когда вы выбираете отображение изображения в качестве фонового изображения.
Возможно, вы захотите загрузить прозрачный gif 1px на 1px в src тегов img, чтобы свести к минимуму нагрузку HTTP. (вы можете растянуть его до желаемой ширины и высоты)

Надеюсь, это поможет.

источник

2016-02-28 11:44:10

nice counter .. Спасибо, человек очень полезный @ shay Zalman –

Sure .. Я только что заметил, что я не ответил на http-запросы точно ... если вы загружаете одно и то же изображение дважды, только один запрос http будет получать. @ mari-selvan –

это нормально .. его мой плохой английский. @ shay Zalman –

CSS image sprites

ответ

Смежные вопросы