Panduan Utama untuk Pengoptimalan Gambar untuk WordPress

1 … 2 … 3 … – pelanggan potensial Anda baru saja menutup situs Anda karena masih memuat. Kedengarannya akrab? Saya yakin Anda adalah pengunjung yang tidak sabar dan frustrasi itu berkali-kali. Aku tahu aku. Itulah mengapa saya menyusun daftar utama hal-hal yang perlu Anda ketahui tentang pengoptimalan gambar. Ini akan menjadi panjang, tetapi saya harap Anda akan menganggapnya layak untuk dibaca.

Daftar isi

• Isi Artikel Ini dalam Video 3 Menit
• Manfaat Pengoptimalan Gambar
• Format Gambar
• Ubah Ukuran Gambar Sebelum Mengunggah
  • Plugin WordPress Imsanity untuk Mengubah Ukuran Gambar Secara Otomatis
• Mengompresi Gambar
  • Alat Online Terbaik untuk Kompresi Gambar
    • kecil png
    • Optimasi
    • Kompresor
    • GambarOptim
    • GambarLebih Kecil
    • Kraken
    • JPEG.io
    • Wawasan PageSpeed
    • Hasil untuk Alat Kompresi Online Terbaik
    • Alat Kompresi Online Terbaik untuk JPEG
    • Alat Kompresi Online Terbaik untuk PNG
    • Alat Kompresi Gambar Online Terbaik Secara Keseluruhan
  • Plugin WordPress Terbaik untuk Kompresi Gambar
    • WP Smush (Versi gratis)
    • Kompres gambar JPEG & PNG dengan TinyPNG
    • Piksel Pendek
    • Bayangkan
    • Pengoptimal Gambar EWWW (Versi gratis)
    • Hasil untuk Plugin WordPress Terbaik untuk Kompresi Gambar
    • Plugin WordPress Terbaik untuk Mengompresi JPEG
    • Plugin WordPress Terbaik untuk Mengompresi PNG
    • Plugin WordPress Terbaik untuk Mengompresi Gambar Secara Keseluruhan
• Kesimpulan

Isi Artikel Ini dalam Video 3 Menit

Berikut adalah ikhtisar video yang sangat cepat dari artikel ini. Saya masih merekomendasikan membaca, tetapi hanya untuk menggoda Anda, ini dia:

Manfaat Pengoptimalan Gambar

Apakah Anda masih belum menjual semua hal pengoptimalan gambar? Mari kita lihat semua keuntungan yang akan Anda dapatkan, jika Anda hanya memperbaiki masalah kecil dan sepele itu:

• Situs Anda akan lebih cepat
• Skor Google PageSpeed ​​Anda akan lebih baik
• Google akan lebih menyukai Anda dan peringkat mesin pencari Anda akan meningkat
• Rasio pentalan Anda akan lebih kecil dan lebih banyak pengunjung akan melihat halaman Anda
• Anda akan membutuhkan lebih sedikit penyimpanan di server Anda dan Anda akan menghabiskan lebih sedikit sumber daya di server, yang akan menghemat uang Anda
• Anda akan menghemat uang paket data seluler untuk diri sendiri dan pengunjung Anda

Aku sudah mendapatkan perhatianmu sekarang, kan? Sekarang kita bisa mulai dengan pekerjaan yang sebenarnya.

Format Gambar

Optimalisasi gambar dimulai dengan beberapa pengetahuan dasar tentang format gambar. Dua format yang paling umum di internet adalah PNG dengan ekstensi .png dan JPEG dengan ekstensi .jpg . Saya akan menggunakan JPEG dalam banyak kasus, karena ini adalah format terbaik untuk foto, gambar dengan gradien dan gambar dengan jutaan warna. Di sisi lain, PNG lebih baik dengan gambar berwarna terbatas, seperti logo, dan dengan gambar dengan transparansi.

Contoh berikutnya akan menunjukkan kepada Anda, betapa pentingnya memilih format gambar yang tepat untuk pengoptimalan gambar terbaik.

Saya akan menyimpan gambar child.jpg yang tidak dioptimalkan dalam format .jpg dan .png . Dapat kita lihat, bahwa image child-saved-as-jpeg.jpg berukuran 3,1 MB dan image child-saved-as-png.png berukuran 4,5 MB. Dalam hal ini, gambar PNG menjadi 45% lebih besar dari gambar JPEG, perbedaan yang hanya berasal dari memilih format gambar tertentu. Tidak ada cara yang lebih mudah untuk menghemat banyak ruang dengan sedikit usaha. Yah, mungkin ada. Mari kita lihat langkah selanjutnya.

