TGViewer
Javascript Pro Javascript Pro @projavascript · 2.51K subscribers
Post #77 4.26K
Приветствую фронты! Давно уже слышал про такую тему как <picture /> но применить на практике пришлось вот только недавно.

Задача: Отображать разные картинки в зависимости от размера девайса

Можно сделать и через CSS, но минус такого подхода в том что рендерится все-равно 2 картинки, а если элементов в которых нужно сделать такую подмену много(как у меня было) то это влияет на производительность. В итоге вспомнил про picture и применил его:

Выглядит примерно так:

<picture>
<source media="(min-width:650px)" srcset="big_pic.jpg">
<source media="(min-width:465px)" srcset="small_pic.jpg">
<img src="pic.jpg" alt="pic" style="width:auto;">
</picture>


В общем вот вам, экспериментируйте =)
More from @projavascript
  1. Sep 24, 2026HTML-верстальщик 💰 ₽50 000 – 50 000 Junior · #office · Краснодар А перед отправкой резюме…
  2. Sep 24, 2026Trainee / Junior Frontend Developer (React) 💰 ₽50 000 – 60 000 Junior · #remote · Russia…
  3. Sep 21, 2026В этом резюме есть 4 ошибки, которые могут стоить кандидату собеседования. Сможете найти х…
  4. Sep 18, 2026Frontend-разработчик (стажировка) 💰 ₽45 000 – 50 000 Junior · #office · Москва А перед от…
  5. Sep 17, 2026Предположим у вас match с вакансией - 84%. Совпадает к примеру: ✔️ API testing ✔️ SQL ✔️ P…
  6. Sep 16, 2026Frontend Developer Intern | Junior 💰 ₽45 000 – 50 000 Junior · #office · Moscow, Russia А…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →