Cara Mengoptimalkan Gambar untuk Kinerja Web tanpa Kehilangan Kualitas

By | Februari 14, 2020

Tahukah Anda bahwa mengoptimalkan gambar sebelum mengunggah ke WordPress dapat berdampak besar pada kecepatan situs web?

Yap, saat memulai blog baru, banyak pemula hanya mengunggah gambar tanpa mengoptimalkannya untuk web. File gambar besar ini membuat situs web sobat lebih lambat.

Sobat dapat memperbaikinya dengan menggunakan praktik terbaik pengoptimalan gambar sebagai bagian dari rutinitas blogging harian sobat.

Pada artikel ini, kami akan menunjukkan kepada sobat bagaimana cara mengoptimalkan gambar untuk kinerja web yang lebih cepat tanpa kehilangan kualitas. Kami juga akan membagikan plugin pengoptimalan gambar otomatis untuk WordPress yang dapat membuatnya semakin mudah.

Karena ini adalah panduan komprehensif tentang pengoptimalan gambar untuk web, kami telah membuat daftar isi yang mudah diikuti:

Apa itu Pengoptimalan Gambar? (Gambar Dioptimalkan vs Tidak Dioptimalkan)

Optimalisasi gambar adalah proses menyimpan dan mengirim gambar dalam ukuran file sekecil mungkin tanpa mengurangi kualitas gambar secara keseluruhan.

Walaupun prosesnya terdengar rumit, sebenarnya cukup mudah dilakukan. Sobat dapat menggunakan salah satu dari banyak plugin dan alat optimisasi gambar untuk secara otomatis mengkompres gambar hingga 80% tanpa kehilangan kualitas gambar yang terlihat.

Berikut adalah contoh gambar yang dioptimalkan vs yang tidak dioptimalkan:

Gambar dioptimalkan vs Tidak dioptimalkan

Seperti yang sobat lihat, ketika dioptimalkan dengan benar gambar yang sama bisa menjadi 75% lebih kecil dari aslinya tanpa kehilangan kualitas.

Bagaimana cara Pengoptimalan Gambar berfungsi?

Secara sederhana, pengoptimalan gambar bekerja dengan menggunakan teknologi kompresi seperti “Lossy” dan “Lossless” yang membantu mengurangi ukuran file keseluruhan tanpa kehilangan kualitas yang nyata.

Apa artinya Mengoptimalkan Gambar?

Jika sobat pernah menerima rekomendasi untuk mengoptimalkan gambar dengan dukungan hosting WordPress atau dengan alat uji kecepatan, maka semua itu artinya sobat perlu mengurangi ukuran file gambar dengan mengoptimalkannya untuk web.

Mengapa Optimasi Gambar Penting? Apa Manfaat Pengoptimalan Gambar?

Meskipun ada banyak manfaat untuk mengoptimalkan gambar, di bawah ini adalah yang teratas yang harus sobat ketahui:

  • Kecepatan situs web lebih cepat
  • Peningkatan peringkat SEO
  • Tingkat konversi keseluruhan yang lebih tinggi untuk penjualan dan prospek
  • Lebih sedikit penyimpanan dan bandwidth (yang dapat mengurangi biaya hosting dan CDN)
  • Cadangan situs web yang lebih cepat (juga mengurangi biaya penyimpanan cadangan)

Di luar video, gambar adalah item terberat berikutnya di halaman web. Menurut arsip HTTP, gambar membentuk rata-rata 21% dari total berat halaman web.

Karena kita tahu situs web cepat akan mendapat peringkat lebih tinggi di mesin pencari (SEO) dan memiliki konversi yang lebih baik, optimasi gambar adalah sesuatu yang harus dilakukan setiap situs web bisnis jika mereka ingin sukses dalam dunia online.

Sekarang sobat mungkin bertanya-tanya seberapa besar perbedaan yang bisa dihasilkan oleh optimasi gambar?

Menurut penelitian Strangeloop, penundaan satu detik dalam waktu pemuatan situs web dapat membuat menurunkan 7% dari penjualan, tampilan halaman 11% jadi lebih sedikit, dan penurunan kepuasan pelanggan sebesar 16%.

Jika ini masih belum cukup untuk alasan mempercepat situs web sobat, maka sobat harus tahu bahwa mesin pencari seperti Google juga memberikan perlakuan SEO preferensial untuk memuat situs web yang lebih cepat.

Ini berarti bahwa dengan mengoptimalkan gambar untuk web, sobat dapat meningkatkan kecepatan situs web dan meningkatkan peringkat SEO WordPress.

Bagaimana Cara Mengoptimalkan Gambar untuk Kinerja Web?

Kunci keberhasilan optimasi gambar untuk kinerja web adalah menemukan keseimbangan sempurna antara ukuran file terendah dan kualitas gambar yang dapat diterima (gambar ukuran kecil tapi kualitas tidak berubah).

Tiga hal yang memainkan peran besar dalam pengoptimalan gambar adalah:

  • Format file gambar (JPEG vs PNG vs GIF)
  • Kompresi (Kompresi lebih tinggi = ukuran file lebih kecil)
  • Dimensi Gambar (tinggi dan lebar)

Dengan memilih kombinasi yang tepat dari ketiganya, sobat dapat mengurangi ukuran gambar hingga 80%.

Mari kita lihat masing-masing lebih detail.

1. Format File Gambar

Bagi kebanyakan pemilik situs web, hanya tiga format file gambar yang benar-benar penting adalah JPEG, PNG, dan GIF. Memilih jenis file yang tepat memainkan peran penting dalam optimasi gambar.

Untuk mempermudah, sobat perlu menggunakan JPEG untuk foto atau gambar dengan banyak warna, PNG untuk gambar sederhana atau ketika membutuhkan gambar transparan, dan GIF hanya untuk gambar animasi.

Bagi mereka yang tidak tahu perbedaan antara setiap jenis file, format gambar PNG tidak terkompresi yang berarti itu adalah gambar berkualitas lebih tinggi. Kelemahannya adalah ukuran file jauh lebih besar.

Di sisi lain, JPEG adalah format file terkompresi yang sedikit mengurangi kualitas gambar untuk memberikan ukuran file yang jauh lebih kecil.

Sedangkan GIF hanya menggunakan 256 warna bersama dengan kompresi lossless yang menjadikannya pilihan terbaik untuk gambar animasi.

2. Kompresi

Hal berikutnya adalah kompresi gambar yang memainkan peran besar dalam optimasi gambar.

Ada berbagai jenis dan level kompresi gambar yang tersedia. Pengaturan untuk masing-masing akan bervariasi tergantung pada alat kompresi gambar yang sobat gunakan.

Sebagian besar alat pengeditan gambar seperti Adobe Photoshop, On1 Photo, GIMP, Affinity Photo, dan lainnya hadir dengan fitur kompresi gambar bawaan.

Sobat juga dapat menyimpan gambar secara normal dan kemudian menggunakan alat web seperti TinyPNG, Kraken.io atau JPEG Mini untuk kompresi gambar yang lebih mudah.

Meskipun sedikit manual, kedua metode ini memungkinkan sobat untuk mengompres gambar sebelum mengunggahnya ke WordPress, seperti yang kami lakukan di jangklik.com

Ada juga beberapa plugin WordPress populer seperti Optimole, EWWW Image Optimizer, dan lainnya yang dapat secara otomatis mengompres gambar ketika sobat pertama kali mengunggahnya. Banyak pemula dan bahkan perusahaan besar lebih suka menggunakan plugin pengoptimalan gambar ini karena mudah dan nyaman.

Kami akan membagikan lebih banyak tentang plugin pengoptimalan gambar WordPress dalam artikel ini.

3. Dimensi Gambar

Biasanya, ketika sobat mengimpor foto dari ponsel atau kamera digital, ia memiliki resolusi yang sangat tinggi dan dimensi file besar (tinggi dan lebar).

Biasanya, foto-foto ini memiliki resolusi 300 DPI dan dimensi mulai dari 2000 piksel dan lebih banyak. Foto-foto berkualitas tinggi ini sangat cocok untuk penerbitan cetak atau desktop. Ini tidak cocok untuk situs web.

Mengurangi dimensi file menjadi sesuatu yang lebih masuk akal dapat secara signifikan mengurangi ukuran file gambar. Sobat cukup mengubah ukuran gambar menggunakan perangkat lunak pengedit gambar di komputer.

Misalnya, kami mengoptimalkan foto dengan ukuran file asli 1,8 MB, resolusi 300 DPI, dan dimensi gambar 4900 × 3200 piksel.

Kami memilih format jpeg untuk kompresi lebih tinggi dan mengubah dimensi menjadi 1200 × 795 piksel, dan mengurangi ukuran file gambar menjadi 103 KB. Itu 94% kurang dari ukuran file asli.

Sekarang setelah sobat mengetahui tiga faktor penting dalam pengoptimalan gambar, mari kita lihat berbagai alat pengoptimalan gambar untuk pemilik situs web.

Alat dan Program Optimasi Gambar Terbaik

Seperti yang kami sebutkan sebelumnya, sebagian besar perangkat lunak pengeditan gambar datang dengan pengaturan pengoptimalan gambar dan kompresi.

Di luar perangkat lunak pengeditan gambar, ada juga beberapa alat optimisasi gambar gratis yang kuat yang dapat sobat gunakan untuk mengoptimalkan gambar untuk web (hanya dengan beberapa klik).

Kami merekomendasikan penggunaan alat-alat ini untuk mengoptimalkan gambar sebelum mengunggahnya ke WordPress, khususnya jika sobat seorang perfeksionis.

Metode ini membantu sobat menghemat ruang disk di akun hosting WordPress, dan menjamin gambar tercepat dengan kualitas terbaik karena sobat meninjau setiap gambar secara manual.

Adobe Photoshop

Adobe Photoshop adalah perangkat lunak premium yang dilengkapi dengan fitur untuk menyimpan gambar yang dioptimalkan untuk web. Cukup buka gambar sobat dan klik opsi “File » Save for Web“.

Ini akan membuka kotak dialog baru. Di sebelah kanan, sobat dapat mengatur format gambar yang berbeda. Untuk format JPEG, sobat akan melihat opsi kualitas yang berbeda. Ketika sobat memilih opsi, itu juga akan menunjukkan ukuran file di kiri bawah.

Adobe Photoshop

GIMP

GIMP adalah alternatif open-source dan gratis untuk Adobe Photoshop populer. Ini dapat digunakan untuk mengoptimalkan gambar sobat untuk web. Kelemahannya adalah tidak mudah digunakan seperti beberapa solusi lain dalam daftar ini.

Pertama, sobat perlu membuka gambar di GIMP dan kemudian pilih File » Export As. Ini akan memunculkan kotak dialog save file. Berikan nama baru pada file, lalu klik tombol ekspor.

GIMP

Ini akan memunculkan opsi ekspor gambar. Untuk file jpeg, sobat dapat memilih level kompresi untuk mengurangi ukuran file. Terakhir, klik tombol ekspor untuk menyimpan file gambar yang dioptimalkan.

TinyPNG

TinyPNG adalah aplikasi web gratis yang menggunakan teknik kompresi lossy pintar untuk mengurangi ukuran file PNG. Yang harus sobat lakukan adalah pergi ke situs web mereka dan mengunggah gambarnya (drag & drop sederhana).

tinypng

Mereka akan memampatkan gambar, dan memberi sobat tautan unduhan. Sobat dapat menggunakan situs web saudaranya, TinyJPG, untuk kompresi gambar JPEG.

Mereka juga memiliki ekstensi untuk Adobe Photoshop yang kami gunakan sebagai bagian dari proses pengeditan gambar kami karena menggabungkan yang terbaik dari TinyPNG dan TinyJPG di dalam Photoshop.

Untuk pengembang, mereka memiliki API untuk mengonversi gambar secara otomatis, dan untuk pemula mereka memiliki plugin WordPress yang secara otomatis dapat melakukannya untuk sobat.

JPEG Mini

JPEGmini menggunakan teknologi kompresi lossless yang secara signifikan mengurangi ukuran gambar tanpa mempengaruhi kualitas perseptualnya. Sobat juga dapat membandingkan kualitas gambar asli dan gambar yang dikompresi.

jpegmini

Sobat dapat menggunakan versi web mereka secara gratis, atau membeli program untuk komputer sobat. Mereka juga memiliki API berbayar untuk mengotomatiskan proses untuk server.

ImageOptim

ImageOptim adalah utilitas Mac yang memungkinkan sobat untuk mengompres gambar tanpa kehilangan kualitas dengan menemukan parameter kompresi terbaik dan menghapus profil warna yang tidak perlu.

imageoptim

Alternatif Windows untuk ini adalah Trimage.

Plugin Pengoptimalan Gambar Terbaik untuk WordPress

Kami percaya bahwa cara terbaik untuk mengoptimalkan gambar adalah dengan melakukannya sebelum mengunggahnya ke WordPress. Namun, jika sobat menjalankan situs multi-penulis atau membutuhkan solusi otomatis, maka sobat dapat mencoba plugin kompresi gambar WordPress.

Di bawah ini adalah daftar plugin kompresi gambar WordPress terbaik kami:

Menggunakan salah satu plugin pengoptimalan gambar WordPress ini akan membantu mempercepat situs web sobat.

Kesimpulan

Jika sobat tidak mengoptimalkan gambar untuk web, maka sobat harus mulai melakukannya sekarang. Ini akan membuat perbedaan besar pada kecepatan situs, dan membuat pengguna lebih nyaman.

Dan bagusnya, situs web yang lebih cepat sangat bagus untuk SEO, dan sobat mungkin akan melihat peningkatan peringkat pada mesin pencari.

Di luar optimasi gambar, dua hal yang secara signifikan akan membantu mempercepat situs web sobat adalah menggunakan plugin caching WordPress dan menggunakan CDN WordPress.

Atau, sobat dapat menggunakan perusahaan hosting WordPress yang dikelola karena mereka sering menawarkan caching dan CDN sebagai bagian dari platform.

Kami harap artikel ini membantu sobat mempelajari cara mengoptimalkan gambar di WordPress. Sobat mungkin juga ingin melihat panduan kami tentang Masalah Gambar Paling Umum di WordPress.