Руководство

Как скачать фоновые изображения и картинки с ленивой загрузкой

Сначала прокрутите всю страницу, а затем откройте IDM - Bulk Download Manager Extension. Расширение читает стили страницы и атрибуты ленивой загрузки, поэтому фоновые изображения CSS и картинки, подгружаемые при прокрутке, появляются в списке «Изображения» рядом с обычными. Пункт «Сохранить картинку как» в контекстном меню до большинства из них не дотягивается: нет элемента изображения, на котором можно нажать правой кнопкой мыши, либо оно ещё не загрузилось.

Обновлено · 5 мин чтения

Почему такие изображения трудно сохранить

Фоновые изображения

Многие баннеры, карточки и галереи задают картинку в таблице стилей страницы как фон, а не с помощью элемента изображения. Правый клик по ней открывает обычное меню страницы, без пункта «Сохранить картинку как». Изображение есть, но его адрес известен только стилям.

Изображения с ленивой загрузкой

Чтобы загружаться быстрее, страницы часто получают изображение, только когда вы докручиваете до него. До этого настоящий адрес находится в атрибуте вроде data-src, а на экране видна пустая или размытая заглушка. Страницы с бесконечной прокруткой идут дальше и добавляют новые изображения, только когда вы доходите до конца.

Как скачать их с помощью IDM - Bulk Download Manager Extension

  1. Прокрутите страницу

    Медленно прокрутите до конца или несколько раз нажмите End и немного подождите, чтобы подгрузились ленивые изображения и новые порции.

  2. Откройте всплывающее окно

    Нажмите на значок IDM. Если окно уже было открыто, нажмите «Пересканировать» вверху, чтобы заново прочитать страницу.

  3. При необходимости снизьте фильтр по размеру

    Минимальный размер может скрывать небольшие декоративные фоны. Выберите «Любой размер», чтобы увидеть всё. Изображения, размер которых ещё неизвестен, показываются всегда.

  4. Выберите и скачайте

    Наведите курсор на миниатюру, чтобы проверить имя и размер, выберите нужное и нажмите «Скачать выбранное» или ZIP, чтобы получить один файл.

Где расширение ищет

  • Стили: фоновые изображения, изображения рамок и маркеры списков, как из таблиц стилей, так и из встроенных стилей.
  • Атрибуты ленивой загрузки: data-src, data-lazy-src, data-original, data-bg, data-srcset и другие распространённые варианты.
  • Адаптивные изображения: все размеры, указанные в srcset и в источниках <picture>, так что можно выбрать самый большой.
  • Изображения, загруженные скриптом: те, что страница получила скриптом; они берутся из списка загруженных браузером файлов.
  • Вся страница: встроенные фреймы, открытые веб-компоненты и превью видео.

Что расширение не может найти

  • Изображения, нарисованные на <canvas>, например в некоторых просмотрщиках и играх. Это пиксели на экране, а не файлы.
  • Изображения, которые страница хранит в собственной памяти (адреса blob:). Они существуют только внутри этой вкладки, и снаружи их не скачать.
  • Фоны, добавленные через декоративные элементы ::before и ::after.
  • Изображения, которые страница уже удалила. Некоторые очень длинные ленты убирают старые картинки при прокрутке. Прокрутите часть ленты, скачайте, затем продолжайте.

Мелкие значки иногда хранятся в одном изображении-«спрайте», где десятки значков расположены рядом. Вы получите весь лист, а не отдельные значки.

Без расширения: инструменты разработчика

Инструменты разработчика Chrome могут найти любое изображение, но по одному:

  1. Нажмите правой кнопкой мыши рядом с изображением и выберите Просмотреть код.
  2. На панели «Стили» найдите background-image: url(…) у выбранного элемента или его родителей. Для ленивых изображений ищите data-src у элемента изображения.
  3. Нажмите на адрес правой кнопкой мыши, откройте его в новой вкладке и воспользуйтесь командой «Сохранить картинку как».

Или откройте панель Сеть, выберите фильтр Img и прокрутите страницу: каждое загружаемое изображение появится в списке, и его можно будет открыть. Оба способа работают, но на каждое изображение уходит по несколько минут.

Вопросы и ответы

Почему я вижу одну и ту же картинку в нескольких размерах?

Адаптивные изображения предлагают несколько версий для разных экранов. В списке есть все, так что можно оставить самую большую: установите фильтр по размеру на 512 пикселей или наведите курсор, чтобы сравнить размеры.

Некоторые миниатюры пустые или размытые. Что это?

Обычно это заглушки, которые показываются до загрузки настоящего изображения. Прокрутите страницу до этого места и нажмите «Пересканировать»: в списке появится полное изображение.

Работает ли расширение на страницах с бесконечной прокруткой?

Да, для всего, что успело загрузиться. Прокрутите настолько, насколько нужно, нажмите «Пересканировать» и скачайте. С очень длинными лентами действуйте в несколько заходов.