Как правильно вставлять изображения при наличии двух тем оформления сайта?

В дизайне предусмотрено наличие двух тем оформления сайта, изображения на темной теме отличаются от изображений светлой темы.

Все изображения на сайте вставлены в формате
<picture>
  <source srcset="https://uploads-ssl.webflow.com/64328ad759d957f990749456/651d340055ca7d366a9a24e7_scope-focus-item%402x.webp 1x,
                  https://uploads-ssl.webflow.com/64328ad759d957f990749456/651d33fb1a51aefff9931445_scope-focus-item%403x.webp 2x" type="image/webp">
  <source srcset="https://uploads-ssl.webflow.com/64328ad759d957f990749456/651d3416d5e38d347f44d7bb_scope-focus-item%402x.jpg 1x,
                  https://uploads-ssl.webflow.com/64328ad759d957f990749456/651d34158fa93c3fdc220fc9_scope-focus-item%403x.jpg 2x" type="image/jng">
  <img loading="lazy" src="https://uploads-ssl.webflow.com/64328ad759d957f990749456/651d3416d5e38d347f44d7bb_scope-focus-item%402x.jpg" alt="Отдельное пространство в Compass">
</picture>


Получается picture внутри него source на jpg 1x/2x и source на webp 1x/2x.

Вставка через background image-set мне не подходит поскольку хотелось бы задействовать браузерный lazyload без js скрипта.

По логике мне нужно менять source если открыта темная тема и подтыкать туда темные картинки, или наоборот светлые.

Как я думаю это сделать: рядом с каждой картинкой вставить скрипт, который будет проверять какая тема включена и вставлять после проверки нужные source. Насколько это решение правильное? Будет ли это сильно замедлять загрузку страницы?

Есть еще один вариант это все изображения засунуть в один массив и вставлять их после того как загрузился весь DOM, однако мне кажется обработка изображений сразу по мере их загрузки будет более быстрой.
  • Вопрос задан
  • 113 просмотров
Решения вопроса 1
Если нет потребности поддерживать динозавров, можно сделать прямо по красоте: вставлять в HTML оба варианта picture, указывать им специальные классы, чтобы различать картинки для тёмной и светлой тем, и, используя media-запрос prefers-color-scheme, скрывать лишнее.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@IgorAlentyev
Я такое решаю через переменные в css для темы. Потом использую как backround image
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы