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

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

<img src="blah.png" />

против

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

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

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

3 ответа

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

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

(1) 500x500 принудительно до 150x150 слева, 150 нативных справа

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

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

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

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

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

Другие вопросы по тегам