Berapa Ukuran Gambar yang Digunakan Di WordPress (Faktor & Tip Utama)

Apakah Anda mengalami kecepatan memuat situs web yang lambat? Rendahnya kecepatan situs web dapat disebabkan oleh banyak faktor, dan ukuran gambar yang besar adalah salah satunya. Jika Anda memiliki situs web dengan banyak konten, ukuran gambar kemungkinan besar bisa menjadi salah satu faktor di balik lambatnya kecepatan situs Anda. Oleh karena itu, penting untuk mengoptimalkan gambar WordPress Anda agar tidak menghambat situs Anda. Panduan ini akan memberi Anda gambaran umum untuk menentukan ukuran gambar terbaik untuk situs WordPress Anda. Ini akan membantu meningkatkan interaksi pelanggan dan meningkatkan produktivitas.

Memahami Ukuran Gambar di WordPress

Ukuran gambar di WordPress ditentukan oleh dimensi (dalam piksel) dan ukuran file gambar dalam kilobyte (KB) atau megabyte (MB). Saat menampilkan gambar di situs WordPress Anda, penting untuk diketahui bahwa ukuran gambar bukan hanya tentang estetika — tetapi secara langsung memengaruhi kinerja situs, pengalaman pengguna, dan optimasi mesin pencari (SEO). WordPress akan membantu melindungi pengguna dari penggunaan gambar yang sangat besar dengan secara otomatis membuat versi skala saat diunggah. Selain itu, setiap gambar yang Anda unggah akan memiliki variasi atau ukuran berbeda yang ditampilkan tergantung di mana gambar tersebut digunakan di situs Anda. Lebih lanjut tentang itu di bawah.

Fungsionalitas SRCSet

Saat Anda mengunggah gambar ke WordPress, platform secara otomatis membuat beberapa ukuran gambar tersebut (thumbnail, medium, besar, dll.). Atribut SRCset memungkinkan browser memilih ukuran gambar yang paling sesuai bergantung pada ukuran layar perangkat dan kepadatan piksel.

Misalnya, jika postingan blog Anda berisi gambar, dan pengguna mengunjungi situs web Anda dari desktop dengan layar besar, browser mungkin memuat versi besar (misalnya, 1024px). Sebaliknya, jika pengguna menjelajah dari ponsel, browser akan memilih versi yang lebih kecil (misalnya 300px), yang memuat lebih cepat.

Berikut adalah ukuran default yang akan Anda dapatkan untuk setiap gambar yang Anda unggah di WordPress:

• Gambar mini: 150 x 150 piksel
• Sedang: 300 x 300 piksel (dapat bervariasi berdasarkan pengaturan Anda)
• Besar: 1024 x 1024 piksel (dapat bervariasi berdasarkan pengaturan Anda)
• Ukuran penuh: Dimensi asli

Jika Anda ingin mengubah ukuran gambar default, Anda dapat menemukannya di Pengaturan → Media di dashboard WordPress:

Berapa Ukuran Gambar Untuk Digunakan Di WordPress

Dalam kebanyakan kasus, ukuran file gambar Anda tidak boleh melebihi 200kb. Sebagian besar gambar harus mendekati 50kb-100kb atau kurang. Untuk menjaga file gambar Anda dalam kisaran tersebut, Anda perlu mempertimbangkan faktor lain seperti dimensi.

Berikut adalah beberapa dimensi gambar umum yang direkomendasikan untuk WordPress:

• Gambar Postingan Blog: 1200 x 630 piksel
• Gambar Unggulan (Posting Gambar Kecil): 1200 x 800 piksel
• Gambar Header / Gambar Pahlawan: 1600 x 900 piksel atau 1920 x 1080 piksel
• Gambar Latar Belakang: 1920 x 1080 piksel
• Slider dan Spanduk: 1200 x 600 piksel atau 1920 x 800 piksel
• Gambar Produk (WooCommerce): 800 x 800 piksel atau 1000 x 1000 piksel
• Gambar Logo: 200 x 100 piksel atau 250 x 100 piksel

