Optimasi Gambar Di WordPress

Situs web yang lambat adalah perhatian semua orang. Tidak hanya itu mengusir pengunjung tetapi juga mempengaruhi SEO Anda. Jadi berusaha untuk tetap ‘dalam bentuk’ jelas merupakan salah satu item utama yang harus diperhatikan ketika Anda menjalankan bisnis atau bahkan situs pribadi.

Ada banyak cara untuk mempercepat situs WordPress Anda, masing-masing saling melengkapi. Tidak ada metode universal. Meningkatkan kecepatan situs Anda sebenarnya adalah gabungan dari lebih banyak metode ini. Salah satunya adalah pengoptimalan gambar, yang akan kami bahas secara ekstensif dalam posting ini.

Jadi baca lebih lanjut untuk mempelajari cara mengoptimalkan semua gambar secara manual dan otomatis di situs WordPress Anda. Ini adalah panduan langkah demi langkah tentang pengoptimalan gambar yang akan membuat situs Anda ringan dan lebih cepat.

Pentingnya Optimasi Gambar #

Menurut Snipcart , tiga alasan utama mengapa gambar memengaruhi situs WordPress Anda adalah:

• Mereka terlalu besar. Gunakan ukuran yang lebih kecil. Saya akan membicarakan ini nanti di artikel.
• Mereka terlalu banyak , yang menuntut banyak permintaan HTTP. Menggunakan CDN akan membantu.
• Mereka berkontribusi pada pemuatan elemen yang sinkron , bersama dengan HTML, CSS, dan JavaScript. Ini berakhir dengan peningkatan waktu render. Menampilkan gambar Anda secara progresif (melalui pemuatan lambat) akan menghentikan pemuatan gambar Anda secara bersamaan dengan elemen lain, yang akan membuat halaman dimuat lebih cepat.

Jadi ya, mengoptimalkan gambar Anda adalah praktik penting untuk membuat situs Anda lebih ringan. Tetapi pertama-tama, Anda perlu menemukan apa yang membuat situs Anda dimuat dengan lambat. Di sinilah tes kecepatan campur tangan.

Cara Menguji Kecepatan Situs WordPress Anda #

Ada banyak alat yang menguji kecepatan situs web Anda. Metode paling sederhana adalah Pingdom.

Pingdom adalah alat populer yang digunakan oleh pengguna biasa dan pengembang. Yang perlu Anda lakukan adalah membuka Pingdom dan memasukkan URL situs WordPress Anda, pilih lokasi yang paling dekat dengan lokasi pusat data hosting Anda (berdasarkan server hosting Anda), dan mulai pengujian. Jika Anda memiliki CDN yang terinstal di situs Anda, lokasi sangat penting. Tapi lebih lanjut tentang itu nanti .

Yang menarik dari alat ini adalah, terlepas dari seberapa sederhana antarmukanya, alat ini menampilkan informasi lanjutan tentang kinerja situs web, yang merupakan musik murni bagi telinga pengembang.

Dari statistik ini, Anda akan mengetahui apakah situs Anda berjalan dengan baik atau perlu ditingkatkan (atau keduanya). Ini bagus karena memberi Anda banyak data dan saran tentang halaman, permintaan, dan jenis masalah dan analisis kinerja lainnya.
<figure class=”

break-out article__image

“>

<figure class=”

break-out article__image

“>

<figure class=”

break-out article__image

“>

Pada halaman yang sama, GTmetrix adalah alat keren lain yang mirip dengan Pingdom dan yang akan menganalisis kecepatan dan kinerja situs Anda secara mendalam.
<figure class=”

“>

Catatan : GTmetrix biasanya menampilkan situs WordPress yang lebih lambat daripada Pingdom; ini adalah cara alat menghitung metrik. Tidak ada perbedaan, hanya saja GTmetrix mengukur waktu fullload, tidak seperti Pingdom yang hanya menghitung waktu onload.

Waktu onload menghitung kecepatan setelah halaman selesai diproses dan semua file di halaman itu selesai diunduh. Itu sebabnya waktu onload akan selalu lebih cepat daripada waktu yang terisi penuh.

Waktu penuh pemuatan terjadi setelah proses pemuatan saat halaman mulai mentransfer data lagi, yang berarti GTmetrix menyertakan waktu pemuatan saat menghitung kecepatan halaman. Ini pada dasarnya mengukur seluruh siklus tanggapan dan transfer yang didapatnya dari halaman yang dimaksud. Oleh karena itu kali lebih lambat.

Google PageSpeed ​​Insights adalah alat populer lainnya untuk menguji kecepatan situs Anda. Tidak seperti dua alat pertama yang hanya menampilkan kinerja situs Anda di desktop, alat pengujian resmi Google juga bagus dalam mengukur kecepatan versi seluler situs web Anda.

Selain itu, Google juga akan memberi Anda rekomendasi terbaik tentang apa yang perlu ditingkatkan di situs Anda untuk mendapatkan waktu pemuatan yang lebih cepat.

Biasanya, dengan salah satu dari ketiga alat ini, Anda dapat mendeteksi seberapa besar pengaruh gambar Anda terhadap kecepatan situs Anda.

Cara Mempercepat Situs WordPress Anda #

Tentu saja, karena artikel ini tentang pengoptimalan gambar, Anda dapat menebak dengan benar bahwa ini adalah salah satu caranya. Tetapi sebelum masuk ke kedalaman pengoptimalan gambar, mari kita bicarakan secara singkat tentang lain cara yang akan membantu Anda jika Anda memiliki banyak gambar yang diunggah di situs Anda.

Caching #

Caching adalah tindakan menyimpan sementara data dalam cache sehingga jika pengguna sering mengakses situs Anda, data akan dikirimkan secara otomatis tanpa melalui proses pemuatan awal lagi (yang terjadi ketika file situs diminta untuk pertama kalinya. ). Cache adalah semacam memori yang mengumpulkan data yang diminta berkali-kali dari viewport yang sama dan digunakan untuk meningkatkan kecepatan penyajian data ini.

Caching sebenarnya sangat sederhana. Tidak masalah jika Anda melakukannya secara manual atau dengan menginstal plugin, itu dapat diterapkan di situs Anda dengan cukup cepat. Beberapa plugin terbaik adalah WP Super Cache dan W3 Total Cache dan WP Super Cache — keduanya gratis dan memiliki peringkat terbaik di repositori resmi WordPress.org.

Jaringan Pengiriman Konten #

CDN akan meminta konten situs Anda dari lokasi server terdekat ke titik akses pembaca Anda. Ini berarti bahwa itu menyimpan salinan situs Anda di banyak pusat data yang terletak di berbagai tempat di seluruh dunia. Setelah pengunjung mengakses situs Anda melalui lokasi rumah mereka, server terdekat akan meminta konten Anda, yang berarti waktu pemuatan lebih cepat. Cloudflare dan MaxCDN (sekarang StackPath) adalah solusi paling populer untuk WordPress.

Kompresi GZIP #

Melalui metode ini, Anda dapat mengompresi file situs Anda dengan membuatnya lebih kecil. Ini akan mengurangi bandwidth situs Anda dan akan mentransfer file masing-masing ke browser lebih cepat.

Baik WP Super Cache dan W3 Total Cache hadir dengan fitur kompresi GZIP yang dapat Anda aktifkan setelah instalasi. Selain itu, banyak penyedia hosting WordPress populer yang sudah mengaktifkan fitur ini melalui paket standar mereka. Untuk mengetahui apakah kompresi GZIP diaktifkan di situs Anda, gunakan ini alat untuk pemeriksaan cepat.
<figure class=”

“>

Anda juga dapat menambahkan kompresi GZIP ke situs WordPress Anda secara manual dengan memodifikasi file .htaccess .

Trik sederhana dan umum lainnya (terkadang dihilangkan, meskipun) adalah menggunakan tema WordPress yang ringan, menonaktifkan plugin yang tidak perlu (yang tidak Anda gunakan lagi atau yang tidak Anda perlukan untuk sementara), dan bersihkan database WordPress Anda secara teratur.

