Лучший способ отложенной загрузки изображений для максимальной производительности

 <picture>
    <source data-srcset="path/to/image.webp" type="image/webp" />
    <source data-srcset="path/to/image.jpg" />
    <img loading="lazy" 
        class="lazyload"
        src="path/to/placeholder/image.png"
        data-src="path/to/image.jpg"
        alt="Image description"
    />
</picture>
<script>
    if ("loading" in HTMLImageElement.prototype) {
        var images = document.querySelectorAll('img[loading="lazy"]');
        var sources = document.querySelectorAll("source[data-srcset]");
        sources.forEach(function (source) {
            source.srcset = source.dataset.srcset;
        });
        images.forEach(function (img) {
            img.src = img.dataset.src;
        });
    } else {
        var script = document.createElement("script");
        script.src = "/link/to/lazyload.js";
        document.body.appendChild(script);
    }
</script>

https://github.com/aFarkas/lazysizes

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

Для неподдерживаемых браузеров нам нужно только загрузить плагин JavaScript и, при желании, запустить его (если это не делается автоматически). Я использовал lazysize.

nodeca / pica – изменение размера изображения в браузере с высоким качеством и высокой скоростью

const pica = require('pica')();

// Resize from Canvas/Image to another Canvas
pica.resize(from, to, {
  unsharpAmount: 80,
  unsharpRadius: 0.6,
  unsharpThreshold: 2
})
.then(result => console.log('resize done!'));

// Resize & convert to blob
pica.resize(from, to)
  .then(result => pica.toBlob(result, 'image/jpeg', 0.90))
  .then(blob => console.log('resized to canvas & created blob!'));

https://github.com/nodeca/pica

upscaler – онлайн сервис по улучшению качества картинки

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

https://icons8.com/upscaler

robinloeffel / cosha – js скрипт создает разноцветные тени для изображений

Простой и легкий (меньше 1кб)

import cosha from 'cosha';

cosha({
  className: 'colorful-shadow',
  blur: '10px',
  brightness: '125%',
  saturation: '110%',
  x: '2px',
  y: '6px'
});

https://github.com/robinloeffel/cosha

  1. 1
  2. 2
Scroll Up