Kecuali Anda memiliki alasan khusus untuk melakukannya, Anda tidak boleh mengunggah gambar berukuran 5MB dengan lebar 5000 piksel. WordPress akan membantu dengan membuat lebih banyak versi ramah situs web yang dapat Anda gunakan. Namun jika Anda menampilkan ukuran asli tersebut, kecepatan pemuatan halaman Anda akan menurun.

Memilih ukuran gambar yang tepat untuk diunggah di WordPress sangat penting untuk mengoptimalkan kinerja situs web Anda dan memastikan gambar terlihat tajam di semua perangkat. Ukuran gambar yang ideal bergantung pada konteks penggunaan gambar (misalnya, untuk postingan blog, thumbnail, slider, dll.), serta daya tanggap, ukuran file, dan pertimbangan kualitas.

Faktor Kunci yang Perlu Dipertimbangkan untuk Ukuran Gambar WordPress

Saat memilih atau membuat gambar untuk WordPress, beberapa faktor utama harus dipertimbangkan untuk memastikan gambar tersebut dioptimalkan untuk kinerja dan desain. Faktor-faktor ini termasuk ukuran gambar, jenis file, dimensi, dan banyak lagi. Berikut rinciannya:

Dimensi Gambar

Dimensi gambar secara langsung memengaruhi tampilan gambar di berbagai bagian situs web Anda. Menggunakan gambar yang terlalu besar memperlambat waktu pemuatan, berdampak negatif pada pengalaman pengguna dan SEO. Gambar yang terlalu kecil dapat tampak berpiksel atau buram, sehingga menurunkan kualitas visual situs Anda secara keseluruhan.

Tema WordPress Anda sering kali menentukan dimensi gambar ideal untuk berbagai bagian, seperti header, postingan blog, atau galeri. Periksa dokumentasi tema Anda untuk mengetahui dimensi yang disarankan.

Ukuran Berkas

Ukuran file yang lebih besar mengakibatkan waktu pemuatan lebih lambat, sehingga merugikan pengalaman pengguna (terutama pada perangkat seluler) dan peringkat mesin pencari Anda. Situs yang lambat menyebabkan rasio pentalan lebih tinggi, yang berarti pengunjung cenderung meninggalkan situs Anda sebelum situs dimuat sepenuhnya.

Idealnya, pertahankan ukuran file gambar di bawah 500KB. Namun, jika gambar ditampilkan secara jelas, Anda mungkin mengizinkan hingga 1 MB untuk kualitas yang lebih baik. Gunakan alat kompresi gambar untuk mengurangi ukuran file dengan tetap menjaga kualitas visual. Untuk kompresi manual, alat seperti TinyPNG atau JPEG-Optimizer berfungsi dengan baik. Setelah mengompresi, uji waktu buka halaman Anda menggunakan alat seperti Google PageSpeed ​​Insights atau GTmetrix. Jika waktu muat lambat, kurangi ukuran gambar lebih lanjut.

Format Berkas

Format file yang berbeda memiliki tujuan yang berbeda, dan memilih format yang tepat dapat menyeimbangkan kualitas dan kinerja. Penggunaan format yang salah dapat mengakibatkan ukuran file terlalu besar atau kualitas gambar buruk, terutama jika menyangkut transparansi atau tepian yang tajam.

JPEG (JPG) paling baik untuk foto atau gambar dengan banyak warna dan gradien. Ini mendukung kompresi lossy, yang berarti mengurangi ukuran file dengan menghilangkan beberapa detail, tetapi bagus untuk mengurangi ukuran file gambar yang kompleks. Di sisi lain, PNG ideal untuk logo, ikon, atau gambar dengan transparansi. PNG memberikan kompresi lossless, menjaga kualitas gambar dengan mengorbankan ukuran file yang lebih besar.

Rasio Aspek