Ubah Ukuran Gambar Sebelum Mengunggah

Kami menghemat beberapa ruang dengan memilih format gambar yang benar dalam contoh kami sebelumnya, tetapi kami dapat menghemat lebih banyak ruang , jika kami mengubah ukuran gambar sebelum mengunggahnya. Tapi berapa banyak yang harus kita ubah ukurannya? Itu sangat tergantung pada lebar dan wadah situs web Anda.

Di situs ProteusThemes kami, lebar maksimum untuk gambar adalah 1110 px, jadi saya akan mengubah ukuran gambar saat ini child.jpg , yang lebarnya 1800 px, menjadi lebarnya 1110 px. Dalam hal ini, kami baru saja beralih dari 3,1 MB menjadi 1,1 MB, yang merupakan 65% dari ruang yang disimpan dan dikurangi .

Petunjuk: Anda dapat mengubah ukuran gambar langsung di Perpustakaan Media WordPress Anda. Klik pada Media -> Pilih gambar Anda -> Edit Gambar dan pilih dimensi baru untuk gambar Anda:

Plugin WordPress Imsanity untuk Mengubah Ukuran Gambar Secara Otomatis

Jika Anda tidak ingin memikirkan tentang pengubahan ukuran gambar atau jika banyak pengguna yang berbeda mengunggah gambar ke situs web Anda, maka plugin Imsanity akan bekerja dengan sempurna untuk Anda. Dalam pengaturan plugin, Anda dapat memilih lebar atau tinggi maksimum yang harus dimiliki gambar dan plugin akan mengubah ukuran semua gambar yang lebih besar ke ukuran itu. Anda juga dapat memilih fitur bulk-resize untuk mengubah ukuran semua gambar yang ada. Saya merekomendasikan plugin ini kepada siapa saja, yang memiliki masalah dengan mengubah ukuran setiap gambar secara terpisah sebelum mengunggahnya. Anda dapat mengunduh plugin Imsanity secara gratis.

Mengompresi Gambar

Sekarang setelah kita mempelajari dasar-dasar pengoptimalan gambar, mari kita lihat bagaimana kita dapat meningkatkan permainan kita. Kami dapat menemukan banyak alat kompresi gambar online di internet dan bahkan plugin WordPress , yang akan mengurangi ukuran gambar Anda. Tapi kita harus berhati-hati di sini, beberapa alat akan membuat hampir tidak ada perbedaan dan beberapa pengaturan akan menghancurkan gambar kita dan membuatnya tidak berguna. Jadi, bagaimana menemukan keseimbangan yang sempurna? Jangan khawatir, pada saat penulisan (Juni 2017, diperbarui 2018), kami menguji semua alat/layanan online paling populer dan plugin WordPress untuk pengoptimalan gambar dan kami telah memilih yang terbaik.

Kami telah menggunakan 3 gambar JPEG yang berbeda dan 1 gambar PNG untuk melakukan pengujian kami.

Semua 3 gambar JPEG berasal dari Unsplash, oleh penulis Mi Pham, Breather, Denise Chan dan Niko Virtanen. Mereka dipotong dan diubah ukurannya menjadi 1110 x 624 px untuk tujuan pengujian.

Untuk gambar PNG, kami telah membuat gambar kami sendiri dengan logo ProteusThemes dan beberapa pola di belakangnya. Sama seperti gambar uji JPEG, gambar ini juga diubah ukurannya menjadi 1110 x 624 px.

Kami sekarang akan menempatkan semua gambar melalui semua alat dan plugin yang dipilih untuk kompresi dan kami akan mencari tahu, mana yang terbaik untuk Anda gunakan. Mari kita mulai dengan alat online.

Alat Online Terbaik untuk Kompresi Gambar

Pada saat penulisan (Juni 2017, diperbarui 2018), berikut adalah daftar lengkap alat dan layanan online paling populer untuk kompresi gambar:

• kecil png
• Optimasi
• Kompresor
• GambarOptim
• GambarLebih Kecil
• Kraken
• JPEG.io
• Wawasan PageSpeed

Jika menurut Anda beberapa alat lain layak masuk dalam daftar itu, beri tahu kami, kami akan mengujinya dan menambahkannya ke daftar. Anda dapat menemukan ulasan saya tentang setiap alat di bawah ini, ditambah penilaian saya tentang yang terbaik. Jika Anda tidak ingin membaca tentang masing-masing alat, klik di sini – Tunjukkan pemenangnya!

kecil png