Memperhatikan detail ini juga berkontribusi untuk mengurangi waktu yang dibutuhkan WordPress untuk membangun dan menampilkan halaman. Terkadang, tema atau plugin yang sarat fitur dapat menjadi faktor utama dalam memperlambat situs Anda. Plugin caching dapat mengintervensi situasi ini, tetapi menjaga situs WordPress Anda seringan dan sebersih mungkin mungkin merupakan pendekatan yang lebih baik.

Pengoptimalan Gambar #

Ini adalah teknik yang sangat efisien dan sederhana yang berkontribusi untuk mempercepat situs WordPress Anda. Dan ini adalah topik hari ini, jadi mari kita pecah menjadi beberapa bagian.

Mengapa Optimasi Gambar? #

Saat ini, situs web menggunakan lebih banyak visual daripada sebelumnya dalam upaya mereka untuk menarik perhatian pengguna. Multimedia (gambar, video, podcast) semakin populer selama lima tahun terakhir, yang menyebabkan pemilik situs menggunakan halaman yang semakin banyak grafis dan gambar.

Saat ini, kita dikelilingi oleh miliaran gambar, video, dan grafik beresolusi tinggi. Mereka adalah kunci untuk situs yang berkonversi lebih baik, karenanya untuk pemasaran dan kartu nama yang lebih baik.

Terkadang, orang cenderung lupa atau tidak cukup memperhatikan fakta bahwa mengunggah gambar secara teratur memengaruhi kecepatan situs WordPress mereka secara bertahap.

Terutama jika Anda memiliki situs yang banyak gambar dan konten Anda sebagian besar bergantung pada gambar dan visual, ini harus menjadi perhatian utama Anda.

Cara Mengoptimalkan Gambar Situs Web Anda #

Ini dapat dilakukan secara manual atau dengan plugin. Mari kita mulai dengan cara manual. (Ini terutama untuk Anda yang sangat ingin memiliki kendali atas situs Anda dan melakukan semuanya sendiri.) Mengoptimalkan gambar secara manual juga akan membantu Anda memahami sebagian besar cara plugin ( metode otomatis yang akan kita bicarakan sebentar lagi) bekerja.

Jika Anda ingin mengotomatiskan proses pengoptimalan gambar, Anda memiliki cadangan. Ada banyak plugin WordPress hebat di luar sana yang dapat menghemat banyak waktu Anda dan juga memberikan hasil yang luar biasa. Kami akan berbicara lebih banyak tentang itu dan menguji beberapa alat nanti.

Optimalkan Gambar Situs Web Anda Secara Manual #

Mengoptimalkan mungkin berarti banyak hal. Di sini, kita dapat berbicara tentang kompresi, pengubahan ukuran, penggunaan format yang tepat, pemotongan, dan sebagainya.

Gunakan Format Gambar yang Tepat #

Bagaimana Anda bisa mengetahui format apa yang terbaik untuk gambar situs Anda dan mana yang memiliki ketahanan lebih tinggi dalam hal pengeditan dan kompresi? Jawabannya adalah, tidak ada format umum terbaik, tetapi ada format yang direkomendasikan berdasarkan konten yang dimiliki setiap gambar.

PNG sebagian besar digunakan untuk grafik, logo, ilustrasi, ikon, sketsa desain atau teks karena dapat dengan mudah diedit di editor foto dan tetap mempertahankan kualitas yang bagus setelah kompresi. Itu karena PNG tidak kehilangan — mereka tidak kehilangan data signifikan apa pun selama kompresi.

JPG lebih populer di kalangan fotografer, pengguna biasa, atau blogger. Ini lossy dan dapat dikompresi ke ukuran yang lebih kecil sambil tetap mempertahankan kualitas yang baik seperti yang terlihat dengan mata telanjang. JPG adalah format yang mendukung jutaan warna, oleh karena itu kebanyakan orang menggunakannya untuk foto. Ini juga mendukung tingkat kompresi tinggi.

