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

Question

[Вячеслав Яшников]

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

Все изображения на сайте вставлены в формате

<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, однако мне кажется обработка изображений сразу по мере их загрузки будет более быстрой.

Comments

[VolgaVolga]

скрипт, который будет проверять какая тема включена

Тогда уже и событие смены темы надо отслеживать.

const query = '(prefers-color-scheme: dark)';
window.matchMedia(query).addEventListener('change', ({ matches }) => replaceImage(!matches));

Answer 1

[Алексей Уколов]

Если нет потребности поддерживать динозавров, можно сделать прямо по красоте: вставлять в HTML оба варианта picture, указывать им специальные классы, чтобы различать картинки для тёмной и светлой тем, и, используя media-запрос prefers-color-scheme, скрывать лишнее.

Comments

[Вячеслав Яшников]

Вариант очень хороший, однако необходимо ручное переключение темы, по умолчанию всегда стоит темная, светлая включается вручную

[Алексей Уколов]

Вячеслав Яшников, какая разница, как тема переключается? Важно только текущее значение.

[Алексей Уколов]

А, понял - вы про то, что на самом сайте есть переключатель темы, а не используется системное значение.
Тогда достаточно просто на html/body завести атрибут (например, data-theme) и использовать этот селектор, а не media-запрос.

.picture-light,
html[data-theme="dark"] .picture-light {
  display: none;
}

html[data-theme="light"] .picture-light, {
  display: block;
}

html[data-theme="light"] .picture-dark, {
  display: none;
}

[Вячеслав Яшников]

Алексей Уколов, в таком случае изображения в display:none тоже будут загружаться, и тем самым нагружать страницу

[Алексей Уколов]

С чего бы им загружаться?

[Вячеслав Яшников]

Алексей Уколов, хм, сколько не встречал везде пишут что display none не откладывает загрузку картинки, попробую на сайте, спасибо

Answer 2

[IgorAlentyev]

Я такое решаю через переменные в css для темы. Потом использую как backround image