Задать вопрос
Balya

Александр Баля

Люди и технологии
Ответы пользователя по тегу Изображения

  • Есть ли NPM пакет для замены img на picture?

    Balya
    @Balya
    Люди и технологии
    Для создания копий изображений в формате webp можно использовать gulp-webp. Он делает дополнительный файл с тем же именем, что и у исходного изображения, но в формате webp - очень удобно.

    Потом не обязательно оборачивать все изображения в <picture>, есть способ попроще с использованием .htaccess. Идея в том, чтобы подменять пути на уровне веб-сервера в зависимости от поддержки в браузере.

    Я также иногда использую gulp-webpcss в связке с Modernizr.
    Ответ написан
    1 комментарий
    1 комментарий

  • Gulp-imagemin не достаточно хорош для Google PageSpeed Insights?

    Balya
    @Balya
    Люди и технологии
    Используйте mozjpeg - он дает отличные результаты. Вот мой конфиг:

    var gulp   = require('gulp'),
    chalk = require('chalk'),
    plugin = require('gulp-load-plugins')(),
    browserSync = require('browser-sync').create();
plugin.imagemin.mozjpeg = require('imagemin-mozjpeg');
plugin.imagemin.pngquant = require('imagemin-pngquant');

gulp.task('img', function () {
	gulp.src(path.src.img)
		.pipe(plugin.plumber({
			errorHandler: plugin.notify.onError("Ошибка: <%= error.message %>")
		}))
		.on('end', function(){ plugin.util.log(chalk.cyan('Инициализирован обработчик ошибок изображений')); })
		.pipe(plugin.imagemin([
            plugin.imagemin.gifsicle({interlaced: true}),
            plugin.imagemin.jpegtran({progressive: true}),
            plugin.imagemin.mozjpeg({progressive: true}),
            plugin.imagemin.optipng({optimizationLevel: 7}),
            plugin.imagemin.pngquant({quality: '85-100'}),
            plugin.imagemin.svgo({plugins: [{removeViewBox: true}]})
        ]))
		.pipe(gulp.dest(path.build.img))
		.on('end', function(){ plugin.util.log(chalk.cyan('Оптимизированы изображения')); })
		.pipe(browserSync.stream());
});
    Ответ написан
    Комментировать
    Комментировать