Cara Mengoptimalkan Gambar untuk Web: Panduan Langkah demi Langkah untuk Performa Situs yang Lebih Baik

Tidak diragukan lagi bahwa gambar adalah aset yang tak ternilai bagi world wide web. Dari memvisualisasikan data hingga memecah paragraf teks hingga memamerkan karya portofolio Anda, foto dan grafik adalah bagian penting dari sebagian besar desain situs web dan membantu pengguna mendapatkan pengalaman online yang luar biasa.

Namun, memiliki visual yang bagus dapat merugikan situs web Anda. Dengan resolusi yang lebih tinggi, muncul ukuran file yang lebih besar, yang juga berarti waktu pemuatan yang lebih lambat. AKA, gambar sering menjadi penyebab kinerja situs yang buruk. Dan ingat, inti dari menambahkan gambar ke situs web Anda adalah untuk menciptakan pengalaman yang lebih baik bagi pengguna Anda (atau bahkan mungkin untuk meningkatkan penjualan dan konversi!), yang sulit dilakukan dengan situs yang lambat.

Jadi, bagaimana Anda menyeimbangkan kinerja situs dengan desain visual?

Dengan mengoptimalkan gambar Anda.

Ada banyak hal kecil yang dapat Anda lakukan selama proses pembuatan gambar untuk mengoptimalkan ukuran file, khususnya dengan mempertimbangkan situs web Anda.

Dalam panduan langkah demi langkah untuk pengoptimalan gambar ini, saya akan membahas:

• Apa itu pengoptimalan gambar?
• Mengapa pengoptimalan gambar itu penting?
• 7 cara mengoptimalkan gambar untuk web

Apa itu Pengoptimalan Gambar?

Secara umum, pengoptimalan gambar adalah tindakan mengurangi ukuran file tanpa kehilangan kualitas. Anda dapat mengoptimalkan gambar Anda dalam tahap pembuatan (dengan menggunakan opsi "Ekspor" yang tepat di Photoshop) atau langsung di situs web Anda (dengan menggunakan pemuatan malas untuk menampilkan media di situs Anda). Tujuannya adalah untuk mengurangi jumlah data yang harus diunduh pengguna, sehingga mereka bisa mendapatkan konten yang mereka cari dengan lebih cepat tanpa mengorbankan kualitas.

Mengapa Pengoptimalan Gambar Penting?

Orang-orang memiliki rentang perhatian yang pendek ketika berbicara tentang web, oleh karena itu penting untuk memuat situs web Anda dalam dua detik atau kurang. Dan salah satu faktor paling umum yang memperlambat situs Anda adalah gambar Anda. (Bahkan jika situs web Anda berjalan di server terbaik, seperti yang akan Anda dapatkan dengan host WordPress yang dikelola, gambar dapat menjadi penyebab penurunan kinerja.)

Dengan memanfaatkan praktik terbaik pengoptimalan gambar, ukuran file Anda akan tetap kecil dan waktu muat Anda cepat, menciptakan pengalaman yang lebih baik bagi pengunjung situs Anda.

Ada alasan lain mengapa pengoptimalan gambar itu penting, namun, yang terkait langsung dengan garis bawah bisnis Anda. Selain memperlambat situs web Anda, gambar mengambil ruang disk di server yang menjalankan situs Anda. Sebagian besar penyedia hosting memberlakukan batas bandwidth per paket, artinya Anda tidak memiliki sumber daya tak terbatas—dan gambar Anda akan dengan cepat menggunakan ruang itu.

Meskipun ini bukan akhir dari dunia jika Anda melebihi batas itu, Anda mungkin akan dikenakan biaya kelebihan penggunaan, atau lebih buruk lagi, menutup situs web Anda.

Dengan mengoptimalkan gambar, Anda dapat memaksimalkan penyimpanan situs dan menghindari batas bandwidth tersebut.

Sekarang setelah Anda mengetahui betapa pentingnya pengoptimalan gambar, mari kita bicara tentang cara melakukannya! Panduan langkah demi langkah ini akan mencakup semuanya, mulai dari tips Photoshop hingga praktik pengembangan.

Cara Mengoptimalkan Gambar untuk Web

Panduan langkah demi langkah ini akan mencakup semua yang dapat Anda lakukan untuk mengoptimalkan gambar, mulai dari Photoshop dan berakhir di situs Anda.

Ikuti langkah-langkah ini untuk mengoptimalkan gambar Anda untuk kinerja situs yang lebih baik:

