Saya ingin menguji imagemin-contrib di Grunt.js. Saya memilih tiga jpg gambar acak (ukuran: 44kb, 92kb, 77kb, masing-masing) dan mengatur folder dan plugin.

Ketika saya menjalankan tugas kasar imagemin, saya menerima pesan yang mengatakan bahwa foto-foto itu berhasil dioptimalkan, tetapi angka-angkanya hanya menunjukkan pengurangan ukuran 5kb atau 10kb untuk dua foto pertama, dan yang ketiga tidak berubah sama sekali .

Saya bertanya-tanya apakah ini normal untuk "gambar yang dioptimalkan"? Saya mengharapkan penurunan ukuran yang lebih drastis. Mungkinkah gambar yang saya pilih sudah dioptimalkan? Atau mungkinkah dalam cara saya menulis perintah grunt?

Di bawah ini adalah kode yang saya gunakan untuk menjalankan perintah grunt:

module.exports = function(grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        //Image Min Plugin
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'photos/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'photos/optim/'
                }]
            }
        }


    });

    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.registerTask('default', ['imagemin']);
};
1
Theodore Steiner 1 Desember 2017, 22:06

1 menjawab

Jawaban Terbaik

Informasi umum

Yah itu benar-benar tergantung pada keadaan asli gambar-gambar ini. Jika mereka sudah dikompresi (misalnya saat mengekspor dengan photoshop) mereka hampir tidak dapat dikompresi lebih lanjut tanpa kehilangan kualitas. Jadi sangat mungkin bahwa Anda tidak akan mendapat untung banyak dengan pengoptimalan. Namun, jika ini adalah gambar yang tidak dikompresi grunt-contrib-imagemin dapat banyak membantu.

Plugin melakukan pekerjaan yang baik untuk apa yang seharusnya dilakukan, tetapi jelas tidak memampatkan gambar jika ada penurunan kualitas. Juga tidak tahu apakah gambar dapat diubah ukurannya (yang seringkali merupakan kompresi yang sangat baik). Jika Anda mencari kompresi terbaik, Anda dapat menjalankan wawasan kecepatan halaman (https://developers.google .com/speed/pagespeed/insights/) yang memberi tahu Anda apakah Anda dapat mengompresi gambar lebih lanjut tanpa kehilangan dan jika Anda dapat mengoptimalkan gambar dengan mengunggahnya dalam resolusi yang berbeda. Jika Anda ingin/membutuhkan lebih banyak kompresi, pertimbangkan kompresi lossy, yang dapat menghemat banyak kbs dengan hanya sedikit kehilangan kualitas.

Opsi Tingkat pengoptimalan:

Meskipun tidak akan banyak mempengaruhi ukuran kompresi, ada opsi optimizationLevel yang dapat disetel ke level antara 0 dan 7. Opsi ini memungkinkan serangkaian operasi pengoptimalan dan disetel ke 3 secara default. Semakin tinggi Anda mengatur level, semakin mahal secara komputasi operasi kompresi (seharusnya tidak masalah). Jadi Anda dapat mengaturnya ke 7 dan melihat apakah pengaruhnya terhadap kompresi:

imagemin: {
            options: {
                optimizationLevel: 7
            }
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'photos/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'photos/optim/'
                }]
            }
        }

Tingkat pengoptimalan 0 memungkinkan serangkaian operasi pengoptimalan yang memerlukan sedikit usaha. Tidak akan ada perubahan pada atribut gambar seperti kedalaman bit atau jenis warna, dan tidak ada kompresi ulang aliran data IDAT yang ada. Tingkat pengoptimalan 1 memungkinkan uji coba kompresi IDAT tunggal. Uji coba yang dipilih adalah yang menurut OptiPNG mungkin yang paling efektif. Tingkat pengoptimalan 2 dan lebih tinggi memungkinkan beberapa uji coba kompresi IDAT; semakin tinggi levelnya, semakin banyak cobaan.

Referensi: https://github.com/gruntjs/grunt-contrib-imagemin

1
kentor 1 Desember 2017, 19:27