Alternatif untuk JPG dan PNG dapat berupa WebP , format gambar web yang diperkenalkan oleh Google, yang memiliki peran untuk menyediakan ukuran yang bahkan lebih kecil daripada JPG (atau format lain apa pun) sambil menjaga kualitas gambar tetap serupa. Format WebP memungkinkan opsi kompresi lossy dan lossless. Menurut Google , gambar WebP bisa mendapatkan hingga 34% lebih kecil dari gambar JPG dan hingga 26% lebih kecil dari gambar PNG.

Tetapi format gambar WebP memiliki kekurangan, seperti belum didukung oleh semua browser atau oleh WordPress secara default (Anda memerlukan alat untuk itu). Pelajari lebih lanjut tentang cara mengintegrasikan gambar WebP dengan WordPress .

Kesimpulan mengenai format gambar adalah bahwa tidak ada format yang benar secara universal. Itu sangat tergantung pada jenis gambar yang Anda butuhkan di situs Anda. Jika Anda menggunakan foto dengan variasi warna yang besar, JPG mungkin merupakan format yang tepat karena bagus dalam mengompresi foto dengan banyak warna, yang dapat dikurangi sampai batas tertentu. Itu tidak sesuai dengan gambar dengan hanya beberapa data warna seperti grafik atau tangkapan layar.

Mari kita lakukan tes cepat. Saya menyimpan gambar JPG yang berisi banyak warna, lalu mengonversinya menjadi PNG. Setelah dikonversi, ukuran foto menjadi jauh lebih besar. Kemudian, saya menggunakan ImageResize.org alat untuk mengompres kedua gambar (saya memilih alat ini karena memungkinkan saya untuk mengompres kedua format dan menggunakan file yang lebih besar dari 1MB).

This is the uncompressed image (via MyStock.photos):
<figure class=”

“>

Dan ini adalah hasilnya:
<figure class=”

“>

Di sisi lain, PNG adalah format yang tepat jika Anda menggunakan banyak tangkapan layar, grafik, logo, atau gambar transparan — secara umum, gambar dengan sedikit warna atau gambar yang mengandung warna blok (misalnya, transisi antara latar belakang terang dan gelap ). PNG lossless dan seringkali dapat menghasilkan ukuran yang sangat kecil setelah kompresi, yang jika tidak bisa lebih besar seperti JPG. Menyimpan gambar semacam ini sebagai JPG dapat membuatnya berkualitas rendah dan buram.

Mari kita lakukan tes lain. Saya menyimpan tangkapan layar dasbor WordPress saya sebagai JPG dan PNG. Kemudian saya menggunakan ImageResize.org yang sama untuk mengompresi setiap format. Perlu disebutkan bahwa file PNG disimpan dalam ukuran yang jauh lebih kecil daripada JPG.

Ini gambarnya:
<figure class=”

“>

Hasil setelah kompresi:
<figure class=”

“>

Cari Tahu Ukuran Tampilan Maksimum Gambar Anda #

Jika Anda ingin mengoptimalkan gambar sendiri, Anda harus terlebih dahulu mencari tahu berapa ukuran tampilan maksimumnya. Karena situs Anda responsif, semua gambar yang Anda unggah akan disajikan pada resolusi berbeda berdasarkan area pandang pengguna (perangkat tempat mereka menjelajahi situs Anda).

Ukuran tampilan maksimum adalah resolusi terbesar yang dapat diambil gambar dengan menghitung semua area pandang dan layar potensial yang dapat mengaksesnya.

Bagaimana Anda bisa memeriksa ukuran tampilan maksimum suatu gambar?

Pertama, buka halaman atau postingan yang berisi gambar yang ingin Anda periksa. Anda perlu mengubah ukuran browser Anda secara manual (membuatnya lebih kecil secara bertahap dengan menyeret tepinya) ke titik di mana gambar melompat ke dimensi terbesar. Titik ini disebut “breakpoint” — karena ukuran gambar tiba-tiba pecah.