Rasio aspek yang konsisten memastikan gambar Anda ditampilkan dengan benar di berbagai perangkat dan ukuran layar. Penggunaan rasio aspek yang tidak konsisten dapat menyebabkan gambar terpotong, terdistorsi, atau tidak selaras, sehingga memengaruhi koherensi visual situs Anda.

Untuk gambar dalam tata letak tetap (seperti bilah geser atau spanduk), selalu ikuti rasio aspek yang direkomendasikan dari dokumentasi tema atau plugin Anda (misalnya, rasio 16:9 untuk spanduk). Untuk galeri atau kisi, pilih rasio aspek tunggal (misalnya, 4:3 atau 1:1 untuk gambar mini persegi) dan potong semua gambar ke rasio tersebut untuk keseragaman. Jika Anda menggunakan pengaturan gambar responsif, uji situs Anda pada perangkat dan ukuran layar yang berbeda untuk memastikan rasio aspek berfungsi dengan baik di berbagai area pandang.

Praktik Terbaik untuk Ukuran Gambar WordPress

Kecepatan situs web sangat penting untuk pengalaman pengguna dan SEO, dan gambar yang terlalu besar dapat memperlambat situs WordPress Anda secara signifikan. Mengoptimalkan ukuran gambar Anda penting untuk menjaga waktu pemuatan yang cepat tanpa mengorbankan kualitas. Berikut panduan singkat tentang cara mengurangi ukuran gambar secara efektif dan meningkatkan kinerja situs Anda.

Ubah Ukuran Gambar ke Dimensi yang Sesuai

Unggah gambar dengan dimensi yang sesuai dengan kebutuhan tampilan situs Anda. Hindari mengunggah gambar berukuran besar yang diubah ukurannya secara otomatis oleh WordPress, karena ini menghabiskan penyimpanan dan bandwidth. Sebelum mengunggah gambar, tentukan dimensi maksimum yang Anda perlukan berdasarkan tata letak tema Anda. Misalnya, jika area konten Anda lebarnya 800 piksel, gambar yang lebih lebar dari itu tidak akan ditampilkan dengan benar dan akan memperlambat halaman Anda.

Ubah ukuran Gambar di WordPress

Jika Anda sudah mengunggah gambar berukuran besar, Anda dapat mengubah ukurannya langsung di WordPress. Buka Media > Perpustakaan di dashboard WordPress Anda.

Klik pada gambar yang ada atau unggah file gambar baru. Dalam kasus kami, kami telah memilih untuk mengunggah file gambar baru.

Setelah mengklik gambar yang ditambahkan, Anda akan diperlihatkan semua detailnya. Klik 'Edit rincian lebih lanjut' di sudut kanan bawah untuk mengakses pengaturan tambahan.

Pada detail gambar, klik tombol Edit Gambar.

Di bawah Skala Gambar, masukkan dimensi baru (lebar atau tinggi), dan WordPress akan menskalakan gambar secara proporsional. Klik Skala untuk menerapkan perubahan.

CATATAN: Anda tidak dapat memperbesar gambar Anda lebih besar dari versi aslinya. WordPress akan memberi tahu Anda jika Anda melakukan itu.

Gunakan Alat Kompresi Gambar

Seperti yang telah dibahas sebelumnya, mengompresi gambar membantu mengurangi ukuran filenya. Berbagai alat kompresi gambar, termasuk perangkat lunak pengeditan seperti Adobe Photoshop atau Microsoft Photos, tersedia.

Alternatifnya, Anda dapat menggunakan alat online seperti TinyPNG untuk mencapai hal ini.

Alat ini lebih memilih kompresi lossy untuk meminimalkan ukuran file WEBP, JPEG, dan PNG Anda. Cukup unggah gambar Anda, dan TinyPNG akan menangani kompresinya untuk Anda.

