Mengoptimalkan Gambar untuk Web: Panduan Praktis

Mereka mengatakan sebuah gambar bernilai seribu kata, yang merupakan salah satu alasan mengapa gambar sangat penting dalam e-niaga. Tanpa pelanggan dapat mengambil, menyentuh, dan memeriksa produk, mereka sangat bergantung pada gambar untuk memahami warna, kualitas, dan cerita produk.

Jadi, tak perlu dikatakan lagi bahwa gambar Anda harus beresolusi tinggi dan tajam. Tapi, ini ada harganya. Gambar definisi tinggi yang besar dapat memiliki ukuran file yang sangat besar. Letakkan beberapa di antaranya di situs Anda dan pengalaman tajam dalam menavigasi toko online Anda dapat berakhir dengan perasaan lebih seperti berenang melalui tetes tebu. Ini tidak hanya akan menyebabkan pengunjung terpental tetapi, pada waktunya, Google juga akan memperhatikan, dan ini dapat memengaruhi SEO Anda.

Dalam e-niaga, sangat penting untuk menemukan keseimbangan yang baik antara kualitas gambar dan ukuran file gambar saat Anda menyimpan gambar untuk situs Anda. Kami akan menunjukkan kepada Anda bagaimana melakukan hal itu di posting ini.

Jika Anda dikenal suka mengambil foto produk dan mengunggahnya langsung ke toko Anda, tutorial ini cocok untuk Anda. Jika Anda tidak memiliki pengetahuan atau proses formal untuk menyimpan gambar dengan mempertimbangkan ukuran file, tutorial ini cocok untuk Anda. Jika situs Anda memiliki banyak gambar dan semuanya terasa lamban, tutorial ini cocok untuk Anda. Jika Anda belum mulai membangun toko online Anda, tutorial ini khusus untuk Anda.

Siap mengoptimalkan gambar Anda?

Opsi Jenis File Gambar

Ada tiga jenis file utama yang ingin kami fokuskan untuk menyimpan gambar yang dioptimalkan untuk web: GIF, JPG, dan PNG. Setiap jenis file memiliki kekuatan dan kelemahannya sendiri dan sangat penting untuk mengetahui dan mengingatnya saat menyimpan gambar.

Bekerja dengan JPG

JPG (juga dikenal sebagai JPEG) adalah jenis file paling populer untuk gambar di web. JPG sempurna untuk foto atau gambar kompleks yang mengandung banyak warna, bayangan, gradien, atau pola kompleks. JPG menangani jenis gambar ini dengan baik karena JPG memiliki palet warna yang besar untuk digunakan.

JPG juga dapat disimpan dalam kualitas tinggi, kualitas rendah, atau di mana pun di antaranya. Ini memungkinkan Anda untuk menyesuaikan dan menyimpan gambar persis seperti yang Anda inginkan, menyeimbangkan kualitas dan ukuran file.

Bekerja dengan PNG

PNG adalah format file online populer lainnya. Di Adobe Photoshop, Anda akan memiliki opsi untuk menyimpan PNG sebagai PNG-8 atau PNG-24.

• PNG-8 memiliki palet warna 256 warna yang sangat terbatas. Meskipun ukuran gambar lebih kecil, ini bukan pilihan yang baik untuk gambar dan foto yang rumit.
• PNG-24 memberikan gambar dengan kualitas yang jauh lebih tinggi tetapi harus dibayar dengan ukuran file yang lebih besar.

Yang terpenting, PNG dapat menangani transparansi. Ini adalah salah satu poin diferensiasi terbesar antara PNG dan JPEG.

Bekerja dengan GIF

GIF lebih populer bertahun-tahun yang lalu, tetapi masih merupakan pilihan untuk ukuran gambar kecil di mana hanya beberapa warna yang dibutuhkan. Sama seperti PNG-8, file GIF dibatasi hanya 256 warna. Karena itu, GIF tidak boleh digunakan untuk foto produk.

Menyimpan Gambar dengan Benar

Seperti yang diharapkan, gambar besar membutuhkan waktu lebih lama untuk dimuat. Ketika kami mengatakan besar, kami mengacu pada ukuran file daripada dimensi gambar, yaitu nilai dalam KB, MB, GB, dll. Mengingat 47% pengguna mengharapkan halaman web dimuat dalam waktu kurang dari 2 detik, dan 40 % akan meninggalkan halaman yang memuat lebih dari 3 detik, penting bahwa gambar Anda cukup kecil untuk memastikan situs yang cepat.