TinyPNG adalah salah satu alat kompresi gambar pertama yang saya gunakan dan terkadang saya masih menggunakannya. Tidak ada opsi, Anda cukup mengunggah gambar dan Anda akan mengompresnya. Dengan alat online ini, Anda dapat mengunggah secara massal hingga 20 gambar dengan ukuran 5 MB.

Optimasi

Optimizilla adalah alat online sederhana namun kuat lainnya. Ini gratis untuk digunakan dan memiliki opsi untuk mengunggah secara massal hingga 20 gambar. Untuk rasio kompresi/kualitas terbaik, kami membiarkan pengaturan kualitas pada 90, sebagaimana adanya secara default. Jika Anda ingin mendorong kompresi lebih jauh, cukup ubah pengaturan ini dan Anda akan segera melihat perubahan kualitas.

Kompresor

Kompresor memiliki potensi untuk menjadi salah satu alat terbaik untuk kompresi gambar, tetapi memiliki satu kelemahan besar. Saat ini tidak ada opsi untuk unggahan massal, yang berarti Anda hanya dapat mengompres 1 gambar pada saat itu. Selain itu, gratis, mudah digunakan dan dengan dua opsi kompresi. Kami menggunakan opsi lossy dalam pengujian kami, karena kualitas gambar tetap sama setelah kompresi.

GambarOptim

ImageOptim adalah alat dengan banyak pengaturan. Anda dapat memilih antara 3 pilihan kualitas yang berbeda dan 3 pilihan kualitas warna yang berbeda. Kami menemukan, bahwa hasil kompresi/kualitas terbaik adalah dengan pengaturan default. Atur kualitas ke sedang dan kualitas warna ke otomatis. Hal yang paling mengganggu saya dengan ImageOptim , di samping desain kecil yang ketinggalan jaman, apakah itu mengekspor JPEG bahkan jika saya mengunggah PNG . Saya telah mengirim email kepada Kornel (pencipta ImageOptim) tentang masalah itu dan dia sudah memperbaikinya.

GambarLebih Kecil

Sama seperti Compressor , ImageSmaller memiliki kelemahan yang sama. Tidak ada opsi untuk unggahan massal. Namun, ia memiliki salah satu batas unggahan terbesar, dengan 50 MB. Jika Anda memiliki file yang lebih besar untuk dioptimalkan, maka ImageSmaller bisa menjadi alat yang tepat untuk Anda.

Kraken

Kraken adalah alat kompresi gambar premium, dengan dasbor terbaik di antara semua alat yang telah saya uji. Anda akan menemukan antarmuka web yang bagus untuk mengunggah gambar Anda dan banyak pengaturan berbeda untuk hasil terbaik. Kami menggunakan pengaturan lossy default dalam pengujian kami.

JPEG.io

JPEG.io adalah versi gratis dari alat yang sama dengan Kraken . Ini memiliki kemampuan kompresi yang sama, tetapi seperti yang dikatakan oleh URL situs web, itu hanya untuk JPEG.

Wawasan PageSpeed

Anda tidak berharap untuk melihat yang satu ini di sini, kan? PageSpeed ​​Insights juga memberi kami .zip file terkompresi saat kami menguji situs kami. Ini bukan cara yang paling ramah pengguna, karena Anda harus membuat situs web Anda online dengan semua gambar dan kemudian menggantinya dengan yang baru terkompresi, tetapi Anda akan mendapatkan gambar yang dikompresi seperti yang diinginkan Google.

Hasil untuk Alat Kompresi Online Terbaik

Di bawah ini Anda akan menemukan grafik dengan hasil dari semua pengujian kami. Anda juga dapat memeriksa spreadsheet terperinci kami untuk informasi lebih lanjut.

Alat Kompresi Online Terbaik untuk JPEG

Sebagian besar alat mengompresi JPEG pengujian kami sekitar 80% . Mari kita lihat gambar child.jpg kita. Kami mulai dengan gambar ukuran 3,1 MB dan setelah mengubah ukuran dan mengompresi gambar kami hanya 165 KB besar, yang berarti 95% lebih kecil ukurannya . Sekarang, itulah perbedaannya! Kami berhasil mendapatkan hasil yang sama dengan Compressor dan ImageOptim . Jadi, sepertinya kita memiliki dua pemenang di sini.

Alat Kompresi Online Terbaik untuk PNG

Untuk pengujian PNG kami, kami mendapat pengurangan ukuran rata-rata 50% dengan semua alat. Namun, Optimizilla sedikit lebih baik daripada yang lain, dengan 56% ukuran gambar pt-logo.png kami berkurang.

Alat Kompresi Gambar Online Terbaik Secara Keseluruhan

