Optimasi gambar untuk situs: pemrosesan batch menggunakan jpegtran | optipng | pngout

  1. Prasyarat
  2. Kami menggunakan rekomendasi untuk gambar
  3. Struktur arsip
  4. Instruksi singkat untuk bekerja
  5. Tambahan
  6. x64 (alias andi)

Situs tanpa gambar - sebuah anakronisme. Begitu banyak orang berpikir, dan itu bukan tanpa akal sehat. Ingat, sudah berapa lama Anda mengunjungi situs ini untuk yang terakhir kalinya dan sudah berapa lama Anda berada di situs tersebut?

Data teks jauh lebih kecil daripada gambar. Tetapi orang-orang dikenal mencintai mata mereka. Oleh karena itu, gambar-gambar akan menjadi keuntungan yang tak diragukan dari cerita.

Secara umum, berbicara tentang teks, yang kami maksud adalah konten dan presentasi visual yang nyaman, termasuk paragraf, daftar, kutipan, tabel. Namun, ini tidak cukup, dan bahkan situs berita berusaha memberikan gambar jurnalis.

Namun, ini tidak cukup, dan bahkan situs berita berusaha memberikan gambar jurnalis

Mari kita mulai dari asumsi bahwa gambar dibutuhkan. Ini bisa berupa foto, diagram, hanya menjelaskan gambar.

Dahulu kala, ketika Putin tidak tampak abadi, saya membuat portal web medis pertama saya. Itu perlu untuk menempatkan gambar ke atlas. Jelas bahwa agak sulit membayangkan struktur anatomi tubuh tanpa gambar, dan lebih-lebih untuk menggambarkan dengan kata-kata. Dan tanpa basa-basi, saya mengunggah gambar ke bmp (format tidak terkompresi). Apakah saya harus mengatakan bahwa mereka menimbang adonan? Selain itu, beberapa browser tidak tahu cara menampilkan gambar seperti itu.

Jadi mengapa mengoptimalkan gambar? Contoh sederhana adalah foto. Ponsel modern memiliki kamera dalam 8, 12 dan bahkan lebih besar megapikselnya. 12 MP sesuai dengan gambar 4000 × 3000 piksel. Tergantung pada kerumitan adegan, ini sesuai dengan ukuran 2-5 megabyte, dan bahkan lebih. Selusin foto - dan ukuran halaman membengkak banyak. Gambar cocok dengan area konten, yang berarti browser harus mengunduh semuanya terlebih dahulu, skala dan hanya kemudian menampilkannya. Untuk yang lemah pengolah atau dengan sedikit RAM - bencana.

Sekarang bayangkan pengguna sedang menonton situs dari ponsel. Dalam hal ini, pemuatan halaman tidak bisa menunggu. Jadi, gambar-gambar harus dikurangi terlebih dahulu.

Seseorang akan berpendapat bahwa tidak ada gunanya, CMS modern secara otomatis membuat thumbnail saat mengunduh gambar. Tetapi apakah semua orang memiliki situs mereka di VPS atau tarif VIP? Unduh satu gambar 12 MP mungkin keluar, tetapi untuk memprosesnya, PHP perlu mengalokasikan 35+ megabita (secara teori, sebenarnya lebih banyak) untuk penyimpanan, dan kemudian masih tahu berapa banyak untuk membuat salinan yang lebih kecil. Tarif murah segera jatuh ke kelebihan sumber daya. Hoster yang baik akan meminta pengguna untuk tidak melakukan ini lagi, yang buruk akan mengabaikannya, karena hanya uang yang penting baginya, dan bukan kinerja layanan.

Jadi, kami memutuskan untuk bertindak dengan benar. Kami awalnya mengurangi gambar, dan kemudian mengunggahnya ke situs. Jadi mesinnya lebih mudah, dan manusia. Apakah segalanya Tidak juga.

Banyak editor mempertahankan potongan asli (meta-informasi, bagian non-gambar file) yang berisi informasi tambahan. Misalnya, jika Anda mengambil gambar sesuatu di telepon, mentransfer file ke komputer, klik dengan tombol kanan dan pilih "Properties → Details", Anda akan melihat data pada perangkat: kamera yang Anda potret, kecepatan rana, ISO dan sebagainya. Untuk pengguna, informasi ini tidak berguna, sehingga Anda dapat membuangnya.

