HTML-де әртүрлі форматтар мен өлшемдегі суреттерді әртүрлі пиксель тығыздығы бар экрандар үшін қалай қосуға болады? picture тегі мен srcset атрибуты дегеніміз не?

HTML-де бейімделетін суреттерді жүктеу үшін srcset атрибуты мен <picture> тегін пайдаланады, олар әртүрлі құрылғылар мен пиксель тығыздығына байланысты әртүрлі форматтар мен өлшемдерді жүктеуге мүмкіндік береді.

• srcset атрибуты бір суреттің бірнеше нұсқасын әртүрлі рұқсат немесе өлшемдермен көрсетуге мүмкіндік береді. Браузер экранның пиксель тығыздығы (мысалы, 1x, 2x) немесе көрініс аймағының өлшемдеріне байланысты ең қолайлы нұсқаны өзі таңдайды.

srcset қолданудың мысалы:

<img src="image-1x.jpg" srcset="image-2x.jpg 2x, image-3x.jpg 3x" alt="Мысал">

Мұнда браузер 2x тығыздығы бар экрандар үшін image-2x.jpg, 3x үшін image-3x.jpg жүктейді.

• <picture> тегін пайдалану мүмкіндіктерін кеңейтеді, ол тек тығыздыққа ғана емес, сонымен қатар медиа сұраулар немесе файл форматтарына байланысты әртүрлі суреттерді көрсетуге мүмкіндік береді. <picture> ішінде бірнеше <source> тегін қолдануға болады, олардың media және type атрибуттары бар.

Мысал:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Мысал">
</picture>

Мұнда браузер алдымен WebP форматында суретті жүктеуге тырысады, егер қолдау көрсетілмесе, JPEG форматына ауысады.

Осылайша, srcset және <picture> әртүрлі құрылғыларға арналған суреттерді жүктеуді оңтайландырып, өнімділікті және бейнелеу сапасын жақсартады.