Ada tiga hal yang dapat Anda lakukan untuk mengoptimalkan gambar dengan benar untuk toko online Anda:

Simpan Dimensi yang Tepat

Anda harus membuka gambar di Photoshop dan melihatnya pada 100%. Ini memungkinkan Anda untuk melihat gambar pada ukuran yang tepat yang akan ditampilkan di monitor komputer saat Anda menyimpan gambar untuk web.

Simpan Gambar Untuk Web

Dimungkinkan untuk mengurangi ukuran file tanpa mengurangi kualitas gambar Anda secara signifikan. Metode favorit kami untuk mengurangi ukuran file tanpa mengurangi kualitas gambar secara signifikan adalah dengan menggunakan fungsi "Simpan untuk Web" Photoshop. Buka gambar Anda di Photoshop dan buka File > Ekspor > Simpan untuk Web (Legacy)…. Sebuah jendela akan muncul yang memungkinkan Anda untuk memilih kualitas ekspor Anda. Kami menemukan bahwa kualitas 60 bekerja paling baik karena menurunkan ukuran file hingga di bawah satu megabita dan tidak ada perbedaan kualitas yang mencolok.

Kompres Gambar Untuk Web

Aplikasi kompresi gambar adalah cara termudah untuk mengurangi ukuran file gambar. Jenis alat ini menghapus data tersembunyi dalam file gambar seperti profil warna tambahan dan metadata (seperti geolokasi tempat foto diambil) yang tidak diperlukan. Alat-alat ini menyediakan cara cepat dan mudah untuk mengurangi ukuran file tanpa kehilangan kualitas gambar.

Aplikasi & Layanan Kompresi Gambar

• GambarOptim
• Piksel Pendek
• kecilJPG
• PNG Kecil
• Kompresor.io
• Kraken
• Pengoptimal Gambar
• Foto Hancurkan (Aplikasi Shopify)
• Pengecil (Aplikasi Shopify)

Menyimpan Gambar untuk Web: Contoh Langsung

Untuk memulai, mari kita berpura-pura menjadi Stiff Salt (sebenarnya dimiliki oleh seorang teman dan Pengembang Shopify) dan kami ingin mengubah gambar fitur di toko online kami.

Kami membuat adegan, membuat garam kami terlihat sangat luar biasa dan kami mengambil foto dengan kamera DSLR. Bagus kami memiliki foto kami. Betapa cantiknya!

Tapi… ukuran filenya BESAR! 14,6 MB tepatnya. Dan dimensi dari foto tersebut adalah 5184x3456 piksel. Ini benar-benar tidak dapat digunakan sekarang. Ini benar-benar cukup besar untuk mencetak poster seukuran film. Pada 14,6 MB, gambar ini membutuhkan waktu yang signifikan untuk dimuat di komputer pengunjung. Ini tidak baik.

Saatnya untuk mulai bekerja dan mengurangi ukuran gambar dan ukuran file – secara signifikan.

Ingat, kita akan melakukan tiga hal pada gambar.

• Kurangi Ukuran Gambar: Ini adalah dimensi foto
• Simpan Gambar dengan Tepat untuk Mengurangi Ukuran File: Ini adalah ukuran file dan berapa banyak ruang yang dibutuhkan pada hard drive komputer Anda dan/atau server web Anda
• Kompres File Gambar: Untuk menghilangkan data tersembunyi tambahan yang menghabiskan ruang

Kurangi Ukuran Gambar

Bergantung pada program mana yang Anda putuskan untuk digunakan, dan preferensi pribadi, Anda dapat:

• Kurangi ukuran gambar sebelum menyimpan
• Kurangi ukuran gambar sambil menyimpan gambar
• Simpan gambar, lalu perkecil ukuran gambar

Untuk mempermudah, pertama-tama kita akan mengurangi ukuran gambar. Untuk melakukan ini, kita akan membuka gambar di Photoshop (Anda dapat menggunakan program gambar apa pun yang Anda rasa paling nyaman).

Untuk mengetahui ukurannya, kami melihat ukuran gambar beranda tema yang disarankan. Itu 1600 x 800 piksel (ingat aslinya adalah 5184 × 3456 piksel).

Di Photoshop, kita akan memilih Image > Image Size.

Ok, kami telah mengurangi ukuran (dimensi) gambar menjadi sesuatu yang lebih sesuai dan direkomendasikan oleh pengembang tema.

