CSS/HTML: Помогает ли использование max-height на изображениях HTML-рендеринг?

Question

Я только что закончил читать YSlow recommendation, чтобы всегда определять размеры изображения (высота/ширина), чтобы улучшить производительность рендеринга HTML.

Однако я не знаю размер изображения, который я тоже связываю.

То, что я знаю, что height никогда не будет больше, чем 200px и width никогда не будет больше, чем 300px

Я был бы польза, если я определил (CSS):

img {max-height: 200px; max-width: 300px} 

Для рендеринга производительности HTML?

Answer 1

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

Answer 2

Установка максимальной высоты и ширины изображения в css приведет к изменению размера img тега img на основе контуров, но если вы используете язык сценариев с поддержкой backend, например asp.net или php, вы используете свои библиотеки img для масштабируйте изображение на стороне сервера, либо сохраните его, либо на жестком диске, чтобы использовать его позже или изменить размер на лету.

Вы можете проверить http://shiftingpixel.com/2008/03/03/smart-image-resizer/ для PHP как стартер

Или, если вы используете .NET вы можете проверить эту ссылку http://weblogs.asp.net/gunnarpeipman/archive/2009/04/02/resizing-images-without-loss-of-quality.aspx

Answer 3

Нет, установив максимальную ширину и максимальные высоты Безразлично улучшить производительность.

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

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

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

Answer 4

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

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

Стоян Стефанов объяснил это действительно хорошо в недавнем блоге post

Answer 5

Я думаю, что вы бы скорее хочу, чтобы обернуть, что <img> в <span> или <div> элемент с максимальной высоты и максимальной ширины набора. Кроме того, он (span или div) должен иметь переполнение: скрытый набор, чтобы изображение не выходило из диапазона div.

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