Метка: images
Лучший способ отложенной загрузки изображений для максимальной производительности
<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!'));upscaler – онлайн сервис по улучшению качества картинки
Полностью автоматизированный процесс, который использует машинное обучение для распознавания образов и определения того, как должны выглядеть края и фигуры в изображении, увеличивая при этом общий размер. Этот процесс прошел обучение на больших наборах данных, что позволяет ему точно очищать изображения.
JustClear/blurify – js для размытия изображения
import blurify from 'blurify';
new blurify({
images: document.querySelectorAll('.blurify'),
blur: 6,
mode: 'css',
});
// or in shorthand
blurify(6, document.querySelectorAll('.blurify'));robinloeffel / cosha – js скрипт создает разноцветные тени для изображений
Простой и легкий (меньше 1кб)
import cosha from 'cosha';
cosha({
className: 'colorful-shadow',
blur: '10px',
brightness: '125%',
saturation: '110%',
x: '2px',
y: '6px'
});
Unveil.js – lazy load images
Загрузка изображений по мере прокрутки страницы http://luis-almeida.github.io/unveil/