Photoshop/ Веб-сайт: Ps масштабирование против HTML масштабирование?

Question

В чем разница между уменьшением изображения до 150px в Photoshop и последующим использованием в HTML:

<img src="blah.png" />

против

Используя изображение размером 500 пикселей, а затем в HTML:

<img src="blah.png" width="150px"/>?

Есть ли разница в качестве?

Answer 1

Интересно, что вы почти не можете заметить разницу в эти дни ¹. В Chrome/IE это выглядит хорошо, но Firefox тоже не масштабируется. Во всяком случае, чтобы добавить к точке зрения Майка о пропускной способности:

• Время загрузки страницы сильно страдает с большими изображениями. Одно изображение поверх T3 не было бы большой проблемой, но сайт электронной коммерции на смартфоне с низкой пропускной способностью был бы наказанием.
• Вы тратите пропускную способность сервера, что может стоить вам денег (если вы никогда не обслуживаете большую картинку).
• Вы тратите трафик пользователей, что может стоить им денег.

⁽¹⁾ 500x500 принудительно до 150x150 слева, 150 нативных справа

Answer 2

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

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

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

Answer 3

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

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