Является ли CSS изменение размера изображений плохой идеей?

Всегда рассматривалось, что использование атрибутов width / height на изображениях, которые не являются тем, чем является оригинальное изображение, является плохой идеей. Это может означать изображения в пикселях или размеры загрузки больше, чем нужно.

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

Например, у меня есть фотография размером 600x400, и я наклеиваю на нее ширину 400 пикселей. Большинство современных браузеров уменьшают изображение, и рендеринг выглядит все еще прилично.

Итак, что на это думают все?

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

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

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

Кроме того, что касается крошечной стоимости полосы пропускания, так как трафик вашего сайта растет, то и крошечная стоимость полосы пропускания.

Таким образом, сэкономьте деньги своей компании и потратьте 30 секунд, которые вам понадобятся, чтобы изменить размер изображения самостоятельно! :)

Как всегда, проведите бенчмаркинг, но если приложение не является действительно популярным / критически важным, я бы не стал слишком беспокоиться о сокращении с 600 до 400, если вам нужно часто менять ширину. Если это разовое, конечно, запустите convert -geometry 400x photo1.jpg photo2.jpg, но если это приложение, которое вы быстро итерируете, вероятно, есть более важные вещи, о которых нужно беспокоиться, даже в сфере производительности. например, задержка; упреждающая загрузка изображений, например.

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

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

Проблема заключается в полезной нагрузке, которую браузер будет отображать практически в любом размере (особенно в меньших размерах, о которых вы говорите)

Для сайта большого объема важны даже отдельные байты. Вы не хотите отправлять нежелательные данные.

Говоря о плохой идее, это не очень плохая идея, чтобы отрегулировать ширину / высоту на несколько пикселей или может быть 10 или 20 пикселей. Но это очень плохая идея, если вы уменьшаете большое изображение до миниатюры :)