Setelah gambar melompat ke dimensi besar, tekan klik kanan -> Inspect (jika browser Anda adalah Chrome). Arahkan kursor ke URL gambar di kanan atas layar dan Anda akan melihat dimensi yang disajikan dan dimensi aslinya (intrinsik). Yang terakhir adalah apa yang akan diunduh pengguna, sedangkan yang pertama mewakili ukuran tampilan maksimum gambar pada halaman itu.
<figure class=”

“>

Dengan mengingat informasi ini, Anda sekarang dapat mengubah ukuran dan memotong gambar Anda sehingga sesuai dengan dimensi yang diberikan. Dengan cara ini, Anda akan memastikan bahwa Anda akan mengoptimalkannya secara efisien sehingga tetap terlihat bagus di layar dan, pada saat yang sama, tidak terlalu membebani situs Anda.

Misalnya, jika Anda ingin gambar Anda ramah-Retina, editlah menggunakan dua kali ukuran tampilan maksimum untuk kualitas yang lebih baik. Gambar di tangkapan layar memiliki 428×321 piksel, jadi buatlah 856×642 piksel untuk kualitas Retina yang lebih baik.

Ubah Ukuran Dan Pangkas Gambar #

Saat Anda berurusan dengan file yang memiliki dimensi jauh lebih besar daripada yang biasanya Anda perlukan untuk ditampilkan di situs Anda, Anda cukup mengubah ukuran atau memotongnya dan baru kemudian mengunggahnya di situs Anda. Anda akan menghemat ruang disk dan menjaga situs Anda lebih ringan.

Tentu saja, jika Anda memiliki portofolio fotografi dan penting bagi Anda agar pengunjung melihat karya Anda dalam bentuk aslinya, maka ya, Anda memiliki motif nyata untuk menampilkannya dengan sebaik-baiknya.

Anda juga dapat memotong gambar Anda kapan saja jika hanya ada satu detail yang ingin Anda tunjukkan kepada orang-orang dan tidak ada alasan untuk mengunggah gambar yang luas dan penuh jika konten lainnya berlebihan.

Kompres Gambar #

Semua editor foto memiliki opsi ini di mana mereka menanyakan kualitas apa yang Anda inginkan untuk menyimpan gambar yang diedit. Anda biasanya menggunakan kualitas 100% (untuk alasan yang jelas), tetapi Anda dapat menurunkannya sedikit, katakanlah, 70-80%. Anda tidak akan melihat perbedaan besar jika gambar sudah memiliki resolusi besar. Ukurannya akan lebih kecil dalam hal ini.

Setelah Anda menetapkan persentase kualitas yang lebih rendah dan menyimpan gambar, Anda dapat masuk lebih dalam dengan putaran pengoptimalan gambar yang sama dengan menggunakan alat online untuk mengurangi ukurannya lebih banyak lagi.

JPEG Optimizer dan JPEG.io memiliki persentase pengurangan sekitar 60%, sedangkan TinyPNG (jika Anda memilih untuk bekerja dengan PNG) sekitar 70%. Kraken bagus untuk kedua format, mengembalikan file sekitar 70% lebih kecil melalui kompresi lossy.

Pengguna Mac dapat mencoba ImageOptim , yang mengompresi format JPG dan PNG hingga 50%.

Atur Pengoptimalan Gambar Pada Autopilot #

Untuk mengotomatiskan proses pengoptimalan gambar di situs Anda, Anda memerlukan alat (alias plugin WordPress). Itu berarti bahwa mereka akan melakukan semua hal yang kita bicarakan sebelumnya tetapi dengan autopilot.

Ada beberapa solusi WordPress otomatis untuk optimasi gambar tetapi, dalam posting ini, saya hanya akan menyajikan kepada Anda yang datang dengan fitur solid yang dapat menempatkan di atas meja set lengkap untuk optimasi gambar lengkap.

Saya juga akan menunjukkan kepada Anda pengujian yang saya lakukan dengan masing-masing dari tiga alat berikutnya sehingga Anda dapat mengamati semuanya secara detail.

