Perintah Linux favorit saya untuk mengoptimalkan gambar web

Saya dulu menjauhi gambar saat bekerja online. Penanganan dan pengoptimalan gambar bisa jadi tidak tepat dan memakan waktu.

Kemudian saya menemukan beberapa perintah yang mengubah pikiran saya. Untuk membuat halaman web, saya menggunakan Jekyll, jadi saya menyertakannya di petunjuknya. Namun, perintah ini juga akan bekerja dengan generator situs statis lainnya.

Perintah gambar di Linux

Lebih banyak sumber daya Linux

• Lembar contekan perintah Linux
• Lembar contekan perintah Linux tingkat lanjut
• Kursus online gratis:Ikhtisar Teknis RHEL
• Lembar contekan jaringan Linux
• Lembar contekan SELinux
• Lembar contekan perintah umum Linux
• Apa itu container Linux?
• Artikel Linux terbaru kami

Perintah yang membuat semua perbedaan bagi saya adalah optipng , jpegoptim , dan, tentu saja, imagemagick . yang terhormat . Bersama-sama, mereka membuat penanganan gambar menjadi mudah untuk dikelola atau bahkan diotomatisasi.

Berikut ini ikhtisar tentang bagaimana saya menerapkan solusi saya menggunakan perintah ini. Saya menempatkan gambar artikel di static/images saya map. Dari sana, saya membuat dua salinan dari semua gambar PNG dan JPG:

1. Versi gambar mini yang dipotong berukuran 422 kali 316
2. Versi spanduk yang lebih besar, berukuran 1024 kali 768

Kemudian saya menempatkan setiap salinan (thumbnail dan spanduk) ke dalam foldernya sendiri, dan saya memanfaatkan variabel khusus Jekyll untuk jalur folder. Saya menguraikan masing-masing langkah ini secara lebih rinci di bawah ini.

Pemasangan

Untuk mengikuti solusi saya, pastikan Anda telah menginstal semua perintah. Di Linux, Anda dapat menginstal optipng , jpegoptim , dan imagemagick menggunakan pengelola paket Anda.

Di Fedora, CentOS, Mageia, dan sejenisnya:

$ sudo dnf install optipng jpegoptim imagemagick

Di Debian, Elementary, Mint, dan sejenisnya:

$ sudo apt install optipng jpegoptim imagemagick

Di macOS, gunakan MacPorts atau Homebrew.

brew install optipng jpegoptim imagemagick

Di Windows, gunakan Chocolatey.

Membuat folder untuk gambar mini dan spanduk

Setelah menginstal perintah, saya membuat folder baru di bawah static/images . Thumbnail yang dihasilkan ditempatkan ke img-thumbs , dan spanduk masuk img-normal .

$ cd static/images

$ mkdir -p img-thumbs img-normal

Dengan folder yang dibuat, saya menyalin semua file GIF, SVG, JPG, dan PNG ke kedua folder. Saya menggunakan GIF dan SVG apa adanya untuk gambar mini dan spanduk.

$ cp content/*.gif img-thumbs/; cp content/*.gif img-normal/

$ cp content/*.svg img-thumbs/; cp content/*.svg img-normal/

$ cp content/*.jpg img-thumbs/; cp content/*.jpg img-normal/

$ cp content/*.png img-thumbs/; cp content/*.png img-normal/

Memproses gambar mini

Untuk mengubah ukuran dan mengoptimalkan thumbnail, saya menggunakan tiga perintah saya.

Saya menggunakan mogrify perintah dari ImageMagick untuk mengubah ukuran JPG dan PNG. Karena saya ingin thumbnail menjadi 422 kali 316, perintahnya terlihat seperti ini:

$ cd img-thumbs

$ mogrify -resize 422x316 *.png

$ mogrify -format jpg -resize 422x316 *.jpg

Sekarang saya mengoptimalkan PNG menggunakan optipng dan JPG menggunakan jpegoptim :

$ for i in *.png; do optipng -o5 -quiet "$i"; done

$ jpegoptim -sq *.jpg

Pada perintah di atas:

• Untuk optipng , -o5 switch menyetel tingkat pengoptimalan, dengan 0 sebagai yang terendah.
• Untuk jpegoptim , -s menghapus semua metadata gambar, dan -q menyetel mode senyap.

Memproses spanduk

Saya memproses gambar spanduk pada dasarnya dengan cara yang sama seperti saya memproses gambar mini, selain dari dimensinya, yaitu 1024 kali 768 untuk spanduk.

$ cd ..

$ cd img-normal

$ mogrify -resize 1024x768 *.png

$ mogrify -format jpg -resize 1024x768 *.jpg

$ for i in *.png; do optipng -o5 -quiet "$i"; done

$ jpegoptim -sq *.jpg

Mengonfigurasi jalur di Jekyll

img-thumbs direktori sekarang berisi thumbnail saya. dan img-normal berisi spanduk. Untuk mempermudah hidup saya, saya mengatur keduanya ke variabel khusus di Jekyll _config.yml saya .

content-images-path: /static/images/img-normal/

content-thumbs-images-path: /static/images/img-thumbs/

Menggunakan variabel itu sederhana. Ketika saya ingin menampilkan thumbnail, saya menambahkan content-thumbs-images-path ke gambar. Ketika saya ingin menampilkan spanduk penuh, saya menambahkan content-images-path .

{% if page.banner_img %}

 <img src="{{ page.banner_img | prepend: site.content-images-path | \

prepend: site.baseurl | prepend: site.url }}" alt="Banner image for \

{{ page.title }}" />

{% endif %}

Kesimpulan

Ada beberapa peningkatan yang dapat saya lakukan pada perintah pengoptimalan saya.

Menggunakan rsync untuk menyalin hanya file yang diubah ke img-thumbs dan img-normal adalah salah satu peningkatan yang jelas. Dengan begitu, saya tidak memproses ulang file berulang kali. Menambahkan perintah tersebut ke kait pra-komit Git atau pipeline CI adalah langkah berguna lainnya.

Mengubah ukuran dan mengoptimalkan gambar untuk mengurangi ukurannya adalah kemenangan bagi pengguna dan web secara keseluruhan. Mungkin langkah saya selanjutnya untuk mengurangi ukuran gambar adalah webp.

Lebih sedikit byte yang ditransmisikan melalui kabel berarti jejak karbon yang lebih rendah, tapi itu artikel lain. Kemenangan UX cukup bagus untuk saat ini.

Artikel ini awalnya diposting di blog penulis dan telah diterbitkan ulang dengan izin.