Изменение размера изображения. img width/height или загрузить одно и тоже изображение в разных размерах?

Web Frontend: JavaScript, HTML/CSS
#1

Здравствуйте.
Подскажите пожалуйста как лучше сделать.
Есть изображение с размерами 512 на 512. Мне изображение надо вывести в трех местах с размерами 512 на 512, 125 на 125 и 80 на 80.
Вопрос такой: лучше уменьшить размер при помощи width и height

      <img src="img.png" width="512" height="512">
      <img src="img.png" width="125" height="125">
      <img src="img.png" width="80" height="80">

или же загрузить одно и тоже изображение в трех разных размерах

      <img src="img-512-512.png">
      <img src="img-125-125.png">
      <img src="img-80-80.png">

и уже выводить их на экран?

#2

Если ресайзить самому, то качество будет более предсказуемым/лучше (если выбрать подходящий алгоритм).
В CSS есть image-rendering для указания способа ресайза, но high-quality вроде бы уже deprecated, так что это свойство видимо только для пиксель арта полезно, а для фото по умолчанию и так должно быть “наилучшее” (зависит от браузера).

Ну а по размеру передаваемого по сети: если одно изображение, то оно загрузится один раз и потом скорее всего запрос закешируется. Так что если делать три изображения (а не разные width/height у одного), то в сумме загрузится больше. Но если большой вариант показывается реже, то это может быть предпочтительнее.

#3

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

#4

Если устраивает результат сжатия браузерами, то можно и не париться, особенно если их много и вручную )

Некоторые сайты автоматически генерируют копию меньшего размера.