Bahkan jika Optimizilla bukan alat kompresi terbaik untuk JPEG, saya akan merekomendasikannya sebagai alat kompresi terbaik yang saat ini tersedia secara online. JPEG yang dikompresi dengan 79% masih mengagumkan dan Anda dapat mendorongnya lebih tinggi lagi, dengan pengaturan kualitas sederhana di halaman. Ini juga memiliki opsi untuk unggahan massal, di mana Kompresor tidak ada dan unggahan yang lebih andal, daripada ImageOptim , di mana semua gambar diekspor sebagai JPEG, bahkan jika PNG ada di antara mereka. Karena semua hal ini, saya pikir Optimizilla pantas mendapatkan gelar alat kompresi gambar online terbaik.

Selanjutnya, mari kita lihat, apakah plugin WordPress dapat mengalahkan alat kompresi gambar online.

Plugin WordPress Terbaik untuk Kompresi Gambar

Apa perbedaan antara alat gambar online dan plugin WordPress? Nah, jika Anda menggunakan alat gambar online untuk kompresi gambar, Anda masih perlu mengunggah gambar tersebut ke situs WordPress Anda dan kemudian menggunakannya. Jika Anda lebih suka memiliki semuanya di satu tempat, maka plugin WordPress untuk Kompresi Gambar bisa menjadi cara yang tepat. Sebagian besar plugin juga memiliki opsi untuk mengoptimalkan gambar dengan unggahan, sehingga Anda dapat mengaktifkan pengaturan itu dan melupakan pekerjaan tambahan apa pun.

Saya membuat situs WordPress baru untuk setiap plugin dan mengunggah 4 gambar yang sama setiap saat. Plugin yang berbeda memiliki pengaturan yang berbeda, jadi saya mencari keseimbangan sempurna antara kompresi dan kualitas gambar.

Saya menguji plugin berikut:

• WP Smush (versi gratis)
• Kompres Gambar JPEG & PNG dengan TinyPNG
• Piksel Pendek
• Bayangkan
• Pengoptimal Gambar EWWW (versi gratis)

Seperti yang telah saya sebutkan sebelumnya, jika Anda mengetahui plugin lain yang harus kami uji, beri tahu kami dan kami akan menambahkannya ke dalam daftar. Jika Anda tidak ingin mempelajari lebih lanjut tentang plugin ini, klik di sini – Tunjukkan pemenangnya!

WP Smush (Versi gratis)

WP Smush adalah salah satu plugin kompresi gambar tertua yang saya tahu. Ini memiliki satu keuntungan bagus dibandingkan semua plugin lainnya, karena tidak perlu registrasi untuk menggunakan versi gratis. Ini juga memiliki opsi untuk mengompresi gambar yang baru diunggah secara otomatis, jadi setelah plugin disetel, Anda dapat melupakannya dan itu akan melakukan semua pekerjaan untuk Anda di latar belakang. Sayangnya, hasil kompresi adalah salah satu yang terburuk dalam versi gratisnya, jadi saya tidak menyarankan untuk menggunakannya. Mereka telah menyatakan di situs mereka, bahwa versi pro mengompresi jauh lebih baik, jadi saya juga akan menguji yang ini di pembaruan artikel berikutnya.

Kompres gambar JPEG & PNG dengan TinyPNG

Sama seperti alat kompresi online TinyPNG , plugin WordPress juga sangat sederhana. Setelah Anda melalui pendaftaran, ia memiliki pengaturan minimal dan pada dasarnya bekerja di luar kotak. Semua gambar yang baru diunggah juga dapat dikompresi secara otomatis, sehingga Anda dapat mengaktifkan plugin dan melupakannya.

Piksel Pendek

ShortPixel , secara pribadi, adalah salah satu kejutan terbesar. Saya belum pernah mendengarnya sebelum penelitian saya dan saya sangat terkesan. Dengan pengaturan default lossy yang direkomendasikan, ia memiliki hasil kompresi terbaik antara plugin WordPress dan juga memiliki opsi glossy. Opsi ini untuk fotografer atau profesional lainnya, yang membutuhkan gambar berkualitas sangat tinggi dan tidak dapat berkompromi dengan penurunan kualitas.

Bayangkan

Imagify adalah plugin, yang dibuat oleh tangan penulis plugin WP Rocket yang terkenal. Setelah pendaftaran, Anda akan mendapatkan beberapa opsi yang jelas untuk dipilih. Untuk kompresi jatah terbaik dan kualitas gambar, pilih mode agresif. Satu hal yang menyenangkan dalam pengaturan juga merupakan opsi untuk memiliki folder terpisah untuk gambar asli, jika ada yang salah dengan kompresi. Satu-satunya hal yang saya tidak sepenuhnya mengerti, adalah mengapa kita harus beralih ke tampilan daftar di media untuk melihat hasil kompresi. Selain itu, Imagify adalah plugin yang sangat bagus dan solid.

