Html тег img

Якщо ця область буде не відповідати реальному розміру картинки, яку ви хочете вставити, то малюнок буде відповідно розтягнутий або звужений, до заданого в html тезі Img розміру. Тим не менш, не слід використовувати це спосіб, скажімо, для зменшення розміру вставляється в Html документ малюнка. Адже вага малюнка як і раніше залишиться великий, а це буде сповільнювати завантаження сторінки з цим малюнком.

Справа в тому, що якщо браузер не знаходить атрибути Width і Height всередині html тега Img. то йому буде потрібно час на те, щоб дізнатися розмір картинки, завантажити саме зображення і тільки після цього продовжити завантажувати Html документ. У разі ж коли ви прописали атрибути Height і Width для тега Img, браузер автоматично резервує місце під картинку зазначених в цих атрибутах розмірів і продовжує завантажувати веб-сторінку далі.

Якщо зображення, що виводяться на дану сторінку дуже важкі і їх дуже багато, то вставка в html тег Img всіх цих картинок атрибутів Height і Width дозволить користувачам приступити до читання тексту сайту, в той час як зображення ще будуть завантажуватися.

Також, якщо ви не вкажете атрибути Width і Height всередині html тега Img, то може виникнути ситуація, коли при маленькій картинці і дуже довгому альтернативному тексті (задається атрибутом Alt в тезі Img, про це мова піде нижче), до того як завантажиться зображення, тимчасово відбудеться зсув дизайну сайту, тому що довгий альтернативний текст з атрибуту Alt буде займати стільки місця, скільки йому знадобиться.

У разі ж використання атрибутів Width і Height всередині html тега Img, місце для виведення альтернативного тексту буде обмежено розмірами, заданими в атрибутах розміру зображення Width і Height. Здебільшого, саме через це я намагаюся прописувати атрибути Width і Height в тезі Img.

Схожі статті