Nah, pikirkan tentang itu, satu potong. Apa yang ada di sana, banyak informasi yang terkandung? Bayangkan Terkadang Anda mendapatkan gambar di mana ratusan kilobyte data tersebut. Hanya hari ini, mereka mengirim logo berukuran 584 KB untuk mengakomodasi. Pada saat yang sama, informasi yang berguna hanya 14 KB! Bagi saya, tidak sepenuhnya benar memaksa pengunjung untuk mengunduh 570 KB dari atas.

Mari kita simpulkan subtotalnya. Agar pengguna situs dapat melakukannya dengan baik, Anda harus:

  1. Kurangi ukuran gambar. Untuk membantu editor grafis.
  2. Membuang bagian file tidak perlu. Padahal, pengguna hanya butuh gambar.
  3. Coba kurangi ukuran gambar lebih jauh.

Paragraf pertama melibatkan pekerjaan individu pada setiap file. Memang memakan waktu, tetapi membawa hasil terbaik. Kami membuka setiap file, memotong, mengurangi, lalu menyimpan dengan kualitas yang dapat diterima.

Tetapi paragraf 2 dan 3 dapat diberikan pada belas kasihan dari program khusus. Perangkat lunak untuk bekerja dengan set gambar. Google merekomendasikan program-program berikut:

  • jpegtran untuk format gambar jpg.
  • optipng dan pngout untuk gambar PNG.

Sedikit tentang hal 3. Editor grafis biasanya tidak repot dengan itu. Mereka hanya menyimpan gambar, memilih sebelumnya algoritma kompresi dengan pengaturan yang sama, koefisien kuantisasi dan hal-hal lainnya. Selain itu, banyak yang dengan jujur ​​mentransfer informasi meta yang tersedia dan menambahkan sendiri, yang semakin menambah ukuran file.

Prasyarat

Setahun yang lalu, mereka mulai berbicara secara massal tentang layanan ini. Wawasan PageSpeed dari google. Bahkan, ini adalah rekomendasi dari raksasa pencarian tentang "bagaimana melakukannya dengan baik". Cukup ketikkan alamat situs dan dapatkan daftar saran untuk optimisasi. Di sana Anda juga dapat mengunduh sumber daya yang sudah dioptimalkan, termasuk gambar, untuk situs Anda. Benar, ini hanya relevan untuk halaman yang diperiksa.

Jika Anda memiliki situs web, pastikan untuk melihatnya artikel ini . Sangat berguna bagi mereka yang menggunakan WordPress.

Kami menggunakan rekomendasi untuk gambar

Tampaknya sederhana: unduh program yang ditentukan oleh Google dan jalankan semua file di server melalui mereka. Masalahnya adalah utilitas ini adalah konsol. Mereka hanya mengambil 1 file sekaligus. Tapi kita tidak sia-sia artikel terakhir meluangkan waktu untuk mengumpulkan file, bukan?

Informasi dari artikel ini cukup untuk membuat file handler Anda sendiri secara massal, jadi saya tidak akan melukis di mana itu. Saya hanya mengusulkan untuk mengunduh perakitan siap pakai, yang saya gunakan sendiri.

Unduh arsip (212 KB)

Struktur arsip

Arsip berisi folder [ OptimizeImg ]. Untuk memulai, bongkar di suatu tempat. Saya memilikinya terletak di c: \ temp \ tetapi itu tidak masalah. Yang utama adalah bahwa jalan tidak mengandung tanda seru.

Selanjutnya Folder ini berisi subdirektori [ unggah ]. Di sini Anda perlu meletakkan file yang membutuhkan pemrosesan. Bagian terbaiknya adalah Anda bisa mendorong setidaknya struktur folder / file.

Ada 3 program lagi: jpegtran.exe | optipng.exe | pngout.exe adalah utilitas yang sangat direkomendasikan oleh Google. Diunduh dari situs / repositori resmi yang sesuai. Jika ragu, atau hanya ingin meningkatkan, unduh dari sumber tepercaya dan ganti yang sudah ada.