1. Patokan kecepatan situs Anda saat ini.
2. Ketahui cara memilih jenis file gambar terbaik.
3. Ubah ukuran gambar Anda sebelum mengekspor.
4. Kompres gambar untuk memperkecil ukuran file.
5. Mengotomatiskan pengoptimalan gambar dengan plugin WordPress.
6. Gunakan teknik "blur up" untuk memuat Gambar Kualitas Rendah terlebih dahulu.
7. Gunakan pemuatan malas.

1. Benchmark Kecepatan Situs Anda Saat Ini

Sebelum Anda melakukan semua pekerjaan ini untuk mengoptimalkan gambar Anda, mulailah dengan menjalankan uji kecepatan di situs Anda! Pada akhirnya, Anda akan dapat melihat dampak yang telah Anda buat (selain itu, Anda dapat membagikannya dengan tim atau atasan Anda, untuk pujian ekstra). Beberapa alat pengujian kecepatan yang populer adalah:

• Wawasan Google PageSpeed
• Alat Pingdom
• GTMetrix
• WebPageTest

Semua alat berbasis browser ini bekerja sangat mirip satu sama lain: Buka tautan, lalu masukkan URL Anda untuk laporan cepat tentang kecepatan dan kinerja situs Anda.

2. Ketahui Cara Memilih Jenis File Gambar Terbaik

Setelah selesai membuat gambar (baik menyimpan dari kamera atau mengekspor dari alat seperti Photoshop), Anda akan memiliki opsi untuk menentukan jenis file. Jenis file yang paling umum digunakan di web adalah JPEG, PNG, dan GIF. Dan seperti yang saya yakin Anda bisa tebak, mereka semua memiliki pro, kontra, dan praktik terbaiknya sendiri saat ditempatkan di situs web Anda.

JPEG

Gambar JPEG berfungsi paling baik untuk memamerkan foto berwarna kompleks di situs Anda, karena memungkinkan gambar berkualitas lebih tinggi dengan ukuran file yang lebih kecil. Jenis file ini mungkin akan berfungsi untuk sebagian besar gambar yang ingin Anda gunakan di situs Anda, dengan satu pengecualian utama: gambar dengan latar belakang transparan. (Untuk itu, lihat bagian selanjutnya tentang PNG!)

Saat menggunakan gambar JPEG untuk situs web Anda, pertimbangkan untuk mengekspornya sebagai "Progresif". Hal ini memungkinkan browser untuk langsung memuat versi sederhana dari gambar sebelum memuat resolusi penuh ke situs.

Jika Anda bekerja di Photoshop, Anda akan menemukan pengaturan ini saat mengekspor sebagai "Simpan untuk Web".

PNG

Jika Anda tidak memiliki banyak warna pada gambar Anda (seperti ilustrasi atau ikon datar), atau ingin memiliki latar belakang transparan, saya sarankan untuk mengekspor sebagai PNG. Pastikan Anda memiliki dimensi gambar yang tepat, dan cari opsi untuk menyimpan sebagai PNG-24 (atau 8, jika tidak ada penurunan kualitas).

GIF

Format gambar paling umum ketiga untuk web adalah GIF. Mereka hanya mendukung 256 warna, jadi Anda harus selektif dengan jenis file ini!

Untuk mengoptimalkan GIF untuk situs web Anda, pikirkan secara kritis tentang berapa lama GIF bertahan, jika perlu diulang, dan berapa banyak yang benar-benar Anda butuhkan di halaman atau situs tertentu.

3. Ubah Ukuran Gambar Anda Sebelum Anda Mengunggah

Salah satu cara termudah untuk mengoptimalkan gambar untuk web adalah mengubah ukurannya sebelum mengunggahnya ke situs Anda. Terutama jika Anda bekerja dengan gambar mentah dari kamera DSLR, dimensinya seringkali jauh lebih besar dari yang sebenarnya Anda butuhkan.

Misalnya, Anda menambahkan gambar ke artikel blog di situs Anda. Jika tema WordPress Anda menampilkan gambar pada 500 x 500 tetapi Anda mengunggah gambar dengan resolusi 1024 x 1024, semua piksel tambahan itu hanya meningkatkan ukuran file dan menurunkan kecepatan situs tanpa memberikan manfaat nyata.

Dengan memotong atau mengubah ukuran gambar Anda sebelum mengunggah, Anda akan mengurangi ukuran file, yang akan membantu situs Anda memuat sedikit lebih cepat dan menghemat ruang disk Anda untuk lebih banyak gambar.

Untuk mengubah ukuran gambar Anda, cukup buka perangkat lunak pengedit gambar pilihan Anda. Photoshop berfungsi dengan baik, atau Anda juga dapat menggunakan alat yang lebih sederhana seperti Preview (untuk Mac), Paint (untuk Windows), atau Canva (alat browser).