Kami akan membandingkan Optimole, ShortPixel, dan Smush.

Optimal  #

<figure class=”

“>

Optimole mungkin yang paling kompleks dari semuanya karena merangkum semua fitur yang mungkin diperlukan untuk pengoptimalan gambar yang efisien. Jadi, jika Anda mencari pengoptimalan gambar yang cerdas dalam semua aspeknya, maka Anda mungkin menyukai Optimole.

Optimole mentransfer gambar Anda ke cloud tempat mereka dioptimalkan. Kemudian, gambar yang dioptimalkan disaring melalui CDN yang membuatnya dimuat dengan cepat. Plugin menggantikan setiap URL gambar dengan yang khusus.

Menyesuaikan gambar dengan ukuran layar setiap pengguna adalah fitur utama lainnya dari Optimole. Artinya, secara otomatis mengoptimalkan gambar Anda ke dimensi yang tepat berdasarkan viewport pengguna, jadi jika Anda melihat gambar dari tablet, itu akan memberikan ukuran dan kualitas yang sempurna untuk standar tablet. Transformasi ini dibuat dengan cepat, tanpa menghabiskan ruang ekstra di situs Anda.

Pendekatan cerdas lain yang akan Anda nikmati tentang Optimole adalah kecerdasannya untuk mendeteksi ketika pengguna memiliki koneksi yang lebih lambat. Saat mengenali koneksi yang lambat, plugin memampatkan gambar di situs Anda pada tingkat yang lebih tinggi sehingga waktu pemuatan halaman pengunjung Anda tidak akan terpengaruh.

Jika Anda ingin memuat lambat, plugin juga memungkinkan Anda untuk menggunakannya di situs Anda. Anda cukup mencentang satu kotak dan Optimole akan bekerja untuk Anda.

Hal menarik lainnya tentang Optimole adalah ia tidak akan mengoptimalkan semua gambar di perpustakaan media WordPress Anda secara otomatis. Ini hanya mengoptimalkan gambar yang diminta orang dengan memasukkan halaman di situs Anda. Jadi jangan panik jika Anda menginstal plugin dan tidak ada yang terjadi. Setelah gambar diminta oleh pengguna, plugin akan melakukan apa yang sudah saya jelaskan di atas. Ini sangat menghemat ruang karena plugin ini hanya menggunakan satu gambar, yang diubah di cloud berdasarkan permintaan dan perangkat pengguna.

Yang saya sukai dari plugin ini adalah plugin ini cerdas dan efisien dan tidak pernah melakukan pekerjaan atau konversi yang tidak perlu. Kami menggunakannya di tiga situs kami: ThemeIsle , CodeinWP , dan JustFreeThemes . Anda dapat memeriksanya sebagai demo.

ShortPixel #

<figure class=”

“>

ShortPixel adalah plugin WordPress populer yang hebat dalam mengoptimalkan gambar Anda secara massal. Plugin ini bekerja dengan autopilot dan mengoptimalkan secara default setiap gambar yang Anda unggah ke perpustakaan media Anda. Anda dapat menonaktifkan opsi ini jika Anda tidak membutuhkannya.

Plugin ini menawarkan kompresi lossy, glossy, dan lossless, yang dapat Anda terapkan bahkan ke thumbnail. Semua gambar yang dimodifikasi disimpan dalam folder terpisah di situs Anda di mana Anda selalu dapat bolak-balik untuk membatalkan/mengulang pengoptimalan. Misalnya, konversi kembali dari lossless ke lossy dan sebaliknya, atau cukup pulihkan ke file aslinya.

Selain itu, jika Anda pergi ke perpustakaan media WordPress dan memilih tampilan daftar alih-alih tampilan grid yang datang secara default, Anda akan melihat bahwa kolom terakhir membuat Anda tetap up to date mengenai status kompresi. Dengan cara ini, Anda dapat menelusuri semua gambar secara manual dan mengompres/mendekompresi gambar yang Anda butuhkan. Untuk setiap gambar, Anda akan melihat berapa persen yang dikompresi.

