Визначення розмірів зображення для підвищення продуктивності браузера

Нещодавно я провів аудит на своєму веб-сайті за допомогою інструментів Google Developer Tools. Мої зображення мають однаковий розмір (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 має цікаву техніку: замість використання максимальної ширини: 100%, ви можете використовувати Hack Padding-Bottom :

"За допомогою техніки ми визначаємо висоту як міру відносно ширини. Прокладка та запас мають такі властиві властивості, і ми можемо використовувати їх для створення співвідношення сторін для елементів, які не мають у них вмісту. Тому що набивання має таку можливість , ми можемо встановити нижню частину прокладки відповідно до ширини елемента. Якщо ми також встановимо висоту дорівнює 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, ... все, що б програмував браузер.)

Таким чином, щоб уникнути розбиття сторінки, поки зображення не будуть прочитані, атрибути ширини та висоти дозволяють браузеру негайно обчислити правильний макет сторінки. Ось чому їх корисно мати там, навіть якщо вони однакових розмірів.