← Все статьи

Гайды

Правила увеличения изображений при наведении и быстрого скачивания

17 мая 2026 · автор JustZix Team

Изображения — вторая половина взятия медиа под контроль. Это руководство собирает три правила JustZix для работы с картинками: увеличение при наведении, нетерпеливая загрузка, чтобы ничего не оставалось пустым, и кнопка быстрого скачивания, уважающая правила одного источника.

Увеличение при наведении, только на CSS

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

img {
  transition: transform .18s ease;
}

img:hover {
  transform: scale(1.6);
  position: relative;
  z-index: 2147483647;
}

Масштабирование через transform сохраняет вёрстку стабильной, потому что изображение по-прежнему занимает свою исходную коробку. Высокий z-index при наведении означает, что увеличенное изображение плавает над соседним контентом, а не обрезается.

Точная лупа с JavaScript

Для детальных изображений лупа, следующая за курсором, бьёт плоское масштабирование. Это правило отслеживает указатель и сдвигает точку начала трансформации изображения к месту под курсором.

(function () {
  document.addEventListener('pointermove', function (e) {
    var img = e.target;
    if (!img || img.tagName !== 'IMG') { return; }
    var r = img.getBoundingClientRect();
    var x = ((e.clientX - r.left) / r.width) * 100;
    var y = ((e.clientY - r.top) / r.height) * 100;
    img.style.transformOrigin = x + '% ' + y + '%';
  }, true);
  document.addEventListener('pointerenter', function (e) {
    if (e.target && e.target.tagName === 'IMG') {
      e.target.style.transform = 'scale(2.4)';
      e.target.style.transition = 'transform .12s';
    }
  }, true);
  document.addEventListener('pointerleave', function (e) {
    if (e.target && e.target.tagName === 'IMG') {
      e.target.style.transform = '';
    }
  }, true);
})();

Лупа увеличивает к тому месту, где находится курсор, так что панорамирование по большой картинке ощущается естественно. Сброс transform на pointerleave возвращает изображение к нормальному размеру.

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

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

document.querySelectorAll('img[loading="lazy"]').forEach(function (img) {
  img.loading = 'eager';
  if (img.dataset.src && !img.src) {
    img.src = img.dataset.src;
  }
  if (img.dataset.srcset && !img.srcset) {
    img.srcset = img.dataset.srcset;
  }
});

Многие сайты прячут настоящий URL в атрибуте data-src и копируют его в src, только когда изображение прокручивается в зону видимости. Копирование его самостоятельно принуждает загрузку немедленно. Та же идея работает для srcset.

Кнопка скачивания в один клик

Это правило добавляет небольшую кнопку скачивания в угол каждого изображения, когда вы наводите на него. Оно использует стандартный атрибут download на якоре, который просит браузер сохранить файл.

(function () {
  document.addEventListener('pointerenter', function (e) {
    var img = e.target;
    if (!img || img.tagName !== 'IMG' || img._dl) { return; }
    img._dl = true;
    var a = document.createElement('a');
    a.textContent = 'Сохранить';
    a.href = img.currentSrc || img.src;
    a.download = '';
    a.style.cssText = 'position:absolute;z-index:2147483647;'
      + 'background:#111;color:#fff;font:600 11px sans-serif;'
      + 'padding:3px 7px;border-radius:5px;text-decoration:none';
    var r = img.getBoundingClientRect();
    a.style.left = (r.left + window.scrollX + 4) + 'px';
    a.style.top = (r.top + window.scrollY + 4) + 'px';
    document.body.appendChild(a);
    img.addEventListener('pointerleave', function () {
      a.remove();
      img._dl = false;
    }, { once: true });
  }, true);
})();

Атрибут download работает чисто для изображений с того же источника. Для изображений с другого источника браузер может вместо сохранения открыть файл в новой вкладке, что является ожидаемым поведением, а не тем, что правилу стоит пытаться побороть. Использование currentSrc выбирает разрешение, которое браузер действительно выбрал из адаптивного srcset.

Собираем всё вместе

• Запускайте CSS увеличения при наведении на весь сайт; оно дешёвое и безвредное.
• Приберегите JavaScript-лупу для сайтов, насыщенных изображениями, вроде галерей или документации.
• Сочетайте правило нетерпеливой загрузки с кнопкой скачивания, чтобы картинка была полностью загружена до того, как вы её сохраните.

Все три доступны в наших готовых примерах или скачайте JustZix и постройте свои. Для видеостороны управления медиа начните с принудите нативное управление на каждом видео.