sizes attribute е HTML атрибут, който казва на браузъра каква приблизителна ширина ще заеме изображението в различни условия на екрана. Най-често се използва заедно със srcset, за да може браузърът да избере подходящ файл, вместо да зарежда прекалено голямо или твърде малко изображение.
Какво означава sizes attribute?
Атрибутът sizes описва визуалния размер на изображението в layout-а, а не физическите размери на самия файл. Например изображение може да заема цялата ширина на екрана на мобилно устройство, но само 50% от ширината в десктоп изглед. Когато браузърът знае това предварително, той може да сравни наличните варианти от srcset и да избере ресурс, който е достатъчно ясен, но не излишно тежък.
Защо е важно за SEO?
Правилната употреба на sizes помага за по-добра производителност, защото намалява риска от зареждане на изображения с ненужно голям размер. Това влияе върху потребителското преживяване, мобилното зареждане и показатели като Largest Contentful Paint, когато основното съдържание включва голяма снимка. Атрибутът не е самостоятелен фактор за класиране, но е част от техническата оптимизация, която прави страниците по-бързи и по-стабилни.
Пример
Ако изображението е 100% от ширината на екрана при малки устройства и 600 пиксела при по-големи екрани, sizes може да опише точно това поведение. Така браузърът няма нужда да гадае и няма да изтегли голям десктоп вариант, когато потребителят е на мобилен телефон.
Чести грешки
- Използване на srcset без sizes, когато изображенията имат различна layout ширина.
- Задаване на стойности, които не отговарят на реалния CSS layout.
- Приемане, че атрибутът променя самия дизайн, вместо да описва как дизайнът вече работи.
Свързани понятия
Темата е свързана с responsive images, srcset, lazy loading, Core Web Vitals, оптимизация на изображения и мобилна производителност. Заедно тези техники помагат страницата да зарежда точния ресурс за конкретния екран.
Заявете SEO одит