4. Kompres Gambar untuk Mengurangi Ukuran File

Setelah Anda memiliki gambar akhir, disimpan dalam format yang tepat dan dipotong ke ukuran yang sesuai, ada satu langkah lagi yang dapat Anda lakukan untuk mengoptimalkannya sebelum mengunggahnya ke situs Anda: mengompresinya.

Proses ini akan membantu Anda memperkecil ukuran file tanpa kehilangan kualitas gambar yang mencolok. Ada dua jenis utama kompresi: lossy dan lossless.

Kompresi lossless akan mempertahankan tingkat kualitas yang sama sebelum dan sesudah kompresi. Kompresi lossy akan membuang beberapa elemen foto, tetapi biasanya dengan cara yang tidak dapat dilihat oleh mata manusia. Untuk mempelajari lebih lanjut tentang jenis kompresi ini, saya merekomendasikan panduan ini dari Imagify.

Jika Anda melihat gambar tertentu di situs Anda dimuat dan perlahan mulai terlihat, itu mungkin merupakan tanda bahwa gambar tersebut memerlukan kompresi, pengubahan ukuran, atau keduanya.

Untuk mengompres gambar Anda, yang Anda butuhkan hanyalah alat kompresi gambar. Favorit saya meliputi:

• TinyPNG: Alat berbasis browser gratis untuk mengompresi gambar PNG dan JPEG.
• ImageOptim: Aplikasi sumber terbuka gratis untuk mengompresi gambar.
• JPEGmini: Aplikasi pengompres ulang foto untuk Mac dan Windows.
• RIOT: Aplikasi Windows gratis untuk mengoptimalkan gambar.
• Pengoptimal Gambar: Add-on gratis untuk Lokal.

TinyPNG

Alat berbasis browser ini mengoptimalkan gambar menggunakan kompresi lossy pintar, mengurangi ukuran file Anda dengan mengurangi jumlah warna yang digunakan. (Tapi jangan khawatir, Anda bahkan tidak akan menyadarinya!) Gratis dan cepat digunakan untuk PNG dan JPEG.

ImageOptim

Ini adalah aplikasi Mac gratis yang memampatkan gambar dengan menghilangkan kembung yang tidak perlu, sekaligus menjaga kualitas gambar sebanyak mungkin.

JPEG mini

JPEGmini adalah opsi berbayar yang kuat yang membantu Anda mengurangi ukuran file sekaligus mempertahankan kualitas dan formatnya. Itu memang memiliki uji coba gratis, jadi Anda dapat mencobanya sebelum membeli.

KERUSUHAN

Radical Image Optimization Tool (RIOT) adalah aplikasi Windows gratis untuk mengurangi ukuran file gambar. Ini menampilkan tampilan berdampingan, sehingga Anda dapat membandingkan kualitas gambar sebelum dan sesudah kompresi.

Pengoptimal Gambar, Add-on gratis untuk Lokal

Jika Anda menggunakan Lokal sebagai lingkungan pengembangan lokal, Anda dapat menggunakan Add-on Pengoptimal Gambar untuk mengompres gambar secara offline secara otomatis. Ini memindai situs Anda untuk semua file gambar, menghemat waktu Anda untuk mengompresinya satu per satu dan mempercepat situs Anda dalam prosesnya.

5. Mengotomatiskan Pengoptimalan Gambar dengan Plugin WordPress

Pada titik ini, Anda mungkin mulai berpikir bahwa pengoptimalan gambar adalah pekerjaan yang berat—dan memang bisa! Namun ada juga cara mudah untuk mempersingkat beberapa langkah ini, yaitu dengan memasang plugin pengoptimalan gambar di situs WordPress Anda.

Saya memiliki beberapa rekomendasi, dan masing-masing memiliki fitur unik. Namun umumnya, plugin pengoptimalan gambar akan memampatkan dan mengubah ukuran gambar Anda saat Anda mengunggah ke situs WordPress Anda. Ini berarti Anda dapat melewati langkah-langkah itu alih-alih melakukannya secara manual, sangat menghemat waktu.

Metode ini juga bagus jika Anda sedang membangun situs untuk klien. Banyak tekanan bagi pengguna akhir dan pembuat konten untuk mencoba mengingat setiap langkah dari proses pengoptimalan gambar. Dengan memasang plugin yang akan melakukan sebagian besar pekerjaan untuk mereka, Anda akan membantu memastikan kecepatan dan kinerja situs yang Anda buat setelah Anda menyerahkannya.

