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

Question

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

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

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

Буду ли я получать выгоду, если определю (CSS):

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

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

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

Установка максимальной высоты и ширины изображения в css приведет к тому, что тег img изменит размер img в зависимости от ограничений, но если вы используете язык сценариев внутреннего интерфейса, такой как 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 5

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