Dan akhirnya, jantung tulza. Batnichki:

  • 1.bat
  • 3.bat
  • 3-go.bat
  • 3-opti-to-out.bat
  • 3-out-to-opti.bat

File pertama, 1.bat, membuat ulang struktur dari [unggah]. 3 folder tambahan dibuat: [jpg_jpegtran] [png_optipng] [png_pngout] dengan file yang diperkecil dari jenisnya (jpg - only * .jpg-file, sama dengan png).

3.bat secara berurutan meluncurkan tiga file batch untuk dieksekusi:

  • 3-go.bat hampir sama dengan 1.bat. Lewati file jpg / png melalui minimizer. Hasil pekerjaan akan menjadi 3 folder (lihat di atas) dengan gambar yang sesuai.
  • 3-opti-to-out.bat membuat folder [png_optipng-to-pngout], di mana file yang diproses oleh optipng + pngout ditulis (dengan urutan yang persis sama).
  • 3-out-to-opti.bat membuat folder [png_pngout-to-optipng] di mana file diproses oleh pngout + optipng ditulis. Mirip dengan yang sebelumnya, hanya dalam urutan yang berbeda.

Pada prinsipnya, hanya 1. bat yang cukup untuk kebutuhan kita. 3x bags muncul sebagai hasil penelitian dan kesalahan dalam versi sebelumnya dari file batch. Kebetulan bahwa selama kesalahan file untuk pngout diambil dari direktori optipng. Dan apa yang mengejutkan saya ketika peluncuran versi lama memberi ukuran 1,5 kali lebih kecil dari pada file batch yang diperbarui. Hasilnya, ternyata pemrosesan ganda dapat "mengejar" gambar dengan baik. Tetapi butuh waktu hampir 2 kali lebih banyak. Jadi putuskan sendiri jika dibutuhkan.

Instruksi singkat untuk bekerja

  1. Unduh arsip .
  2. Buka kemasannya.
  3. Buka folder [OptimizeImg] yang baru dibuka.
  4. Semua file yang membutuhkan sengatan, salin folder [unggah].
  5. Jalankan 1.bat dan tunggu. Jika ada banyak file dan png, tunggu lama.
  6. Ketika sebuah pesan muncul di jendela hitam tentang perlunya menekan tombol untuk melanjutkan, semuanya siap. Tetap mengambil konten folder yang dibuat dan menyalin ke hosting melalui FTP, menimpa file lama.

Sebagai contoh. Biarkan Anda memiliki blog di WordPress. Semua gambar disimpan di [ / wp-content / uploads / ]. Buka folder situs (via ftp), buka [ wp-content ] dan cukup salin [ unggah ] ke folder OptimizeImg dengan nama yang sama. Jalankan 1.bat dan tunggu. Setelah pekerjaan selesai, konten [jpg_jpegtran] (kami pergi ke sana!) Diunggah ke server. Permintaan file yang ada dijawab dengan menimpa. Trik serupa untuk png, tetapi pertama-tama kita melihat folder mana - [png_optipng] atau [png_pngout] - tidak memakan banyak ruang, isi dengan isinya.

Jangan takut merusak file lain. Batniki hanya berfungsi dengan jpg / png, dan hanya gambar jenis ini yang ditulis ke folder yang baru dibuat.

Semoga ada yang berguna. Berhasil!

Tambahan

  1. Path ke [OptimizeImg] tidak boleh mengandung tanda seru ! dan persen %
  2. Jalankan skrip sebagai administrator tidak perlu. Selain itu, dalam hal ini, mereka mungkin tidak berfungsi!
  3. ...

Penerbit

tidak online 13 jam

x64 (alias andi)

Komentar: 2846 Publikasi: 395 Pendaftaran: 02-04-2009

Ingat, sudah berapa lama Anda mengunjungi situs ini untuk yang terakhir kalinya dan sudah berapa lama Anda berada di situs tersebut?
Apakah saya harus mengatakan bahwa mereka menimbang adonan?
Jadi mengapa mengoptimalkan gambar?
Tetapi apakah semua orang memiliki situs mereka di VPS atau tarif VIP?
Apa yang ada di sana, banyak informasi yang terkandung?

Новости