Jika Anda ingin mengoptimalkan semuanya sekaligus, cukup pilih Tindakan Massal -> Optimalkan dengan ShortPixel (atau salah satu sub-itemnya), dan klik Terapkan. Gambar Anda akan dikompresi hanya dalam beberapa saat.

Selain itu, ShortPixel memungkinkan Anda mengonversi PNG ke JPG secara otomatis, membuat versi WebP dari gambar Anda, dan mengoptimalkan file PDF. Ini juga menyediakan konversi CMYK ke RGB. Ini bekerja dengan layanan Cloudflare CDN untuk mengunggah gambar yang dioptimalkan di server cloud.

Bubur  #

<figure class=”

“>

Nama besar lainnya di ruang plugin WordPress, Smush adalah alat ramah yang mengoptimalkan gambar Anda saat dijalankan. Smush hadir dengan dasbor pelacakan yang indah yang membuat Anda tetap mengetahui total penghematan situs web Anda, berapa banyak item yang belum dioptimalkan, berapa banyak yang sudah dioptimalkan, dan metode apa yang digunakan untuk itu.

Ini juga memiliki kompresi massal, pemuatan lambat, PNG otomatis ke JPG, dan integrasi CDN. Sama seperti ShortPixel, Smush juga menambahkan status kompresi ke setiap gambar di perpustakaan media Anda, sehingga Anda dapat mengelolanya secara individual atau massal.

Smush menggunakan kompresi lossless secara default, dengan fokus menjaga gambar sedekat mungkin dengan versi aslinya. Kelemahan dari plugin ini adalah tidak menawarkan jumlah fitur yang sama dalam versi gratisnya, seperti yang dilakukan oleh plugin yang disebutkan di atas. Anda perlu membayar untuk beberapa fungsi dasar.

Menguji Tiga Plugin Pengoptimalan Gambar #

Saya mengambil gambar 904 KB berikutnya dari MyStock.photos dan menjalankannya melalui serangkaian tes dengan tiga plugin yang saya sajikan di atas.
<figure class=”

“>

Beginilah cara plugin dilakukan:

• Optimole: 555 KB (312 KB jika Anda memilih tingkat kompresi Tinggi)
• ShortPixel: 197.87 KB
• Smush: 894 KB

*Optimole dan ShortPixel menggunakan kompresi lossy, sedangkan Smush menggunakan kompresi lossless.

Pendekatan selanjutnya bahkan lebih menarik.

Saya mengunggah gambar ini di situs WordPress saya dan menggunakannya dalam posting blog sesudahnya. Baik Optimole dan ShortPixel secara otomatis mengurangi ukurannya agar sesuai dengan resolusi layar dan tata letak posting saya. Jadi, alih-alih menggunakan gambar hampir 1 MB, dikecilkan agar pas dengan posting, saya sekarang menggunakan sama yang gambar yang diperkecil ke ukuran tampilan maksimumnya . Plugin menemukan ukuran dan dimensi yang tepat yang dibutuhkan dalam posting blog saya dan memodifikasi gambar yang sesuai.

Dan ini adalah dimensi yang dikurangi per setiap plugin:

• Optimole: 158 KB, 524×394 piksel
• Piksel Pendek: 71,7 KB, 768×577 piksel
• Smush: tidak dioptimalkan untuk permintaan khusus ini

Karena itu, penting untuk mencatat dua hal:

1. 1. ShortPixel mengembalikan ukuran kompresi terbaik tetapi dalam dimensi yang lebih besar; secara keseluruhan, hasil yang baik hanya kehilangan sedikit kualitas asli gambar.

<figure class=”

“>

1. Optimole (yang saya atur pada kompresi Otomatis kali ini) mengembalikan ukuran yang lebih tinggi tetapi dengan dimensi yang lebih kecil dan dengan kualitas yang lebih baik seperti yang terlihat dengan mata telanjang. Optimole entah bagaimana menemukan perpaduan yang bagus antara ukuran dan dimensi sehingga kualitasnya tidak akan kehilangan banyak hal di sini.