Alternatifnya, Anda dapat menggunakan plugin pengoptimalan gambar yang tangguh seperti Imagify. Tambahkan plugin baru dari bagian “Plugin” dashboard WordPress Anda sebelum menginstal dan mengaktifkannya.

Setelah menginstal dan mengaktifkan Imagify di situs WordPress Anda, navigasikan ke Pengaturan > Imagify untuk mengonfigurasi preferensi kompresi Anda:

Setelah Anda siap, klik Simpan Perubahan. Imagify kemudian akan secara otomatis memampatkan gambar apa pun yang Anda unggah ke situs Anda.

Ubah Batas Unggahan Maksimum

WordPress menetapkan ukuran unggahan file maksimum, yang dapat berbeda berdasarkan batasan yang diberlakukan oleh penyedia hosting Anda. Buka Media > Tambah Baru di dasbor WordPress Anda untuk menentukan batas unggah file Anda saat ini. Batasan ukuran unggahan akan ditampilkan di halaman ini.

Secara umum, batas ini tidak perlu disesuaikan kecuali Anda berencana mengunggah file yang lebih besar. Namun, menurunkan batas ukuran file dapat bermanfaat, terutama jika Anda mengelola blog dengan banyak penulis, untuk mencegah orang lain mengunggah gambar berukuran besar yang tidak perlu. Anda dapat menghubungi penyedia hosting Anda untuk mengubah ukuran unggahan maksimum atau memperbarui batas dengan mengedit file php.ini.

Gunakan Pemuatan Lambat

Pemuatan lambat adalah teknik peningkatan kinerja yang menunda pemuatan gambar pada halaman web hingga benar-benar diperlukan. Alih-alih memaksa semua gambar untuk segera dimuat saat halaman diakses, pemuatan lambat hanya memuat gambar saat pengguna menggulir ke bawah dan gambar tersebut terlihat. Hal ini mengurangi waktu muat awal halaman, menghemat bandwidth, dan meningkatkan pengalaman pengguna.

Sebagian besar tema dan plugin WordPress saat ini menawarkan dukungan bawaan untuk pemuatan lambat. WordPress sendiri bahkan menyertakan pemuatan lambat asli pada versi 5.5. Selain itu, berbagai plugin seperti WP Rocket, Lazy Load oleh WP Rocket, dan a3 Lazy Load menawarkan kontrol dan penyesuaian lebih lanjut atas proses pemuatan lambat, sehingga mudah diterapkan di situs WordPress mana pun tanpa banyak keahlian teknis.

Semua praktik ini penting untuk mempertahankan ukuran gambar profesional di WordPress. Namun, Divi, tema dan pembuat WordPress kami yang produktif, meningkatkannya lebih jauh melalui atribut responsifnya.

Cara Membuat Ukuran Gambar Sempurna dengan Divi

Jika Anda ingin kontrol lebih besar atas desain gambar dan opsi ukuran, Anda dapat menggunakan pembuat halaman seperti Divi. Divi hadir dilengkapi dengan fitur responsif canggih. Alat ini mengintegrasikan beberapa fungsi ke dalam situs WordPress Anda, termasuk mengubah ukuran gambar. Di sini, kami akan mempelajari bagaimana Divi dapat meningkatkan dimensi gambar Anda sekaligus menjaga kualitasnya.

1. Unduh dan Instal Divi

Divi dapat dibeli melalui Tema Elegan, menawarkan dua opsi harga: lisensi tahunan seharga $89 atau lisensi seumur hidup seharga $249 . Setelah membeli, Anda dapat dengan mudah mengunduh dan menginstal tema di situs WordPress Anda dengan mengikuti langkah-langkah berikut:

1. Di dasbor WordPress Anda, buka Appearance > Themes .
2. Klik Tambah Baru, lalu pilih Unggah Tema.
3. Pilih file Divi .zip yang diunduh dan klik Instal Sekarang.
4. Setelah instalasi selesai, klik 'Aktifkan' untuk menjadikan Divi sebagai tema aktif Anda.

Untuk panduan detailnya, lihat video di bawah ini.

Setelah menyelesaikan penyiapan, Anda dapat mulai membangun situs Anda. Untuk memahami prosesnya sebelumnya, lihat tutorial kami tentang menggunakan Divi Builder.

Memulai dengan Divi

2. Buat Situs Web Anda, Buka Divi Builder dan Pilih Gambar Anda

Setelah menginstal Tema Divi di WordPress, Anda dapat dengan cepat membuat situs web Anda. Divi memberi Anda banyak opsi untuk membangun situs web Anda. Anda dapat membangun situs web Anda dari awal, memanfaatkan tata letak kami yang telah dibuat sebelumnya, atau menggunakan Divi AI untuk membangun situs web Anda.

Selain itu, Anda dapat menggunakan Divi Quick Sites untuk membangun situs web profesional dalam satu atau dua menit.

Setelah membuat situs web dan menambahkan gambar masing-masing, Anda dapat mengakses Divi Builder dan mengonfigurasi ukuran gambar WordPress Anda. Pertama, buka situs web Divi Anda yang sudah ada dan klik 'Aktifkan Visual Builder.'

Klik pada gambar yang ditambahkan untuk tujuan mengubah ukuran. Buka modul gambar Divi dengan mengklik ikon roda.

3. Ubah Ukuran Gambar yang Anda Tambahkan di WordPress dengan Pengaturan Responsif Divi

Pengaturan responsif Divi memudahkan pengubahan ukuran gambar di WordPress untuk berbagai perangkat (desktop, tablet, dan seluler). Dalam pengaturan Modul Gambar, navigasikan ke tab “Desain”. Di sinilah sebagian besar penyesuaian, termasuk pengaturan responsif, terjadi. Di dalam tab Desain, gulir ke bawah untuk menemukan bagian “Ukuran”.

Di sini, Anda dapat menyesuaikan beberapa dimensi gambar pilihan Anda, seperti:

1. Lebar
2. Lebar Maksimum
3. Penyelarasan Modul
4. Tinggi Minimal
5. Tinggi
6. Tinggi Maksimum

CATATAN: Anda juga dapat memaksakan lebar penuh dengan mengaktifkan opsi yang disediakan. Namun, hal itu akan membuat lebar dan lebar maksimum tidak dapat diubah.

Di samping setiap atribut, Anda akan melihat ikon kecil yang menyerupai ponsel cerdas atau tablet (ikon pengaturan responsif). Klik ikon ini untuk mengaktifkan pengaturan tampilan Desktop, Tablet, dan Seluler yang berbeda.

Dalam hal ini, kami akan menetapkan lebar maksimum versi tablet menjadi 85%. Pengurangan lebar dan posisi di tengah akan menghemat ruang di halaman beranda, membuat gambar lebih menarik secara visual pada perangkat yang lebih kecil. Klik tombol centang hijau untuk menerapkan perubahan yang disimpan.

fungsionalitas SRCSet

Divi menghadirkan dukungan SRCSET asli untuk semua gambar, memungkinkan tema membuat gambar Anda responsif secara otomatis. Ini memastikan bahwa gambar berukuran tepat dikirimkan ke setiap perangkat, meningkatkan kecepatan pemuatan dengan menyajikan gambar yang lebih kecil ke perangkat yang lebih kecil. Yang terbaik dari semuanya, ini terjadi secara otomatis, tanpa upaya tambahan apa pun dari Anda.

Dapatkan Divi

Alat Lain untuk Pengoptimalan Gambar

Meskipun pengaturan responsif Divi menawarkan solusi hebat untuk mengubah ukuran gambar di WordPress, Anda mungkin memerlukan alat pengoptimalan tambahan yang saat ini tidak dimiliki Divi. Berikut beberapa alat pengoptimalan gambar eksternal yang dapat Anda gunakan:

1. EWWW Image Optimizer: Plugin WordPress canggih yang secara otomatis mengompresi gambar baru saat diunggah dan menawarkan Pengoptimal Massal untuk media yang ada. Ini memungkinkan pengubahan ukuran gambar dan penghapusan metadata serta mendukung pemuatan lambat dan konversi ke format WebP untuk kompresi yang lebih baik. Versi gratis beroperasi langsung di server Anda tanpa batasan ukuran file, sedangkan versi premium memanfaatkan layanan cloud untuk meningkatkan pengoptimalan dan rasio kompresi yang lebih tinggi.
2. Pengoptimal Gambar ShortPixel: Plugin ini mengoptimalkan gambar dan file PDF sekaligus mengubah ukuran gambar secara otomatis. Ia menawarkan opsi kompresi yang fleksibel—lossy, lossless, dan glossy—memberikan pilihan yang seimbang bagi pengguna. Plugin ini mencadangkan gambar asli, menghapus metadata, dan mengubah PNG menjadi JPEG, mengoptimalkan gambar Retina dan thumbnail. Namun, Anda harus membagikan email Anda untuk mendapatkan kunci API.
3. Optimole: Plugin pengoptimalan gambar lengkap dan gratis yang memproses gambar secara real-time melalui server berbasis cloud. Ini membedakannya dengan memilih ukuran gambar optimal berdasarkan area pandang pengunjung dan menerapkan pemuatan lambat untuk tampilan yang efisien. Meningkatkan ke paket premium menawarkan konversi gambar tanpa batas dan fitur-fitur canggih, termasuk kompresi berkualitas tinggi yang mempertahankan kejernihan asli sekaligus mengurangi ukuran file dan pembuatan versi Retina dan WebP secara otomatis.
4. WP Smush: Plugin ini adalah bagian dari rangkaian plugin WPMU DEV. Ini secara otomatis mengoptimalkan gambar setelah diunggah ke situs WordPress Anda. WP Smush menghadirkan opsi pengoptimalan massal yang memungkinkan Anda mengompresi hingga 50 gambar sekaligus, sehingga memudahkan untuk menyempurnakan media yang ada. Plugin ini juga menyertakan opsi untuk mengubah ukuran gambar dan memuat lambat, dan Anda dapat mengonfigurasinya untuk menghapus metadata dari gambar saat diunggah. Ini mendukung gambar hingga 5 MB, tetapi Anda harus meningkatkan ke versi premium untuk mengoptimalkan file yang lebih besar.

Apa pun pendekatan yang Anda gunakan, Anda dapat meningkatkan kinerja situs web Anda. Optimalisasi gambar berkontribusi pada peningkatan waktu pemuatan dan pengalaman pengguna yang lebih baik.

Kesimpulan

Pada tahun 2024, membuat situs yang sukses di WordPress melampaui fungsionalitas dasar; memberikan pengalaman yang lancar dan menarik bagi pelanggan Anda sangatlah penting. Mengoptimalkan ukuran gambar sangat penting untuk mencapai hal ini, karena membantu memastikan waktu pemuatan yang cepat dan tata letak yang menarik secara visual yang mencerminkan identitas merek Anda. Dengan memanfaatkan plugin cerdas dan opsi penyesuaian, Anda dapat meningkatkan kinerja situs Anda dan mengubahnya menjadi etalase menarik yang memikat pengunjung.

Jika Anda mencari lebih banyak opsi penyesuaian untuk mengukur ukuran gambar Anda menggunakan pembuat visual, Divi memudahkan untuk melakukan penyesuaian saat itu juga untuk memastikan gambar Anda terlihat sempurna di semua perangkat.

Dapatkan Divi

Ingin meningkatkan situs WordPress Anda? Temukan ukuran gambar ideal untuk meningkatkan kinerja dan daya tarik visual situs web Anda. Jelajahi daftar alat dan tips pilihan kami yang dapat membantu Anda mengelola ukuran gambar secara efektif untuk pengalaman pengguna yang lebih baik.