const gulp = require('gulp');
const es = require('event-stream');
gulp.task('move:img', (cb) => {
let mdpi = gulp.src('./img/**/*_mdpi.png')
.pipe(gulp.dest('./dist/mdpi'));
let hdpi = gulp.src('./img/**/*_hdpi.png')
.pipe(gulp.dest('./dist/hdpi'));
let xhdpi = gulp.src('./img/**/*_xhdpi.png')
.pipe(gulp.dest('./dist/xhdpi'));
return es.concat(mdpi, hdpi, xhdpi);
}
Модуль PageSpeed
Google потрудился и выпустил модуль к Ngnix и Apache для повышения производительности сайтов. Он увеличивает скорость загрузки, оптимизируя дофига всяких параметров, в том числе и фотки. Работает автоматически, его нужно только установить и включить:pagespeed on; pagespeed FileCachePath /var/cache/nginx;
Модуль делает все сам — и анализирует HTML, и оптимизирует ресурсы. Например, пережимает картинки или минифицирует статику. В исходниках страницы все оптимизированные ресурсы будут иметь другой путь.
Прямая оптимизация ресурсов
После оптимизации PageSpeed сохраняет файл по новому пути. Но как быть с фотками, отображаемыми через JavaScript? Или со ссылками на Ваши фотки на сторонних ресурсах? Тут на помощь приходит IPRO – оптимизация ресурсов не отходя от кассы, а точнее не изменяя URL.
Для этого достаточно включить в конфиг такие инструкции (для Nginx):pagespeed InPlaceResourceOptimization on;
Конспект
Используйте PageSpeed для поиска проблем с графикой на сайте.
Если графики много, используйте серверные инструменты для оптимизации: jpegtran, jpegoptim, ImageMagick, pngquant, pngcrush.
Облачные инструменты для одноразовых задач и подключения по API: JPEGmini, tinyPNG, i.onthe.io/google_speed.
Модуль PageSpeed к Nginx/Apache сделает всю оптимизацию сам, но его нужно собирать.