#html #performance #browser #image
#HTML #Производительность #браузер #изображение
Вопрос:
Предполагая, что у меня есть два идентичных изображения с разным размером: test_small.jpg (150px x 150px) и test_medium.jpg (500 пикселей x 500 пикселей)
Я хочу отобразить изображение шириной 150 пикселей.
1) Какое использование лучше для загрузки браузером? Что быстрее?
<img src="test_smal.jpg"/>
or
<img src="test_medium.jpg" width="150px"/>
2) Будет ли второе использование загружать все изображение, а затем регулировать ширину изображения?
Редактировать: тег < /img> удален
Ответ №1:
Загрузка изображения меньшего размера происходит быстрее по нескольким причинам.
-
Размер файла меньше, меньше для загрузки
-
Браузеру не нужно изменять размер файла, он просто отображается как есть.
Однако разница во времени будет очень небольшой.
Также тег img является самозакрывающимся < />
Комментарии:
1. 1 Абсолютно согласен с загрузкой изображения меньшего размера. Изменение размера обходится дорого и часто выглядит некрасиво.
2. Разница во времени будет небольшой при таком размере изображения. Если вы используете изображение в натуральную величину и (на пару мегапикселей) уменьшаете его размер до миниатюры, то разница существенная.
Ответ №2:
Никогда не следует указывать ширину, отличную от фактической ширины изображения, поскольку большое изображение загружается браузером динамически и изменяет его размер.
Если вы хотите изменить размер изображения, вы должны сделать это на стороне сервера, прежде чем оно будет загружено в браузер. Указание ширины изображения на самом деле требуется редко.
Ответ №3:
Второй вариант работает медленнее, потому что, как вы просили в своем втором вопросе, сначала будет загружено все изображение целиком. Что происходит медленнее, потому что изображение больше.
Изменение размера также требует больше времени.
Вам следует редко использовать атрибут ширины изображения и сначала попытаться сохранить изображение в нужном размере на сервере.
Ответ №4:
вот как вы используете тег image
<img src="test_small.jpg" />
очевидно, что использование меньшего файла будет быстрее, поэтому вместо этого используйте маленький файл