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

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

Под сетевым использованием Укажите Размеры изображения я вижу следующее

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

Теперь я в замешательстве. Должен ли я действительно добавлять атрибуты ширины и высоты к своим изображениям, даже если они уже имеют правильный размер? Это кажется излишним.

Браузеры загружают данные параллельно и пытаются начать рендеринг страницы как можно скорее.

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

Эта задержка заставляет браузер перерисовывать или переформатировать макет - задерживая время загрузки страницы.

Чем больше изображений с этой проблемой - тем медленнее будет загружаться страница.

Если вы укажете размеры изображения, либо в HTML, либо в CSS, браузер сможет избежать перерисовки и переформатирования контента.

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

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

Для получения дополнительной информации о процессе рендеринга в браузере см .: http://taligarsiel.com/Projects/howbrowserswork1.htm

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

Адаптивный дизайн обычно не использует атрибуты ширины или высоты

Инструменты разработки Google - это руководство, и вам не нужно применять все, что вы читаете на их сайте, на самом деле некоторые вещи устарели. Большинство адаптивных веб-сайтов не используют widthили heightпотому, что хотят, чтобы изображения адаптировались к размеру экрана, а также с использованием фиксированной ширины и высоты, <img>что снизило бы удобство для пользователей, и Google объявил это одним из наиболее важных факторов.

Обходной путь CSS

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

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

Я думаю, это будет выглядеть примерно так:

Статический дизайн .ic {width:500px;height:500px;}

Адаптивный дизайн:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

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

Я только что ответил на аналогичный вопрос по Wordpress Stack Exchange. Повторное размещение здесь (администраторы / модераторы: если это не разрешено, дайте мне знать, как правильно помочь).

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

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

Большую часть времени, используя и ширину, и max-width:100сделаем свою работу, но этот пост от Smashing Magazine имеет интересную технику: вместо использования max-width: 100%, вы можете использовать The Padding-Bottom Hack :

«Используя эту технику, мы определяем высоту как меру относительно ширины. Отступы и поля имеют такие внутренние свойства, и мы можем использовать их для создания соотношений сторон для элементов, в которых нет содержимого. Поскольку заполнение имеет такую ​​возможность , мы можем установить padding-bottom относительно ширины элемента. Если мы также установим height равным 0, мы получим то, что хотим. [...]

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

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Процесс идет примерно так:

1. читать .html файл
2. Из заголовка .html файла, читайте файлы .css, .js (.js должен быть ПОСЛЕ .css ...)
3. прочитайте img и скрипт со страницы

Таким образом, теги изображений читаются «поздно». Однако для расчета форматирования вашей страницы полезно иметь размер изображения (в противном случае браузеры используют «случайный» размер, например 1x1, 25x25, ... независимо от того, что запрограммирован браузером.)

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