Как изображения загружаются в браузеры?

У меня есть оригинальный размер изображения 1024px X 768px. Когда я загрузить его на веб-сайте через CSS свойства фона, я бы выполнить так:Как изображения загружаются в браузеры?

background: url('imgPath') no-repeat; width: 100px; height: 100px;
background: url('imgPath') no-repeat; width: 1024px; height: 768px;

Я простой вопрос на мой взгляд: нагрузить ли оба стиля страницы в такая же скорость или первый метод загружает страницу с большей скоростью?

источник

2013-08-18 Bhojendra Nepal

Нет, оба имеют такое же имя изображения (путь к файлу). Размер изображения будет таким же. Значит, это изображение должно быть загружено независимо от размера. Во-вторых, вы используете 'width:; height:; ', который будет масштабировать изображение. Так что это займет некоторое время; в браузере для масштабирования изображения! Но, однако, я бы предпочел не беспокоиться об этом. Однако, если вы работаете на мобильный сайт. Где 2G - вызов. Тогда вы должны подумать об их использовании. Возможно, вам понадобится изображение с точным размером, так как экран позволит сэкономить время. Но нет необходимости в WEB (Desktop). –

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

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

В зависимости от того, используете ли вы технологию серверных сценариев, вы можете масштабировать и кэшировать перемасштабированное изображение на сервере. Пример: imageurl может выглядеть как background.jpg?size=100x100, где background.jpg фактически перенаправляет на страницу скрипта, которая генерирует или загружает ранее созданное изображение требуемого размера из кеша.

источник

2013-08-18 05:08:30

Предполагая, что «imgPath» будет одинаковым для обоих изображений, оба будут загружаться одновременно, потому что хорошо ... он должен загружаться только один раз. Кажется, вы думаете, что ширина и высота могут влиять на загрузку изображения, и это просто не так.

http://jsfiddle.net/ericjbasti/AKGB5/

Кроме того, вы могли бы смысл сделать это:

background-size: 100% 100%;

Если вы хотите, чтобы высота и ширина для масштабирования изображения.

источник

2013-08-18 05:43:21 ericjbasti

Я буду таким же, все изображение загружается в обоих случаях, потому что CSS работает на стороне клиента. Единственный способ «ускорить» время загрузки - сделать снимок изображения на стороне сервера.

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

источник

2013-08-18 05:59:45 federicot

Как говорили другие, это будет такая же скорость. Вы всегда можете попробовать медиазапросы так:

@media all and (min-width: 601px) { 
    html { 
    background: url('imgPath') no-repeat; width: 1024px; height: 768px; 
    } 

    } 

    @media all and (max-width: 600px) { 
    html { 
    background: url('imgPath') no-repeat; width: 100px; height: 100px; 
    } 
    }

Вот очень хорошая статья о нем: http://timkadlec.com/2012/04/media-query-asset-downloading-results/

источник

2013-08-18 06:51:01 eshellborn

Как изображения загружаются в браузеры?

ответ

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