Заявете SEO одит srcset е HTML атрибут, който позволява към едно изображение да бъдат посочени няколко файла с различни размери или плътност на пикселите. Браузърът избира най-подходящия вариант според устройството, екрана, мрежата и описанието на layout-а.
Какво означава srcset?
При стандартен img елемент атрибутът src посочва един основен файл. srcset разширява това поведение, като дава списък от алтернативи. Всяка алтернатива може да бъде описана с ширина, например 480w или 1200w, или с плътност, например 2x. Когато е използван вариант с ширини, обикновено е нужен и атрибутът sizes, за да разбере браузърът колко голямо ще бъде изображението в конкретния изглед.
Защо е важно за SEO?
Изображенията често са сред най-тежките ресурси на една страница. Добре настроеният srcset намалява ненужния трафик, ускорява зареждането и подобрява мобилното преживяване. Това е важно за техническо SEO, защото търсачките оценяват страници, които са достъпни, стабилни и удобни за потребителите. Ползата е особено видима при продуктови снимки, hero изображения, блог и медийни сайтове.
Пример
Една снимка може да има варианти с ширина 400, 800 и 1200 пиксела. Мобилен браузър може да избере 400 или 800 пиксела, докато голям екран може да зареди 1200 пиксела. Така изображението изглежда ясно, без да се изпраща най-големият файл към всяко устройство.
Чести грешки
- Качване на различни размери, които визуално не са една и съща снимка.
- Липса на sizes при варианти, описани с ширина.
- Създаване на твърде много варианти без реална полза за дизайна и потребителите.
- Комбиниране на srcset с лошо компресирани файлове, което ограничава ефекта върху скоростта.
Свързани понятия
Свързани понятия са responsive images, sizes, image compression, WebP, AVIF, lazy loading, Largest Contentful Paint и Core Web Vitals. srcset е само една част от цялостната оптимизация на изображенията.