Simpan Gambar dengan Benar (Simpan Untuk Web)

Di Photoshop, ada perintah khusus yang disebut "Simpan Untuk Web" yang mengoptimalkan file gambar untuk ditampilkan secara online. Ini penting karena perintah "Simpan" biasa dapat menghasilkan ukuran file 2-3 kali lebih besar dari perintah "Simpan Untuk Web".

Di kotak "Simpan Untuk Web", kita perlu membuat beberapa pilihan.

• Jenis Gambar: Jenis file akan mempengaruhi kualitas dan ukuran file keluaran
• Kualitas Gambar: Ini penting dan dapat sangat mempengaruhi ukuran file akhir
• Dimensi: Kami sudah melakukan ini di langkah pertama, jadi tidak perlu melakukannya lagi, tetapi jika kami tidak melakukan ini di langkah pertama, kami bisa mengubah dimensi untuk gambar di sini

Berdasarkan apa yang kami pelajari di awal posting ini, kami tahu bahwa JPEG adalah jenis file terbaik untuk foto atau gambar apa pun dengan banyak warna dan kompleksitas. Kami akan memilih JPEG.

Untuk Kualitas Gambar, Anda memiliki skala yang dapat Anda pilih dengan 5 preset yang berkisar dari Maksimum hingga Rendah. Mari kita lihat ukuran file keluaran akhir dari masing-masing tingkat kualitas (informasi ini ditampilkan di sudut bawah jendela penyimpanan gambar):

• Maksimum: 1,38 MB
• Sangat Tinggi: 611 KB
• Tinggi: 339 KB
• Sedang: 152 KB
• Rendah: 86k

Anda dapat melihat bahwa untuk setiap tingkat kualitas yang Anda turunkan, ukuran gambar berkurang hampir setengahnya. Secara umum, kami menemukan bahwa Tinggi adalah pengaturan terbaik untuk sebagian besar gambar. Pada tingkat ini, hampir tidak mungkin bagi mata manusia untuk melihat penurunan kualitas gambar, dan ukuran file hampir 4x lebih kecil daripada jika kita hanya memilih yang maksimum.

Jika gambar adalah gambar yang sangat penting dengan banyak detail, Anda mungkin ingin memilih tingkat yang lebih tinggi dan menyimpannya di Sangat Tinggi.

Pada dasarnya, menabung untuk web adalah tindakan penyeimbang — Anda harus menyeimbangkan kualitas grafik dan ukuran file media agar sesuai dengan kebutuhan pribadi Anda.

Kompres Gambar Untuk Web

Jika Anda menggunakan Adobe Photoshop, itu akan melakukan pekerjaan yang sangat bagus dalam mengurangi ukuran gambar, namun, Anda mungkin masih dapat memangkas 5-10% ukuran gambar lainnya dengan menggunakan aplikasi kompresi seperti ImageOptim dan/atau ShortPixel.

ImageOptim juga merupakan cara termudah untuk mengurangi ukuran file gambar dengan cepat jika Anda telah menggunakan program lain untuk menyimpan gambar Anda yang tidak sebagus Photoshop.

Menjatuhkan setiap file dari langkah sebelumnya ke ImageOptim, kami dapat mengurangi ukuran gambar sebanyak 5% lagi. Tidak besar, tapi sekali lagi, ini sudah dioptimalkan dengan Photoshop. Bagaimanapun, setiap KB penting.

Kesimpulan

Untuk rekap, foto kami sangat besar ketika kami mulai, namun, dengan beberapa langkah sederhana, kami mengurangi ukuran foto dari 5184 × 3456 menjadi 1600 x 800 sehingga sangat cocok untuk beranda kami dan, pada saat yang sama, mengambil itu dari 14.4MB komputer-crashing, ke 336KB jauh lebih masuk akal.

Menyimpan gambar secara tepat untuk web merupakan langkah penting untuk dipelajari sejak dini dan diterapkan secara religius. Bahkan jika Anda hanya menghemat 10-20% pada setiap gambar, seiring waktu, seiring pertumbuhan toko dan situs web Anda, setiap KB kecil dapat menambahkan hingga beberapa penghematan signifikan yang akan menghasilkan pengalaman yang jauh lebih menyenangkan secara keseluruhan bagi pengunjung, pelanggan, dan Google.

Cara Mengoptimalkan Gambar untuk Web: Panduan Video