{"draftJsState":{"blocks":[{"data":{"image":{"id":"6aa0718a273d2556375633f1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4ingv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во время загрузки сайта тег IMG занимает нулевой размер на странице. Затем при загрузке самого файла, блок раздвигает все элементы вокруг себя и занимает нужный размер. В этот момент, когда элементы страницы «толкаются» в стороны, происходит пересчёт макета в браузере.","type":"unstyled","key":"ejr3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это требует времени центрального процессора на обсчёт новых позиций и размеров блоков и создаёт визуальный дискомфорт: страница дёргается, прыгает и скачет во время загрузки страницы. Также текст на странице начинает убегать вниз из-за появляющихся изображений, заставляя пользователя «ловить» строчку текста, которую он уже начал читать.","type":"unstyled","key":"e8cfp"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":27,"offset":26}],"inlineStyleRanges":[],"text":"Эта статья — актуализация статьи англоязычного автора 2020 года и её расширение с учётом последних обновлений браузеров. Также материал структурирован от простого к сложному с более наглядными примерами, чтобы было увлекательней читать. Внутри есть интерактивные примеры, которые можно исследовать самостоятельно в браузере с помощью профайлера браузера.","type":"unstyled","key":"csoq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скачущие изображения, как они появляются?","type":"header-three","key":"chuu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возьмём простую страницу с таким кодом:","type":"unstyled","key":"bivs3"},{"data":{"image":{"id":"6aa070ef273d255637555fcb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5dp3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во время загрузки такой страницы вы увидите следующую картину: после загрузки HTML кода страницы отобразится весь текст, затем загрузится картинка и второй параграф резко сместится вниз, освобождая место под появившуюся картинку.","type":"unstyled","key":"766n1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот резкий скачок текста, вызванного появлением изображения, и называется «прыгающим изображением». Потому что резкое перестраивание структуры страницы и смещение крупных блоков выглядит как прыжок.","type":"unstyled","key":"8enu9"},{"data":{"image":{"id":"6aa06f928d73923b15197b3f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Слева — страница до загрузки картинки, справа — после. Как видите, текст под картинкой сместился вниз.","type":"atomic:image","key":"c3qrl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чем они вредны скачущие изображения?","type":"header-three","key":"c5use"},{"data":{"image":{"id":"6aa06f9255eb955ca6b9eb44"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавление width и height экономит около 12% процентов процессорного времени.","type":"atomic:image","key":"c03q3"},{"data":{"image":{"id":"6aa06f92fd1a787141425d9f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Видно, что график загрузки CPU скачет каждый раз, при загрузке картинок. Без width и height пики использования ЦПУ массивней.","type":"atomic:image","key":"6gcb1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скачущие изображения вредны по следующим причинам:","type":"unstyled","key":"3rdtr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Масштабное смещение блоков требует от браузера пересчитывать структуру страницы. Эта операция может занимать сотни миллисекунд. На мобильных устройствах с их медленными процессорами эта проблема особенно актуальна. Страница может содержать десятки скачущих изображений, и тогда, из-за многократных пересчётов структуры страницы, суммарное время задержки может составлять секунды.","type":"ordered-list-item","key":"5arr5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуальные рывки при загрузке страницы выглядят отталкивающе. Это подсознательно настраивает пользователя быть менее внимательным при изучении страницы или начать торопиться, что уменьшает вовлечённость пользователей. Плавная загрузка всегда предпочтительней.","type":"ordered-list-item","key":"22bds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользователи могут начать читать текст и по мере загрузки картинок весь текст начинает резко убегать вниз. Каждый был в такой ситуации, особенно на мобильных устройствах с их медленным интернетом. Ловить нужную строку текста, когда она от тебя убегает вниз экрана — то ещё удовольствие.","type":"ordered-list-item","key":"b7h6u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основное решение проблемы","type":"header-three","key":"djk90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наша задача - заранее зарезервировать место под будущую картинку. Для этого нужно просто указать у тега аттрибуты height и width. В CSS свойствах для этого элемента указываем width: 100%, а height: auto. Вот полный код:","type":"unstyled","key":"a6m5e"},{"data":{"image":{"id":"6aa07101416dbe541ad8c820"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e8sbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При таком коде происходит следующее:","type":"unstyled","key":"6k60n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Загружается HTML страница.","type":"ordered-list-item","key":"fpiqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":102,"style":"BOLD"}],"text":"Согласно CSS свойству, ширина изображения растянется до 100% блока, в котором оно находится. При этом будут сохранены пропорции изображения 800х600 пикселей, указанные аттрибутах width и height.","type":"ordered-list-item","key":"4dm7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом, не дожидаясь загрузки самой картинки, браузер сразу выделит то пространство, которое в будущем займёт изображение после загрузки. Страница не будет дёргаться, перестраиваться и прятать строки текста вниз во время загрузки.","type":"unstyled","key":"o5bc"},{"data":{"image":{"id":"6aa06f927938a166ddeb04b7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Без CSS свойства height: auto изображения будут растягиваться вот так.","type":"atomic:image","key":"h4v1"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":15,"offset":95}],"inlineStyleRanges":[],"text":"Для тега аттрибуты width и height нужно указывать для тегов (было внедрено в 2021–2022 годах) вот так:","type":"unstyled","key":"eida2"},{"data":{"image":{"id":"6aa0711d197af90d6b9e7c9b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"loci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Альтернативные решения проблемы","type":"header-two","key":"dku4b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данные решения стоит применять лишь в очень специфических случаях, либо ради реализации совместимости со старыми браузерами. С точки зрения простоты понимания и дальнейшей поддержки кода, решение с аттрибутами width и height выигрывает во всём.","type":"unstyled","key":"55qf2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Трюк через padding-bottom (плохой вариант)","type":"header-three","key":"ad0j8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот трюк позволяет задать блок с заранее известным соотношением сторон. Изображение будет умещено в него.","type":"unstyled","key":"5q2mv"},{"data":{"image":{"id":"6aa0713aed3d775270d82903"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7mab2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Трюк довольно старый, но использовать его не нужно, потому что:","type":"unstyled","key":"8i6bi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Управление соотношением сторон изображения проходит сразу в нескольких местах: HTML коде, в нескольких местах CSS кода (когда нужно задавать разные картинки для разных экранов). Чем сильней разбросаны участки кода, выполняющих одну задачу — тем сложнее с ними работать.","type":"ordered-list-item","key":"4tfvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новички в веб-разработке могут не понять, суть техники и принцип её работы. Управлять высотой элемента через указание внутреннего отступа снизу может быть для них не очевидно.","type":"ordered-list-item","key":"fb6sv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS код имеет тенденцию к наращиванию, а не к переписыванию. В случае каких-либо визуальных правок или замены изображения специалист не осмелится менять существующее свойство padding-bottom, так как это может затронуть другие страницы сайта. Скорее всего, программист просто добавит новый класс для редактируемой картинки, переопределяющий свойство padding-bottom. Таким образом, кода будет становиться больше.","type":"ordered-list-item","key":"a9jba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Свойство aspect-ratio (тоже плохой вариант)","type":"header-three","key":"328ch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут мы задаём соотношение сторон для изображения через специальное CSS свойство aspect-ratio.","type":"unstyled","key":"h3bl"},{"data":{"image":{"id":"6aa0714c7feaab2cdeac47fd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f84v6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вариант лучше предыдущего только краткостью. Но все проблемы остаются такими же.","type":"unstyled","key":"dl0go"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Экзотика через aspect-ratio: attr(width) / attr(height);","type":"header-three","key":"cv1sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Опция задаёт соотношение сторон на основе аттрибутов width и height элемента.","type":"unstyled","key":"4ueq5"},{"data":{"image":{"id":"6aa07160b086676b6601ef00"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"d7n3l"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":20,"offset":33},{"key":3,"length":27,"offset":105},{"key":4,"length":10,"offset":159},{"key":5,"length":5,"offset":216}],"inlineStyleRanges":[],"text":"Опция вызвала бурные обсуждения: 100+ сообщений в Git и множество упоминаний в других темах, официальную дискуссию на 200+ сообщений представителями W3C, есть публикации на эту темы блогерами-экспертами, в том числе видео.","type":"unstyled","key":"52b78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По факту оно работает так же, как аттрибуты width и height, но на чей-то вкус считается более «элегантным» с точки зрения красоты кода.","type":"unstyled","key":"8jo19"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для нас — прикладных программистов это означает только одно: нам просто надо знать ещё +1 способ решения задачи прыгающих изображений, чтобы не запутаться при встрече такой строчки кода.","type":"unstyled","key":"asb1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Другие медиа компоненты: