Sesuai dengan data yang dilaporkan oleh StatCounter, lebih banyak orang menjelajahi internet melalui perangkat seluler dibandingkan dengan komputer desktop. Dengan berbagai ukuran layar yang digunakan, Anda perlu memilih ukuran gambar yang tepat saat membuat situs web agar semua pengunjung mendapatkan pengalaman pengguna yang baik, terlepas dari perangkat yang mereka gunakan.
Jika tidak mengoptimalkan gambar, pengunjung situs web mungkin akan melihat gambar yang terlalu kecil dan buram, atau terlalu besar sehingga memperlambat waktu muat dan memaksa mereka untuk melakukan pengguliran dan pembesaran yang tidak perlu.
Pilih dimensi gambar yang tepat, jaga agar ukuran file seminimal mungkin, dan gunakan desain situs web responsif untuk memberikan pengalaman penelusuran yang terbaik.
Ikuti panduan di bawah ini untuk mengoptimalkan gambar Anda untuk perangkat seluler dan desktop.
Ukuran gambar terbaik untuk situs web
Lebar piksel: Tergantung pada area tampilan, tetapi panduan umum menyarankan 1920px untuk banner, 1200px untuk konten utama, dan 400-800px untuk thumbnail. Gambar terkompresi dalam format file WebP adalah yang terbaik untuk menjaga kecepatan pemuatan.
Ukuran gambar: Ukuran keseluruhan (piksel) gambar Anda yang terbaik tergantung pada kasus penggunaan, misalnya gambar latar belakang perlu lebih besar daripada gambar posting blog.
Ukuran file: Apa pun yang lebih besar dari 20 megabyte dapat berdampak dramatis pada kecepatan situs web Anda. Gambar yang lebih kecil (hingga dua megabyte, tetapi sekitar 500 kilobyte) lebih baik dalam sebagian besar kasus.
Atribut gambar: Atribut gambar (teks alt atau tag alt) berbasis teks dan tidak memengaruhi performa situs web Anda. Namun, atribut ini digunakan untuk menginterpretasikan gambar melalui perangkat lunak pembaca layar dan merupakan elemen kunci dari aksesibilitas web. Buatlah teks atribut yang ringkas. Praktik terbaik adalah menjaga teks alt di bawah 100 karakter, termasuk spasi.
Dimensi gambar terbaik untuk perangkat desktop dan seluler
Tabel di bawah ini memberikan rekomendasi dimensi untuk gambar di situs web desktop dan seluler:
| Jenis Gambar Situs web | Dimensi Gambar Desktop (L x T) | Dimensi Gambar Seluler (L x T) | Rasio Aspek yang Direkomendasikan |
|---|---|---|---|
| Gambar latar belakang | 2560 x 1400 piksel | 360 x 640 piksel | 16:9 |
| Gambar hero | 1280 x 720 piksel | 360 x 200 piksel | 16:9 |
| Banner situs web | 1200 x 400 piksel | 360 x 120 piksel | 3:1 |
| Gambar blog | 1200 x 800 piksel | 360 x 240 piksel | 3:2 |
| Logo (persegi panjang) | 400 x 100 piksel | 160 x 40 piksel | 4:1 |
| Logo (persegi) | 100 x 100 piksel | 60 x 60 piksel | 1:1 |
| Favicon | 16 x 16 piksel | 16 x 16 piksel | 1:1 |
| Ikon media sosial | 32 x 32 piksel | 48 x 48 piksel | 1:1 |
| Gambar lightbox (layar penuh) | 1920 x 1080 piksel | 360 x 640 piksel | 16:9 |
| Gambar thumbnail | 300 x 300 piksel | 90 x 90 piksel | 1:1 |
| Thumbnail produk | 150–300 px | 150–300 px | 1:1 (persegi) |
Ini adalah ukuran yang disarankan yang mungkin perlu disesuaikan berdasarkan apakah Anda menggunakan desain situs web responsif.
Hampir selalu merupakan ide yang baik untuk membuat ukuran render gambar Anda lebih kecil dari ukuran unggahannya.
Panduan ukuran gambar situs web
Ada lima jenis utama gambar yang akan Anda lihat di situs web:
Persyaratan ukuran yang berbeda berlaku untuk setiap jenis gambar web. Mari kita lihat ukuran gambar terbaik untuk jenis gambar situs web yang umum.
Ukuran gambar latar belakang
Gambar latar belakang umumnya merupakan gambar terbesar di situs web. Gambar ini berfungsi sebagai latar belakang untuk halaman beranda atau halaman landas lainnya.
Misalnya, pengecer sepeda Cowboy menempatkan produknya sebagai pusat perhatian dengan menggunakannya sebagai latar belakang halaman beranda. Gambar ini memenuhi layar, terlepas dari perangkat apa pun yang digunakan untuk melihatnya.
Lebar gambar yang direkomendasikan: 2560 piksel
Tinggi gambar yang direkomendasikan: 1400 piksel
Rasio aspek: 16:9
Ukuran file yang direkomendasikan: 20 MB
Ukuran gambar hero
Gambar hero mirip dengan gambar latar belakang, tetapi cenderung lebih kecil dengan tinggi sekitar setengah ukuran. Gambar hero adalah pilihan yang bagus jika perlu menampilkan lebih banyak teks di layar tanpa membuat pengguna harus menggulir untuk melihatnya.
Dalam contoh di atas, BLK & Bold menggunakan gambar hero dengan rasio aspek yang sempit untuk memenuhi layar, tetapi tetap menyisakan ruang untuk konten di bawahnya.
Lebar gambar yang direkomendasikan: Antara 1280 piksel dan 2500 piksel
Tinggi gambar yang direkomendasikan: Antara 720 piksel dan 900 piksel
Rasio aspek: 16:9
Ukuran file yang direkomendasikan: 10 MB
Ukuran gambar banner
Gambar banner dapat memiliki ukuran dan bentuk yang berbeda, tergantung pada di mana mereka ditempatkan dan apa yang ingin Anda tunjukkan kepada pengunjung. Jenis banner situs web yang paling umum adalah iklan banner. Salah satu layanan paling populer untuk mempromosikan iklan banner adalah Google Ads.
Jika memikirkan gambar banner yang bukan iklan, opsi persegi panjang (misalnya 300 x 200 piksel atau 970 x 90 piksel) umumnya lebih baik.
Lebar gambar yang direkomendasikan: Periksa dengan platform iklan
Tinggi gambar yang direkomendasikan: Periksa dengan platform iklan
Rasio aspek: Beragam
Ukuran file yang direkomendasikan: 150 KB (Periksa dengan platform iklan)
Ukuran gambar blog
Gambar blog dapat b jenis dan ukuran. Posting di atas berasal dari platform intelijen pemasaran, Whatagraph, dan meskipun ukuran unggahan gambar unggulan adalah 1880 × 1058 piksel, ukuran render-nya lebih kecil, yaitu 589 × 331 piksel.
Mengatur ukuran render untuk halaman web membantu Anda menyempurnakan desain dan menjaga file tetap kecil.
Untuk gambar judul utama posting blog (yang berada di bagian atas halaman), ukurannya harus seragam di seluruh blog.
Lebar gambar yang direkomendasikan: 1200 piksel
Tinggi gambar yang direkomendasikan: 800 piksel
Rasio aspek: 3:2
Ukuran file yang direkomendasikan: 3 MB
Ukuran logo
Logo kemungkinan akan menjadi salah satu gambar terkecil di situs web Anda (kecuali saat menghitung favicon di bilah tab). Tergantung pada desain logo Anda, Anda harus memilih rasio aspek persegi panjang atau persegi.
Sebagian besar logo cocok dengan rasio persegi 1:1. Rasio persegi panjang bekerja dengan baik untuk nama merek yang lebih panjang atau di mana logo terdiri dari kata-kata daripada grafik. Logo situs web Shopify sendiri menggunakan rasio 4:1 yang lebih panjang, seperti yang terlihat di atas.
Lebar gambar yang direkomendasikan: 100 piksel
Tinggi gambar yang direkomendasikan: 100 piksel
Rasio aspek: 1:1, 2:3, 4:1
Ukuran file yang direkomendasikan: 1 MB
Rekomendasi ukuran gambar seluler
Pilih dimensi gambar yang tepat
Di layar seluler yang lebih kecil, banyak pengguna menghargai kemampuan untuk memperbesar gambar. Jadi, cobalah untuk mencapai keseimbangan antara ukuran gambar dan ukuran file.
Gambar beresolusi tinggi memberikan tampilan profesional dan menyel situs web Anda, dengan kemampuan perbesaran yang bagus. Pertahankan rasio aspek gambar yang serupa agar tetap sama untuk menjaga desain yang seragam di berbagai jenis halaman.
Misalnya, Anda mungkin membuat semua gambar produk di toko ecommerce berbentuk persegi. Gambar persegi lebih mudah diposisikan ulang di layar yang lebih kecil. Selain itu, gambar persegi dan vertikal cocok dengan layar seluler, memungkinkan pengunjung melihat lebih banyak gambar Anda tanpa perlu menggulir.
Di Shopify, Anda dapat mengunggah gambar hingga 5000 x 5000 piksel dengan ukuran file hingga 20 MB.
Untuk gambar produk persegi, ukuran 2048 x 2048 piksel direkomendasikan.
Ingat bahwa agar fungsi pembesaran bekerja, gambar Anda harus lebih dari 800 × 800 piksel.
Perhatikan ukuran file
Gambar dengan ukuran file yang lebih besar dapat memengaruhi kecepatan situs, terutama ketika pengunjung menggunakan smartphone. Banyak platform pembuat situs web juga memiliki batasan ukuran file maksimum untuk unggahan. Misalnya, Shopify menggunakan ukuran file maksimum 20 MB.
Jika perlu mengompresi gambar untuk mengurangi ukurannya, ada alat pengubah ukuran gambar online yang dapat membantu. Dengan alat ini, Anda dapat memformat ulang file gambar besar ke dalam dimensi atau jenis file baru.
Sebagian besar, Anda akan menginginkan gambar latar belakang header di bawah 10 MB, sementara foto produk harus jauh lebih kecil, sekitar 300 KB.
Ubah ukuran foto untuk dimensi layar seluler
Shopify secara otomatis mengubah ukuran gambar Anda agar sesuai dengan layar yang lebih kecil. Tetapi di platform lain, gambar mungkin memerlukan pengeditan manual agar siap untuk seluler. Ingatlah bahwa layar desktop dan seluler memiliki orientasi yang berlawanan.
Sekali lagi, ingat bahwa file besar memperlambat waktu muat situs. Meskipun kompresi tanpa kehilangan data dapat memberi Anda gambar berkualitas tertinggi, sering kali menghasilkan file besar yang mungkin membutuhkan waktu lama untuk dimuat di situs web. Pertimbangkan untuk menggunakan file gambar terkecil dengan resolusi terbaik.
Meskipun desain responsif dan algoritma Shopify pandai dalam mengubah ukuran dan menampilkan gambar Anda di berbagai perangkat, membantu mereka dengan ukuran file yang bijaksana dapat menciptakan pengalaman berbelanja yang lebih lancar.
Mengapa ukuran gambar penting untuk situs web?
Untuk situs web, ukuran gambar penting karena tiga alasan utama:
- Menciptakan pengalaman pengguna yang lebih baik.
- Meningkatkan kecepatan halaman situs web.
- Membantu peringkat situs web.
Menciptakan pengalaman pengguna yang lebih baik
Memiliki gambar berukuran tepat untuk setiap kasus penggunaan di situs web membantu meningkatkan pengalaman pengguna. Pengunjung dapat mengakses tingkat detail yang sesuai dan tidak perlu menggulir untuk melihat seluruh gambar.
Ketika gambar berkualitas rendah, berpiksel, atau terlalu kecil, hal ini dapat memengaruhi persepsi kualitas konten Anda. Untuk situs web ecommerce, ini dapat menyebabkan pelanggan mempertanyakan kualitas bisnis atau produk Anda.
Sebaliknya, gambar berkualitas tinggi dengan ukuran yang tepat meningkatkan nilai persepsi produk Anda dan memberikan lebih banyak informasi visual kepada calon pelanggan.
Misalnya, lihat bagaimana gambar di bawah ini dari merek sepatu berkelanjutan Allbirds meningkatkan pengalaman pengguna dengan jelas menunjukkan berbagai fitur produk mereka.
Meningkatkan kecepatan halaman situs web
Ketika mengunggah gambar besar ke situs web, server membutuhkan waktu lebih lama untuk memuat halaman. Gambar yang lebih kecil (baik dalam dimensi maupun ukuran file) cenderung dimuat lebih cepat di berbagai perangkat.
Kecepatan loading gambar sering disebut sebagai "cat yang penuh isi". Anda dapat memeriksa cat yang penuh isi halaman web Anda dan metrik kecepatan halaman lainnya menggunakan PageSpeed Insights dari Google.
Secara keseluruhan, optimalkan kecepatan halaman untuk menghindari rasio pentalan yang tinggi.
Membantu peringkat situs web
Peringkat situs web mengacu pada posisi situs web di halaman hasil mesin pencari (SERP). Situs web yang dioptimalkan untuk pencarian akan mendapat peringkat tinggi di SERP untuk kueri pencarian pengguna yang relevan (dikenal sebagai kata kunci).
Google menggunakan sejumlah metrik untuk menentukan halaman web mana yang mendapat peringkat teratas di hasil pencarian mereka. Kualitas gambar (atau, lebih tepatnya, pengalaman pengguna yang lebih baik yang mereka hasilkan) kemungkinan merupakan faktor dalam algoritma Google.
Apa jenis file gambar terbaik yang digunakan?
Jenis file gambar yang tepat memastikan gambar berkualitas tinggi, sambil menjaga agar ukuran file tetap dapat dikelola untuk performa situs web yang lebih baik. Berikut adalah format file gambar yang paling umum dan kasus penggunaan terbaiknya:
WebP
WebP adalah format gambar yang dikembangkan oleh Google. Format ini menyediakan kompresi tanpa kehilangan data untuk gambar di web, sering kali mengurangi ukuran file lebih dari 30% dibandingkan dengan JPEG atau PNG.
Ini dapat secara signifikan meningkatkan waktu loading situs web, tetapi perlu diingat bahwa WebP belum didukung secara universal oleh semua peramban.
JPEG
JPEG (atau JPG) adalah salah satu format file gambar digital yang paling banyak digunakan karena menawarkan keseimbangan antara ukuran file dan kualitas gambar. Ini adalah pilihan populer untuk menampilkan foto dan gambar kompleks dengan banyak warna.
Namun, JPEG menggunakan kompresi lossy, yang berarti beberapa kualitas gambar hilang ketika gambar dikompresi.
PNG
PNG adalah format kompresi tanpa kehilangan data, yang berarti mengurangi ukuran file tanpa mengorbankan kualitas gambar. Format ini mendukung transparansi, menjadikannya pilihan yang baik untuk gambar yang memerlukan latar belakang transparan.
Meskipun PNG sering memiliki ukuran file yang lebih besar daripada JPEG, kemampuannya untuk mempertahankan kejernihan menjadikannya cocok untuk grafik dan logo yang detail.
SVG
SVG (scalable vector graphic) adalah format gambar vektor, yang berarti menggunakan persamaan matematika untuk merender gambar. Ini memungkinkan gambar SVG untuk diskalakan ke ukuran apa pun tanpa kehilangan kualitas.
SVG adalah format ideal untuk logo, ikon, dan grafik lain yang perlu digunakan di berbagai lokasi. SVG juga biasanya lebih kecil dalam ukuran file daripada format lain, yang membantu meningkatkan waktu memuat.
AVIF
AVIF (AV1 Image File Format) adalah format gambar modern yang dirancang untuk web.
Format ini menyediakan kompresi superior yang menghasilkan ukuran file yang sangat kecil sambil mempertahankan kualitas visual yang tinggi. File AVIF sering kali jauh lebih kecil daripada file WebP atau JPEG yang setara.
Gunakan untuk gambar web apa pun di mana performa tercepat dan ukuran file terkecil adalah tujuan utama. Keterbatasan utamanya adalah bahwa ini adalah format yang lebih baru dan belum didukung oleh semua peramban web lama.
GIF
GIF adalah format gambar bitmap yang dikenal karena kemampuannya untuk mendukung animasi sederhana. Format ini menggunakan kompresi tanpa kehilangan data dan mengurangi gambar hingga maksimum 256 warna, menghasilkan ukuran file yang lebih kecil.
Meskipun GIF sebagian besar telah digantikan oleh PNG untuk gambar statis, format ini tetap menjadi pilihan populer untuk animasi pendek yang berulang dan dikenali secara universal oleh peramban.
Cara mengetahui ukuran gambar di situs web
Cara tercepat untuk mencari tahu ukuran gambar di halaman web mana pun (tanpa mengunduh gambar) adalah dengan menggunakan alat Inspect peramban Anda.
Metode ini berfungsi di Mac dan Windows, dengan peramban Safari, Chrome, atau Firefox.
Buka halaman web dan arahkan kursor ke gambar yang ingin Anda ketahui informasinya. Klik kanan dengan mouse untuk memunculkan menu opsi dan cari Inspect:
Mengklik Inspect akan memunculkan kode HTML halaman (mungkin terlihat menakutkan, tetapi jangan khawatir).
Di panel inspeksi, informasi tentang gambar yang diklik akan disorot. Saat mengarahkan kursor ke kode yang relevan, gambar juga akan disorot:
Dalam hal ini, peramban memberi tahu Anda berapa banyak piksel yang digunakan gambar. Jika mengubah ukuran halaman web, angka tersebut akan berubah sesuai.
Jika mencari properti unggahan asli gambar, arahkan kursor ke tautan penyimpanan gambar:
Untuk keluar dari panel inspector, cukup klik X di sudut kanan atas.
Alat optimasi gambar
Alat pengoptimal gambar online adalah cara yang sederhana, cepat (dan biasanya gratis) untuk mengubah ukuran gambar di situs web. Berikut adalah tiga alat optimasi gambar yang populer:
Pengubah Ukuran Gambar
Alat pengubah ukuran gambar online gratis Shopify adalah cara yang nyaman untuk menyesuaikan gambar Anda untuk digunakan di berbagai saluran pemasaran dan media sosial.
Anda dapat memilih dari berbagai dimensi resmi yang benar untuk posting dan cerita Instagram, thumbnail YouTube, dan jenis konten media sosial lainnya.
Pengoptimal Gambar oleh Squirai
Alat pengoptimal gambar Squirai telah diuji kecepatannya untuk memastikan gambar siap untuk SEO. Tool ini secara otomatis mengoptimalkan semua gambar di situs web, termasuk yang akan Anda tambahkan nanti.
Selain itu, Anda dapat menyesuaikan dan menerapkan tanda air untuk melindungi fotografi produk tanpa perlu mengetahui kode apa pun.
Pengoptimal Gambar LoyaltyHarbour
LoyaltyHarbour Image Optimizer bekerja mirip dengan alat Squirai, secara otomatis mengompresi gambar di seluruh situs web.
Selain itu, dashboard memungkinkan Anda untuk secara otomatis mengatur teks alt gambar dan mengonversi ke jenis file gambar terbaik untuk kecepatan halaman yang lebih baik.
Sebagai alternatif, jika memiliki kemampuan, Anda juga dapat menggunakan Photoshop untuk membantu mengurangi ukuran file. Tetapi ini bisa menjadi proses yang lebih rumit daripada alat di atas.
Penyelesaian Masalah: masalah format gambar
Saat Anda mengelola situs web, Anda mungkin akan menghadapi masalah format gambar di beberapa titik. Masalah dengan gambar dapat berkisar dari ukuran yang salah hingga tautan yang rusak.
Mari kita lihat solusi untuk beberapa masalah umum dengan gambar situs web.
Ukuran gambar yang salah
Masalah: Gambar tampak terlalu besar atau terlalu kecil dan dapat merusak tata letak halaman web, menghasilkan pengalaman pengguna yang terganggu.
Solusi: Jika tema atau templat situs web, cari sumber daya tentang dimensi gambar yang benar untuk Anda. Di pembuat situs web Anda, pastikan untuk memilih ukuran render untuk setiap gambar sehingga gambar tidak ditampilkan dalam ukuran penuh aslinya.
Waktu loading yang lambat
Masalah: Gambar dimuat lebih lambat daripada bagian lain dari halaman web atau tidak dimuat sama sekali.
Solusi: Format file yang salah dapat menyebabkan ukuran file yang tidak perlu besar yang memengaruhi waktu loading. Gunakan alat pengeditan atau konversi gambar untuk mengubah format file gambar. Untuk grafik atau logo, pertimbangkan untuk menggunakan SVG untuk skalabilitas tanpa kehilangan kualitas. Untuk gambar lain, pertimbangkan untuk mengonversi ke WebP untuk mengompresi file besar.
Kualitas gambar yang buruk
Masalah: Gambar tampak berpiksel atau buram.
Solusi: Jika gambar Anda tampak berpiksel atau buram, coba cari versi dengan resolusi lebih tinggi. Ingat, resolusi gambar berbeda dari ukuran gambar. Resolusi mengacu pada jumlah detail yang dimiliki gambar dan sering diukur dalam piksel per inci (PPI). Resolusi yang lebih tinggi berarti gambar yang lebih tajam, terlepas dari ukurannya.
Jika kualitas gambar berkurang karena kompresi, sesuaikan pengaturan kompresinya atau beralih ke format kompresi tanpa kehilangan data seperti PNG.
Gambar tidak ditampilkan sama sekali
Masalah: Tautan gambar rusak sehingga tidak ada gambar yang muncul.
Solusi: Verifikasi URL sumber gambar Anda. URL ini harus mengarah langsung ke lokasi file gambar. Bandingkan nama file gambar di URL dengan nama sebenarnya dari file gambar. Keduanya harus sama persis, termasuk ekstensi file (.jpg, .png, .svg).
Optimalkan gambar situs web untuk kesuksesan
Menambahkan gambar ke situs web Anda bukan hanya tentang membuat tampilan yang bagus. Ini adalah faktor kunci untuk meningkatkan pengalaman pengguna dan meningkatkan peringkat mesin pencari.
Ukuran gambar memengaruhi kedua elemen ini. Terlalu banyak konten di halaman web mungkin dimuat dengan lambat. Terlalu kecil, dan gambar Anda dapat tampak berpiksel atau buram.
Pastikan untuk memahami persyaratan dimensi gambar dari desain situs web dan memilih format file yang tepat untuk menyeimbangkan resolusi gambar dan ukuran file.
Dari penjual pemula hingga pengecer global, Shopify bekerja untuk semua orang. Lihat paket dan harga.
FAQ ukuran gambar terbaik untuk situs web
Apa ukuran gambar terbaik untuk situs web?
Gambar layar penuh harus memiliki lebar minimum 2500 piksel. Ukuran gambar terbaik untuk situs web tergantung pada penggunaan gambar dan ukuran render, serta efek ukuran file gambar pada waktu loading halaman.
Apa format gambar terbaik untuk situs web?
WebP adalah format gambar populer untuk situs web guna memastikan performa yang cepat. Dikembangkan oleh Google, WebP menawarkan kompresi tanpa kehilangan data untuk gambar di web, mengurangi ukuran file hingga 30% dibandingkan dengan JPEG dan PNG. Namun, perlu dicatat bahwa WebP belum didukung secara universal oleh semua peramban.
Apa perbedaan antara ukuran gambar dan resolusi?
Ukuran gambar mengacu pada dimensi gambar, biasanya diukur dengan lebar dan tingginya dalam piksel. Resolusi gambar mengacu pada jumlah detail yang dimiliki gambar dan sering diukur dalam piksel per inci (PPI). Resolusi yang lebih tinggi berarti lebih banyak detail dan gambar yang lebih tajam, terlepas dari ukurannya.
Bagaimana ukuran gambar memengaruhi waktu loading situs web?
Semakin besar ukuran file gambar, semakin lama waktu yang dibutuhkan untuk mengunduh dan menampilkan gambar di layar pengguna. Ini dapat memperlambat waktu loading halaman web, yang berdampak negatif pada pengalaman pengguna dan performa mesin pencari. Oleh karena itu, penting untuk mengoptimalkan gambar dengan menyeimbangkan kualitas dan ukuran file.
Bagaimana cara mengurangi ukuran file gambar tanpa kehilangan kualitas?
Anda dapat mengurangi ukuran file gambar tanpa kehilangan kualitas dengan menggunakan kompresi tanpa kehilangan data yang menghapus data yang tidak perlu dari file gambar tanpa memengaruhi tampilan gambar. Alat seperti Adobe Photoshop atau pengoptimal gambar online menawarkan opsi untuk kompresi tanpa kehilangan data.