<figure class=”

“>

Ini adalah bagaimana seharusnya terlihat di situs web langsung:
<figure class=”

“>

Jika Anda bertanya kepada saya, Optimole lebih baik beradaptasi dengan permintaan khusus ini dan area pandang pengguna (dalam hal ini, layar laptop saya).

Sekarang, mari kita lihat sekilas bagaimana plugin ini beradaptasi dengan layar seluler :

Saya mengikuti rutinitas yang sama. Saya mengaktifkan satu plugin sekaligus dan meminta halaman situs web yang sama melalui ponsel saya (Android). Hasil:

Smush : tidak mengoptimalkan gambar untuk seluler.

Layar demo seluler saya:
<figure class=”

break-out article__image

“>

Seperti yang terjadi pada contoh pertama, Optimole mengembalikan versi yang lebih besar dan lebih berfokus pada kualitas, sementara ShortPixel mengonversi gambar ke ukuran yang lebih baik tetapi dengan sedikit penurunan kualitas.

Saya awalnya menggunakan gambar 6 MB untuk pengujian desktop utama tetapi, karena Smush tidak mengizinkan file yang lebih besar dari 1 MB dalam versi gratisnya (yang lain mengizinkan), saya harus memilih gambar di bawah 1 MB.

Saya akan tetap melakukan tes ini dengan Optimole dan ShortPixel saja.

Jadi, mari kita lakukan pengujian keempat, kali ini pada gambar yang lebih besar.

Gambar asli memiliki 6,23 MB .
<figure class=”

“>

Ukuran yang dioptimalkan adalah:

• Optimole : 798 KB dengan tingkat kompresi otomatis, 480 KB dengan tingkat kompresi tinggi
• ShortPixel : 400.58 KB

Ada juga plugin EWWW Image Optimizer yang, mirip dengan Smush, hanya menggunakan kompresi lossless dan hanya mengurangi gambar dengan persentase yang cukup kecil.

Kesimpulan setelah empat tes:

• ShortPixel memberikan tingkat pengoptimalan terbaik (sekitar 70-80%), sementara Optimole berada di 40% pada tingkat kompresi Otomatis dan 70% pada tingkat kompresi Tinggi.
• Optimole mengadaptasi konten dengan lebih baik ke area pandang pengguna dan koneksi internet. Jika Anda menyetelnya ke Otomatis, ia akan mengetahui cara mengurangi ukuran secara konsisten dan mempertahankan kualitas yang hebat. Saya suka bahwa ia tahu cara menangani semua variabel ini sehingga keduanya membantu meningkatkan waktu pemuatan situs Anda dan menampilkan gambar berkualitas tinggi kepada pengunjung Anda.

Jika saya harus mengumpulkan tidak hanya hasil tes tetapi juga fitur plugin lainnya (alias kesederhanaan dan keramahan pengguna), saya akan menggunakan Optimole. Tetapi ShortPixel juga merupakan pesaing hebat yang sangat saya rekomendasikan. Smush juga merupakan pilihan yang layak jika Anda bersedia membayar untuk itu atau Anda seorang fotografer yang ingin menjaga gambar mereka sesedikit mungkin diproses.

Penutup #

Jangan meremehkan dampak pengoptimalan gambar. Gambar selalu menjadi salah satu alasan utama situs web lambat. Google tidak menyukai situs web yang lambat, begitu pula pengunjung dan klien Anda. Terutama jika Anda mencari monetisasi melalui situs WordPress Anda. Situs yang tidak dioptimalkan akan memengaruhi SEO Anda, menyeret Anda ke bawah di SERP, meningkatkan rasio pentalan Anda, dan akan kehilangan uang Anda.

Tidak masalah jika Anda lebih suka melakukan pengoptimalan gambar secara manual atau memilih plugin untuk mengotomatiskannya untuk Anda, Anda akan melihat hasil yang baik lebih cepat daripada nanti.

Metode lain apa yang Anda gunakan untuk menahan gambar di situs WordPress Anda?