Pengoptimal Gambar EWWW (Versi gratis)

Pengoptimal Gambar EWWW adalah satu-satunya plugin, yang memberi saya beberapa kesalahan. Pertama, saya mencobanya di hosting saya sendiri dan saya mendapatkan kesalahan, bahwa Pengoptimal Gambar EWWW memerlukan exec() atau kunci API. Lain kali saya mencoba plugin di situs WordPress pengembangan lokal saya dan saya mendapatkan kesalahan bahwa saya kehilangan pngout. Saya mengikuti instruksi tentang cara menginstalnya dan plugin akhirnya siap untuk diuji. Karena saya telah menguji versi gratisnya, hanya ada opsi lossless, yang tidak memberikan hasil terbaik. Sama seperti WP Smush, saya juga akan menguji versi pro EWWW Image Optimizer di pembaruan artikel berikutnya dan kita akan lihat, apakah kinerjanya akan lebih baik.

Hasil untuk Plugin WordPress Terbaik untuk Kompresi Gambar

Sama seperti sebelumnya, Anda akan menemukan grafik dengan hasil dari semua pengujian kami di bawah ini. Anda juga dapat memeriksa spreadsheet terperinci kami untuk informasi lebih lanjut.

Plugin WordPress Terbaik untuk Mengompresi JPEG

ShortPixel adalah pemenangnya, dengan rata-rata kompresi 84% . Sama seperti Compressor dan ImageOptim dalam kategori alat kompresi online terbaik. Plugin terbaik kedua adalah Imagify , dengan rata-rata kompresi 70% . Saya menyatakan bahwa ShortPixel saat ini adalah pemenang mutlak dari kategori tersebut.

Plugin WordPress Terbaik untuk Mengompresi PNG

Plugin kompresi PNG terbaik disebut Compress JPEG & PNG images oleh TinyPNG , dengan kompresi 56% . Menariknya, hasil terbaiknya lagi-lagi sama dengan kategori alat kompresi online terbaik. Namun, plugin lain di mana sedikit lebih kompetitif di sini, dengan kompresi sekitar 50% .

Plugin WordPress Terbaik untuk Mengompresi Gambar Secara Keseluruhan

Menurut pendapat saya, rasio terbaik antara pengalaman pengguna, pengaturan dan kompresi yang berbeda, berasal dari plugin ShortPixel . Secara keseluruhan, Ini adalah plugin yang sangat solid, dengan banyak opsi, tetapi juga dengan pengaturan default yang sudah bagus. Anda dapat mulai menggunakan plugin segera setelah pendaftaran dan yang paling penting, kompresinya bagus. Saat ini, saya akan menggunakan plugin ShortPixel untuk situs web saya sendiri, terutama jika sebagian besar gambar adalah JPEG.

Kesimpulan

Itu perjalanan yang panjang, kan? Sementara itu, kami berhasil mengompresi gambar child.jpg kami hingga 95% . Website Anda dapat bekerja lebih cepat, jika Anda hanya mengikuti 3 langkah sederhana ini. Mari kita ulangi lagi:

• Pilih format gambar yang benar
• Ubah ukuran gambar sebelum mengunggah
• Kompres gambar dengan alat online atau plugin WordPress

Hal penting lainnya adalah, Anda hanya menggunakan satu alat atau plugin WordPress untuk setiap gambar, karena kebanyakan dari mereka memiliki semacam kompresi lossy, yang berarti bahwa kualitas gambar Anda dapat memburuk dengan setiap kompresi tambahan dan itu adalah sesuatu yang kami tidak lakukan. tidak mau. Kami juga menambahkan semua gambar uji di GitHub jika Anda ingin memeriksa perbandingan kualitas di antara mereka atau menguji beberapa alat dan plugin lain sendiri.

Anda seharusnya tidak memiliki alasan lagi untuk tidak mengompresi gambar Anda. Ada banyak alat dan cara berbeda untuk melakukannya dan kami telah membuktikannya, bahwa pada akhirnya itu sepadan. Pilih pemenang pribadi Anda untuk kompresi online atau plugin WordPress dan periksa skor Google PageSpeed ​​situs web Anda sebelum dan sesudah pengoptimalan. Bagikan informasi kecepatan situs Anda dan peningkatan skor di bagian komentar kami. Saya juga ingin tahu, apakah artikel ini membantu Anda dengan pengoptimalan gambar dan apa pendapat Anda tentangnya.