Untuk mengoptimalkan gambar di situs WordPress, saya merekomendasikan plugin ini:

• Awan Pengoptimal Gambar EWWW
• TinyPNG
• Kracken.io
• Bayangkan

Awan Pengoptimal Gambar EWWW

Plugin WordPress ini akan secara otomatis mengoptimalkan gambar Anda saat Anda mengunggahnya ke situs Anda, atau juga dapat mengoptimalkan gambar yang pernah Anda unggah sebelumnya. Ini membuatnya sangat bermanfaat jika Anda bekerja dengan situs yang sudah ada dengan gambar yang tidak dioptimalkan.

TinyPNG

Plugin WordPress oleh tim TinyPNG ini dapat mengoptimalkan gambar JPEG dan PNG saat diunggah. Jika Anda penggemar alat berbasis browser, sederhanakan prosesnya dengan plugin gratis mereka!

Kracken.io

Plugin Kracken.io dapat mengoptimalkan gambar baru dan yang sudah ada di situs WordPress Anda. Ini juga mendukung mode kompresi lossless dan lossy, memberi Anda banyak kendali atas hasil akhirnya.

Bayangkan

Plugin WordPress ini akan membantu mengoptimalkan gambar Anda tanpa kehilangan kualitas. Ini juga kompatibel dengan WooCommerce dan NextGen Gallery, jika Anda menggunakan plugin tersebut.

Catatan: Sebelum memilih plugin, pastikan untuk melihat cara kerjanya. Beberapa menggunakan operasi perpajakan server yang dapat menyebabkan masalah di situs Anda, sementara yang lain menggunakan opsi FTP untuk mempelajari beban di server web Anda.

6. Gunakan Teknik "Blur Up" untuk Memuat Gambar dengan Kualitas Lebih Rendah Terlebih Dahulu

Bahkan setelah semua langkah pengoptimalan sebelumnya, ada kasus di mana Anda mungkin masih bekerja dengan ukuran file besar atau banyak gambar pada satu halaman, sehingga memperlambat kecepatan situs Anda. Dalam kasus tersebut, kadang-kadang berguna untuk tidak hanya mengoptimalkan gambar, tetapi untuk mengoptimalkan pengalaman memuat sehingga pengunjung situs berpikir bahwa file media Anda dimuat lebih cepat dari yang sebenarnya.

Itulah yang dimaksud dengan dua langkah berikutnya—memberikan tampilan pemuatan gambar yang lebih cepat, sehingga pengguna tidak hanya menatap halaman kosong saat file Anda dimuat.

Salah satu cara untuk melakukannya adalah dengan memuat Gambar Kualitas Rendah (LQI) terlebih dahulu. Dengan memuat versi gambar yang lebih kecil sebelum memuat ukuran penuh, ini memberi pengguna sesuatu untuk dilihat sementara mereka menunggu semua detailnya. Ini memberikan persepsi waktu muat yang lebih cepat meskipun, secara teknis, semuanya dimuat dengan kecepatan yang sama.

Cara populer untuk melakukan ini adalah teknik "blur up", yang dapat Anda pelajari cara menerapkannya dengan tutorial tentang CSS-Tricks ini.

7. Lazy Load Gambar Situs Anda

Mirip dengan teknik “blur up”, ada satu lagi trik yang akan membantu Anda memberikan tampilan loading gambar yang lebih cepat: Lazy loading.

Saat seseorang membuka situs Anda, mereka memulai dari bagian atas halaman. Mungkin perlu beberapa saat bagi mereka untuk menggulir seluruh halaman, terutama jika mereka bertunangan. Alih-alih mencoba memuat semua gambar sekaligus, pemuatan lambat bertindak dengan asumsi bahwa pengguna paling peduli dengan konten yang dapat mereka lihat. Jadi, gambar dalam tampilan browser mereka dimuat sepenuhnya terlebih dahulu, sedangkan gambar lainnya memuat placeholder terlebih dahulu, hingga pengguna menggulir ke bagian halaman tersebut.

Pemuatan lambat adalah teknik yang hebat, dan bahkan lebih hebat jika dipasangkan dengan tips pengoptimalan gambar lainnya! Dan, ini sangat mudah dilakukan di situs WordPress, berkat plugin Smush.

Ini menyimpulkan panduan langkah demi langkah kami untuk kinerja situs yang lebih baik dengan mengoptimalkan gambar! Untuk melihat dampaknya pada situs Anda, jalankan tes kecepatan lainnya. Bagaimana kabarmu?

Dengan alat pengoptimalan gambar yang tepat, Anda akan dapat melihat kecepatan dan kinerja situs yang lebih baik dalam waktu singkat!