Проблема с интерактивностью при открытии статьи, подгружающей объемные визуальные данные

[corocoto]

Проблема

При попытке раскрыть советы "На практике" из статьи DOMContentLoaded можно столкнуться с проблемой интерактивности. Простыми словами, блок с советом не будет развернут до тех пор, пока объемная картинка из примера не загрузится целиком.

Детали по загрузке

Варианты решения

1. Сжать на чуть-чуть изображение. Чтобы и пример можно было показать во всей красе, но чтобы и ui не блокировался - найти золотую середину. Могу предложить guetzli для jpeg'ов.
2. В добавок к п.1 или в качестве его альтернативы, использовать современные форматы изображений. Например, у AVIF улучшенный алгоритм сжатия, и меньший размер файла. А у WEBP все тоже самое что и у AVIF, но в добавок ко всему прочему, более качественные переходы цвета.
3. По умолчанию отображать вариант демки без подгрузки картинки:

P.S. Уверен, что есть альтернативные варианты решения проблемы. Поэтому с радостью делитесь, будет полезно.

[solarrust]

Привет! Кажется, большой размер картинки в этой доке имеет критическое значение. Пусть @HellSquirrel поправит меня, если я ошибаюсь.

Я бы пошла чуть более простым путём и поменяла местами стадии демки, как ты и предлагаешь в п.3. Сперва показывала «без картинки», а уже по кнопке «с картинкой». Было бы круто протестировать решит ли это описанную тобой проблему.