Реальное размерное изображение или атрибут <img>width?

Question

Предполагая, что у меня есть два одинаковых изображения с различным размером: test_small.jpg (150px x 150px) и test_medium.jpg (500px x 500px)

Я хочу отобразить изображение шириной 150px.

1) Какое использование лучше для загрузки браузера?Что быстрее?

<img src="test_smal.jpg"/>
or
<img src="test_medium.jpg" width="150px"/>

2) Будет ли второе использование загружать все изображение, а затем настраивать ширину изображения?

Изменить: тег удален

Answer 1

Загрузка изображения меньшего размера происходит быстрее по нескольким причинам.

1. Размер файла меньше, меньше для загрузки

2. Браузер не должен изменять размер файла, он просто отображается как есть.

Однако разница во времени будет очень мала.

Также тег img самозакрывающийся </>

Answer 2

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

Изменение размера также занимает больше времени.

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

Answer 3

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

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

Answer 4

вот как вы используете тег изображения

<img src="test_small.jpg" />

очевидно, что использование меньшего файла будет быстрее, поэтому вместо него используйте маленький файл