{"id":33270,"date":"2026-09-21T04:54:05","date_gmt":"2026-09-21T04:54:05","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=33270"},"modified":"2026-09-21T04:54:05","modified_gmt":"2026-09-21T04:54:05","slug":"cara-mengoptimalkan-gambar-di-wordpress","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress","title":{"rendered":"Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat"},"content":{"rendered":"<p>Gambar menjadi salah satu elemen penting dalam sebuah website. Selain membuat artikel lebih menarik, gambar dapat membantu menjelaskan informasi secara visual dan membuat pembaca lebih mudah memahami isi konten. Namun, penggunaan gambar yang tidak dioptimalkan justru dapat membuat website menjadi lambat.<\/p>\n<p>File gambar dengan ukuran terlalu besar membutuhkan waktu lebih lama untuk dimuat dan dapat meningkatkan penggunaan bandwidth. Kondisi ini juga dapat memengaruhi pengalaman pengguna, terutama bagi pengunjung yang menggunakan perangkat mobile atau koneksi internet yang kurang stabil.<\/p>\n<p>Karena itu, pemilik website WordPress perlu memahami cara mengoptimalkan gambar dengan benar. Optimasi tidak hanya berkaitan dengan mengecilkan ukuran file, tetapi juga mencakup pemilihan format, dimensi, nama file, teks alternatif, kompresi, hingga cara gambar dimuat pada halaman.<\/p>\n<h2>Apa Itu Optimasi Gambar di WordPress?<\/h2>\n<p>Optimasi gambar adalah proses mengurangi ukuran file dan menyesuaikan gambar agar dapat ditampilkan secara efisien tanpa mengurangi kualitas visual secara berlebihan.<\/p>\n<p>Tujuan utamanya adalah membuat gambar memiliki ukuran, format, dan resolusi yang sesuai dengan kebutuhan halaman. Dengan begitu, browser tidak perlu mengunduh file yang jauh lebih besar daripada ukuran gambar yang sebenarnya ditampilkan.<\/p>\n<p>Optimasi gambar juga berkaitan dengan SEO karena gambar yang memiliki nama file, alt text, ukuran, dan konteks yang tepat dapat membantu mesin pencari memahami isi visual pada halaman. WordPress sendiri sudah memiliki beberapa fitur yang membantu pengelolaan gambar, seperti pembuatan beberapa ukuran gambar, responsive images melalui <code>srcset<\/code> dan <code>sizes<\/code>, serta lazy loading.<\/p>\n<h2>Mengapa Gambar di WordPress Perlu Dioptimalkan?<\/h2>\n<p>Gambar sering menjadi salah satu aset dengan ukuran terbesar pada sebuah halaman. Jika website memiliki banyak gambar beresolusi tinggi tanpa optimasi, jumlah data yang harus diunduh browser akan semakin besar. Beberapa manfaat optimasi gambar antara lain:<\/p>\n<ul>\n<li><strong>Mempercepat Loading Website<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Ukuran file yang lebih kecil membuat browser dapat mengunduh gambar dengan lebih cepat. Hal ini penting terutama untuk halaman yang memiliki banyak gambar.<\/p>\n<ul>\n<li><strong>Meningkatkan Pengalaman Pengguna<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Website yang lebih cepat memberikan pengalaman yang lebih nyaman bagi pengunjung. Pengguna tidak perlu menunggu terlalu lama hingga seluruh elemen halaman muncul.<\/p>\n<ul>\n<li><strong>Menghemat Bandwidth<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">File gambar yang lebih ringan membutuhkan transfer data yang lebih kecil antara server dan browser. Ini dapat membantu mengurangi penggunaan bandwidth, terutama pada website dengan jumlah pengunjung dan konten yang besar.<\/p>\n<ul>\n<li><strong>Mendukung SEO<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Kecepatan halaman merupakan salah satu aspek yang perlu diperhatikan dalam performa website. Selain itu, penggunaan nama file dan alt text yang relevan membantu mesin pencari memahami konteks gambar.<\/p>\n<ul>\n<li><strong>Membantu Performa Mobile<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Pengunjung dari perangkat mobile sering memiliki kondisi jaringan dan ukuran layar yang berbeda dengan pengguna desktop. Penggunaan responsive images membantu browser memilih ukuran gambar yang sesuai dengan kebutuhan perangkat.<\/p>\n<h2>Cara Optimasi Gambar di WordPress<\/h2>\n<p><span style=\"font-size: 20px\">1. Pilih Format Gambar yang Tepat<\/span><\/p>\n<p>Format gambar berpengaruh terhadap ukuran file dan kualitas visual. Tidak semua gambar harus menggunakan format yang sama. Beberapa format yang umum digunakan pada website adalah JPEG, PNG, WebP, dan AVIF.<\/p>\n<table style=\"height: 288px\" width=\"875\">\n<thead>\n<tr>\n<th>Format<\/th>\n<th>Cocok Untuk<\/th>\n<th>Kelebihan<\/th>\n<th>Kekurangan<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>JPEG\/JPG<\/td>\n<td>Foto dan gambar kompleks<\/td>\n<td>Kompresi baik dan kompatibel luas<\/td>\n<td>Tidak mendukung transparansi<\/td>\n<\/tr>\n<tr>\n<td>PNG<\/td>\n<td>Logo, ilustrasi, transparansi<\/td>\n<td>Kualitas baik dan mendukung transparansi<\/td>\n<td>Ukuran file dapat lebih besar<\/td>\n<\/tr>\n<tr>\n<td>WebP<\/td>\n<td>Foto, ilustrasi, dan berbagai gambar web<\/td>\n<td>Kompresi efisien dan mendukung transparansi<\/td>\n<td>Dukungan sangat baik pada browser modern<\/td>\n<\/tr>\n<tr>\n<td>AVIF<\/td>\n<td>Foto dan aset web dengan kebutuhan kompresi tinggi<\/td>\n<td>Kompresi sangat efisien<\/td>\n<td>Proses dan dukungan tooling dapat lebih kompleks<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>WordPress telah mendukung WebP sejak WordPress 5.8. WebP dapat menghasilkan ukuran file yang lebih kecil dibandingkan JPEG atau PNG pada kualitas visual yang sebanding.<\/p>\n<p>WordPress modern juga mendukung AVIF pada lingkungan yang memenuhi persyaratan pemrosesan gambar. Namun, format yang digunakan tetap perlu disesuaikan dengan tema, plugin, browser, dan workflow website.<\/p>\n<p><span style=\"font-size: 20px\">2. Sesuaikan Dimensi Gambar Sebelum Upload<\/span><\/p>\n<p>Salah satu kesalahan yang sering terjadi adalah mengunggah gambar dengan dimensi yang jauh lebih besar daripada kebutuhan tampilan.<\/p>\n<p>Misalnya, sebuah gambar hanya ditampilkan dengan lebar sekitar 800 piksel, tetapi file asli yang diunggah memiliki lebar 5000 piksel. Walaupun WordPress dapat menghasilkan beberapa ukuran gambar, menggunakan file asli berukuran sangat besar secara langsung tetap dapat membebani halaman.<\/p>\n<p>Sebelum mengunggah gambar, sesuaikan dimensinya dengan kebutuhan. Sebagai gambaran:<\/p>\n<table style=\"height: 224px\" width=\"657\">\n<thead>\n<tr>\n<th>Penggunaan<\/th>\n<th align=\"right\">Dimensi yang Dapat Dipertimbangkan<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Thumbnail kecil<\/td>\n<td align=\"right\">150\u2013300 px<\/td>\n<\/tr>\n<tr>\n<td>Gambar dalam artikel<\/td>\n<td align=\"right\">600\u20131200 px<\/td>\n<\/tr>\n<tr>\n<td>Featured image<\/td>\n<td align=\"right\">1200\u20131600 px<\/td>\n<\/tr>\n<tr>\n<td>Banner lebar<\/td>\n<td align=\"right\">1600\u20132000 px<\/td>\n<\/tr>\n<tr>\n<td>Gambar hero beresolusi tinggi<\/td>\n<td align=\"right\">Menyesuaikan desain dan kebutuhan<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Angka tersebut bukan aturan wajib. Dimensi ideal tetap bergantung pada desain website, ukuran area konten, perangkat pengguna, dan kebutuhan visual.<\/p>\n<p>WordPress secara otomatis dapat membuat beberapa ukuran gambar ketika file diunggah ke Media Library. Fitur responsive images kemudian memungkinkan browser memilih sumber gambar yang lebih sesuai berdasarkan kondisi tampilan.<\/p>\n<p><span style=\"font-size: 20px\">3. Kompres Gambar Sebelum Digunakan<\/span><\/p>\n<p>Kompresi bertujuan mengurangi ukuran file tanpa membuat kualitas gambar turun secara berlebihan. Terdapat dua pendekatan umum:<\/p>\n<ul>\n<li><strong>Lossless compression<br \/>\n<\/strong>Mengurangi data yang tidak diperlukan dengan mempertahankan kualitas gambar.<\/li>\n<li><strong>Lossy compression<br \/>\n<\/strong>Mengurangi sebagian informasi visual untuk mendapatkan ukuran file yang lebih kecil.<\/li>\n<\/ul>\n<p>Untuk gambar pada artikel, kompresi lossy dengan tingkat yang wajar sering menjadi pilihan praktis karena dapat mengurangi ukuran file secara signifikan tanpa perubahan visual yang terlalu terlihat.<\/p>\n<p>Namun, jangan mengejar ukuran file sekecil mungkin jika hasil akhirnya membuat gambar terlihat pecah, terlalu buram, atau muncul artefak kompresi.<\/p>\n<p><span style=\"font-size: 20px\">4. Gunakan Nama File yang Deskriptif<\/span><\/p>\n<p>Nama file juga perlu diperhatikan sebelum gambar diunggah ke WordPress. Hindari nama seperti:<\/p>\n<pre><code class=\"language-text\">IMG12345.jpg\r\nDSC_0098.jpg\r\nscreenshot123.png\r\n<\/code><\/pre>\n<p>Lebih baik gunakan nama yang menjelaskan isi gambar, misalnya:<\/p>\n<pre><code class=\"language-text\">optimasi-gambar-wordpress.webp\r\ncara-kompres-gambar-wordpress.webp\r\nwordpress-responsive-images.webp\r\n<\/code><\/pre>\n<p>Nama file sebaiknya singkat, deskriptif, menggunakan huruf kecil, dan memisahkan kata dengan tanda hubung. Jangan memasukkan terlalu banyak keyword hanya untuk mengejar SEO. Nama file seharusnya tetap menggambarkan isi gambar secara alami.<\/p>\n<p><span style=\"font-size: 20px\">5. Isi Alt Text dengan Relevan<\/span><\/p>\n<p>Alt text atau alternative text adalah teks yang menjelaskan isi atau fungsi sebuah gambar. Contohnya, jika gambar menunjukkan dashboard WordPress, alt text dapat berupa: <code class=\"language-text\">Dashboard WordPress untuk mengelola website<\/code>. Hindari penggunaan alt text seperti: <code class=\"language-text\">WordPress, optimasi gambar WordPress, cara optimasi gambar WordPress<br \/>\n<\/code>, karena terlihat seperti keyword stuffing dan tidak memberikan deskripsi yang natural.<\/p>\n<p>Alt text sebaiknya ditulis berdasarkan isi gambar dan konteks penggunaannya. Selain membantu mesin pencari memahami gambar, alt text juga berguna bagi pengguna yang menggunakan teknologi pembaca layar. Tidak semua gambar membutuhkan alt text deskriptif. Untuk gambar dekoratif yang tidak memberikan informasi penting, alt text kosong dapat lebih sesuai.<\/p>\n<p><span style=\"font-size: 20px\">6. Pilih Ukuran Gambar yang Sesuai di Editor WordPress<\/span><\/p>\n<p>Setelah gambar diunggah, jangan selalu memilih opsi Full Size jika tidak diperlukan. Misalnya, gambar asli memiliki lebar 2000 piksel, sedangkan area konten artikel hanya sekitar 800 piksel. Menggunakan ukuran yang lebih sesuai dapat membantu mengurangi data yang harus dikirim ke browser.<\/p>\n<p>WordPress menyediakan beberapa ukuran gambar seperti Thumbnail, Medium, dan Large. Pengaturan tersebut dapat ditemukan melalui <em>Settings \u2192 Media<\/em> dan menentukan ukuran maksimum yang digunakan untuk ukuran gambar tertentu.<\/p>\n<p>Namun, pilihan ukuran sebaiknya tetap mempertimbangkan tampilan sebenarnya. Jangan menggunakan gambar yang terlalu kecil jika gambar tersebut akan ditampilkan dalam area yang besar karena dapat membuat hasilnya terlihat buram.<\/p>\n<p><span style=\"font-size: 20px\">7. Manfaatkan Responsive Images WordPress<\/span><\/p>\n<p>WordPress sudah memiliki dukungan responsive images secara native. Sejak WordPress 4.4, gambar yang dihasilkan WordPress dapat menggunakan atribut <code>srcset<\/code> dan <code>sizes<\/code>.<\/p>\n<p>Secara sederhana, browser akan mendapatkan beberapa pilihan ukuran gambar dan menentukan file yang paling sesuai dengan kondisi tampilan. Contohnya, sebuah gambar memiliki beberapa versi:<\/p>\n<pre><code class=\"language-text\">gambar-300.jpg\r\ngambar-768.jpg\r\ngambar-1200.jpg\r\n<\/code><\/pre>\n<p>Pada layar kecil, browser dapat memilih versi yang lebih kecil. Sementara itu, perangkat dengan area tampilan lebih besar dapat menggunakan sumber gambar yang lebih sesuai. Dengan mekanisme tersebut, website tidak selalu harus mengirim gambar terbesar kepada setiap pengunjung.<\/p>\n<p><span style=\"font-size: 20px\">8. Gunakan Lazy Loading dengan Tepat<\/span><\/p>\n<p>Lazy loading membuat gambar tertentu baru dimuat ketika diperlukan, misalnya ketika gambar mulai mendekati area yang akan dilihat pengguna. WordPress telah mendukung lazy loading secara default sejak WordPress 5.5 menggunakan atribut HTML <code>loading=\"lazy\"<\/code>.<\/p>\n<p>Teknik ini sangat berguna pada halaman panjang yang memiliki banyak gambar karena gambar yang berada jauh di bawah halaman tidak harus langsung dimuat ketika halaman pertama kali dibuka.<\/p>\n<p>Namun, tidak semua gambar sebaiknya diperlakukan sama. Gambar utama yang berada di area awal halaman atau berpotensi menjadi elemen <em>Largest Contentful Paint (LCP)<\/em> perlu mendapatkan prioritas yang tepat.<\/p>\n<p>WordPress juga memiliki mekanisme <code>fetchpriority<\/code> untuk membantu memprioritaskan gambar yang diperkirakan menjadi LCP. Karena itu, memasang plugin yang memaksa seluruh gambar menjadi lazy loading belum tentu merupakan pendekatan yang tepat.<\/p>\n<p><span style=\"font-size: 20px\">9. Jangan Menggunakan Lazy Loading pada Semua Gambar Secara Sembarangan<\/span><\/p>\n<p>Lazy loading memang membantu mengurangi pemuatan aset yang belum diperlukan, tetapi gambar utama di bagian atas halaman biasanya perlu dimuat lebih cepat. Contohnya adalah:<\/p>\n<ul>\n<li>Featured image utama<\/li>\n<li>Hero image<\/li>\n<li>Gambar yang menjadi elemen LCP<\/li>\n<li>Gambar penting yang langsung terlihat ketika halaman dibuka<\/li>\n<\/ul>\n<p>Sebaliknya, gambar yang berada jauh di bawah konten umumnya lebih cocok menggunakan lazy loading. Tujuannya bukan sekadar membuat semua gambar lazy, tetapi mengatur prioritas pemuatan gambar sesuai posisi dan perannya pada halaman.<\/p>\n<p><span style=\"font-size: 20px\">10. Tentukan Kualitas Kompresi yang Seimbang<\/span><\/p>\n<p>Kualitas gambar tidak harus selalu 100 persen. Untuk penggunaan web, kualitas yang sedikit dikurangi sering kali tidak terlihat oleh pengguna tetapi dapat menghasilkan ukuran file yang jauh lebih kecil. Sebagai contoh, sebuah foto berukuran 2 MB dapat dikompresi menjadi beberapa ratus kilobyte dengan kualitas visual yang masih terlihat baik.<\/p>\n<p>Tidak ada satu angka kualitas yang cocok untuk semua gambar. Foto, ilustrasi, screenshot, dan grafik memiliki karakteristik berbeda sehingga hasil kompresinya juga berbeda. Sebaiknya lakukan pengujian visual setelah kompresi untuk memastikan gambar tetap terlihat tajam dan tidak mengalami artefak yang mengganggu.<\/p>\n<p><span style=\"font-size: 20px\">11. Gunakan Plugin Optimasi Gambar Jika Diperlukan<\/span><\/p>\n<p>WordPress menyediakan banyak plugin yang dapat membantu proses optimasi gambar, seperti kompresi otomatis, konversi format, pembuatan ukuran gambar, dan pengelolaan gambar yang sudah ada. Plugin dapat membantu terutama jika website memiliki banyak konten dan gambar.<\/p>\n<p>Namun, penggunaan plugin sebaiknya tetap selektif. Hindari memasang beberapa plugin dengan fungsi yang sama karena dapat menyebabkan proses optimasi berjalan berulang atau menimbulkan konflik. Sebelum memilih plugin, perhatikan:<\/p>\n<ul>\n<li>metode kompresi yang digunakan;<\/li>\n<li>dukungan WebP atau AVIF;<\/li>\n<li>kemampuan mengoptimalkan gambar lama;<\/li>\n<li>batas penggunaan pada paket gratis;<\/li>\n<li>kebutuhan koneksi ke layanan eksternal;<\/li>\n<li>kompatibilitas dengan tema dan plugin lain;<\/li>\n<li>fitur backup atau restore gambar asli.<\/li>\n<\/ul>\n<p>Optimasi gambar sebaiknya menjadi bagian dari strategi performa website secara keseluruhan, bukan hanya bergantung pada satu plugin.<\/p>\n<p><span style=\"font-size: 20px\">12. Optimalkan Gambar yang Sudah Ada<\/span><\/p>\n<p>Optimasi tidak harus dilakukan hanya pada gambar baru. Jika website sudah memiliki banyak konten lama, lakukan audit terhadap gambar yang sudah tersimpan di Media Library. Periksa gambar yang:<\/p>\n<ul>\n<li>memiliki ukuran file sangat besar;<\/li>\n<li>menggunakan dimensi berlebihan;<\/li>\n<li>masih menggunakan format yang kurang efisien;<\/li>\n<li>memiliki nama file yang tidak deskriptif;<\/li>\n<li>tidak memiliki alt text ketika memang diperlukan;<\/li>\n<li>sudah tidak digunakan pada halaman mana pun.<\/li>\n<\/ul>\n<p>Untuk website yang sudah berjalan lama, lakukan optimasi secara bertahap. Backup terlebih dahulu sebelum melakukan perubahan massal terhadap media.<\/p>\n<p><span style=\"font-size: 20px\">13. Hindari Mengunggah Gambar yang Tidak Diperlukan<\/span><\/p>\n<p>Tidak semua informasi membutuhkan gambar. Jika sebuah gambar hanya digunakan sebagai dekorasi tetapi memiliki ukuran sangat besar, pertimbangkan apakah gambar tersebut benar-benar memberikan nilai bagi halaman.<\/p>\n<p>WordPress sendiri merekomendasikan memperhatikan gambar yang tidak diperlukan sebagai bagian dari optimasi konten website. Penggunaan gambar yang lebih selektif dapat membantu mengurangi jumlah resource yang harus dimuat tanpa mengurangi kualitas informasi pada artikel.<\/p>\n<p><span style=\"font-size: 20px\">14. Perhatikan Dimensi Width dan Height<\/span><\/p>\n<p>Gambar sebaiknya memiliki informasi dimensi yang sesuai agar browser dapat memperkirakan ruang yang akan ditempati sebelum file selesai dimuat. Hal ini membantu mengurangi risiko <em>Cumulative Layout Shift (CLS)<\/em>, yaitu kondisi ketika elemen halaman tiba-tiba bergeser karena gambar atau elemen lain baru selesai dimuat.<\/p>\n<p>WordPress menggunakan dimensi gambar sebagai salah satu bagian dari mekanisme pengelolaan lazy loading dan layout gambar. Karena itu, hindari membangun gambar dengan markup yang menghilangkan informasi ukuran secara tidak perlu.<\/p>\n<p><span style=\"font-size: 20px\">15. Gunakan CDN untuk Website dengan Traffic Tinggi<\/span><\/p>\n<p>Jika website memiliki banyak pengunjung dari berbagai wilayah atau memiliki koleksi gambar yang besar, penggunaan Content Delivery Network (CDN) dapat dipertimbangkan. CDN menyimpan salinan aset statis seperti gambar pada server di berbagai lokasi. Pengunjung kemudian dapat memperoleh aset dari lokasi yang relatif lebih dekat dengan mereka.<\/p>\n<p>CDN bukan pengganti kompresi. Gambar yang berukuran 2 MB tetap merupakan file 2 MB meskipun dikirim melalui CDN. Karena itu, optimasi file sebaiknya dilakukan terlebih dahulu sebelum mempertimbangkan CDN sebagai lapisan tambahan.<\/p>\n<p><span style=\"font-size: 20px\">16. Gunakan Image CDN Jika Dibutuhkan<\/span><\/p>\n<p>Selain CDN biasa, terdapat layanan image CDN yang dapat melakukan transformasi gambar berdasarkan kebutuhan, seperti:<\/p>\n<ul>\n<li>resize;<\/li>\n<li>compression;<\/li>\n<li>format conversion;<\/li>\n<li>cropping;<\/li>\n<li>quality adjustment.<\/li>\n<\/ul>\n<p>Pendekatan ini berguna untuk website yang memiliki banyak gambar dengan kebutuhan tampilan berbeda. Namun, untuk website kecil dengan jumlah gambar terbatas, solusi tersebut belum tentu diperlukan. Optimasi manual atau plugin yang sesuai mungkin sudah cukup.<\/p>\n<p><span style=\"font-size: 20px\">17. Perhatikan Gambar untuk Featured Image<\/span><\/p>\n<p>Featured image sering menjadi gambar yang paling menonjol pada artikel. Karena itu, jangan hanya memperhatikan kualitas visual, tetapi juga ukurannya. Gunakan dimensi yang sesuai dengan desain tema dan pastikan file tidak terlalu besar.<\/p>\n<p>Misalnya, jika tema hanya menampilkan featured image pada area dengan lebar sekitar 1200 piksel, tidak selalu diperlukan gambar berukuran 4000 atau 5000 piksel. Selain itu, gunakan nama file dan alt text yang relevan dengan isi artikel jika gambar tersebut memang memiliki fungsi informatif.<\/p>\n<p><span style=\"font-size: 20px\">18. Optimalkan Gambar untuk Mobile<\/span><\/p>\n<p>Gambar yang terlihat bagus di desktop belum tentu ideal untuk perangkat mobile. Pada layar kecil, gambar dengan dimensi terlalu besar dapat menyebabkan penggunaan data yang tidak perlu jika browser tidak mendapatkan sumber gambar yang sesuai.<\/p>\n<p>Responsive images WordPress membantu mengatasi masalah ini dengan menyediakan beberapa pilihan sumber gambar melalui <code>srcset<\/code> dan <code>sizes<\/code>. Browser kemudian dapat memilih ukuran yang sesuai dengan viewport dan kondisi perangkat. Karena itu, setelah melakukan optimasi, selalu periksa tampilan website pada desktop dan mobile.<\/p>\n<p><span style=\"font-size: 20px\">19. Jangan Mengorbankan Kualitas Secara Berlebihan<\/span><\/p>\n<p>Optimasi bukan berarti membuat gambar sekecil mungkin. Jika kompresi dilakukan terlalu agresif, gambar dapat menjadi:<\/p>\n<ul>\n<li>buram<\/li>\n<li>pecah<\/li>\n<li>kehilangan detail<\/li>\n<li>memiliki artefak<\/li>\n<li>sulit dibaca, terutama pada screenshot atau infografik.<\/li>\n<\/ul>\n<p>Tujuan optimasi adalah mencari keseimbangan antara kualitas visual dan ukuran file.<\/p>\n<table style=\"height: 281px\" width=\"721\">\n<thead>\n<tr>\n<th>Kondisi<\/th>\n<th>Pendekatan<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Foto artikel<\/td>\n<td>Kompresi dengan kualitas yang tetap nyaman dilihat<\/td>\n<\/tr>\n<tr>\n<td>Screenshot tutorial<\/td>\n<td>Pertahankan teks agar tetap terbaca<\/td>\n<\/tr>\n<tr>\n<td>Logo<\/td>\n<td>Gunakan format yang mendukung kebutuhan transparansi<\/td>\n<\/tr>\n<tr>\n<td>Infografik<\/td>\n<td>Prioritaskan keterbacaan teks<\/td>\n<\/tr>\n<tr>\n<td>Hero image<\/td>\n<td>Sesuaikan dengan ukuran area tampilan<\/td>\n<\/tr>\n<tr>\n<td>Thumbnail<\/td>\n<td>Gunakan ukuran yang lebih kecil sesuai kebutuhan<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-size: 20px\">20. Audit Performa Setelah Optimasi<\/span><\/p>\n<p>Setelah melakukan optimasi, jangan langsung menganggap website sudah optimal. Lakukan pengujian untuk melihat apakah perubahan yang dilakukan benar-benar memberikan dampak. Beberapa hal yang dapat diperiksa:<\/p>\n<ul>\n<li>ukuran halaman;<\/li>\n<li>ukuran file gambar;<\/li>\n<li>jumlah request;<\/li>\n<li>waktu loading;<\/li>\n<li>penggunaan format gambar;<\/li>\n<li>responsive image;<\/li>\n<li>LCP;<\/li>\n<li>CLS;<\/li>\n<li>performa mobile dan desktop.<\/li>\n<\/ul>\n<p>Tools pengujian performa dapat membantu mengetahui resource mana yang paling banyak memberikan beban terhadap halaman. WordPress juga merekomendasikan penggunaan alat pengujian performa untuk mengukur kondisi website dari berbagai lokasi, browser, dan kecepatan koneksi.<\/p>\n<h2>Perbandingan Cara Optimasi Gambar di WordPress<\/h2>\n<p>Berikut beberapa teknik yang dapat digunakan secara bersamaan:<\/p>\n<table style=\"height: 394px\" width=\"712\">\n<thead>\n<tr>\n<th>Teknik<\/th>\n<th>Tujuan Utama<\/th>\n<th>Prioritas<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Kompresi gambar<\/td>\n<td>Mengurangi ukuran file<\/td>\n<td>Tinggi<\/td>\n<\/tr>\n<tr>\n<td>Resize<\/td>\n<td>Menyesuaikan dimensi<\/td>\n<td>Tinggi<\/td>\n<\/tr>\n<tr>\n<td>WebP\/AVIF<\/td>\n<td>Menggunakan format lebih efisien<\/td>\n<td>Tinggi<\/td>\n<\/tr>\n<tr>\n<td>Responsive images<\/td>\n<td>Menyajikan ukuran yang sesuai perangkat<\/td>\n<td>Tinggi<\/td>\n<\/tr>\n<tr>\n<td>Lazy loading<\/td>\n<td>Menunda gambar yang belum diperlukan<\/td>\n<td>Tinggi<\/td>\n<\/tr>\n<tr>\n<td>Alt text<\/td>\n<td>Membantu aksesibilitas dan pemahaman gambar<\/td>\n<td>Tinggi<\/td>\n<\/tr>\n<tr>\n<td>Nama file deskriptif<\/td>\n<td>Menjelaskan konteks gambar<\/td>\n<td>Sedang<\/td>\n<\/tr>\n<tr>\n<td>CDN<\/td>\n<td>Mempercepat distribusi aset<\/td>\n<td>Sedang<\/td>\n<\/tr>\n<tr>\n<td>Image CDN<\/td>\n<td>Resize dan optimasi secara dinamis<\/td>\n<td>Opsional<\/td>\n<\/tr>\n<tr>\n<td>Audit media<\/td>\n<td>Menghapus atau mengoptimalkan aset lama<\/td>\n<td>Sedang<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Kesalahan yang Sering Terjadi Saat Mengoptimalkan Gambar<\/h2>\n<p>Beberapa kesalahan justru dapat membuat proses optimasi kurang efektif.<\/p>\n<p><span style=\"font-size: 20px\">1. Mengunggah Foto dari Kamera Langsung ke Website<\/span><\/p>\n<p>Foto dari kamera atau smartphone modern dapat memiliki resolusi sangat tinggi. Mengunggahnya tanpa resize dan kompresi dapat menghasilkan file yang jauh lebih besar dari kebutuhan halaman.<\/p>\n<p><span style=\"font-size: 20px\">2. Selalu Menggunakan Full Size<\/span><\/p>\n<p>Memilih Full Size untuk setiap gambar tidak selalu diperlukan. Gunakan ukuran yang sesuai dengan area tampilan.<\/p>\n<p><span style=\"font-size: 20px\">3. Menggunakan Format yang Tidak Sesuai<\/span><\/p>\n<p>Jangan menggunakan PNG berukuran besar untuk foto jika WebP atau JPEG dapat memberikan hasil yang lebih efisien.<\/p>\n<p><span style=\"font-size: 20px\">4. Mengisi Alt Text dengan Keyword Berulang<\/span><\/p>\n<p>Alt text bukan tempat untuk memasukkan keyword sebanyak mungkin. Tulis deskripsi yang benar-benar menjelaskan gambar.<\/p>\n<p><span style=\"font-size: 20px\">5. Memasang Banyak Plugin Optimasi<\/span><\/p>\n<p>Beberapa plugin dengan fungsi yang sama dapat melakukan optimasi berulang atau menimbulkan konflik. Pilih solusi yang sesuai dengan kebutuhan website.<\/p>\n<p><span style=\"font-size: 20px\">6. Membuat Semua Gambar Lazy Loading<\/span><\/p>\n<p>Gambar yang berada di bagian atas halaman dan menjadi elemen penting tidak selalu cocok untuk lazy loading. Prioritas pemuatan harus disesuaikan dengan posisi gambar.<\/p>\n<p><span style=\"font-size: 20px\">7. Tidak Melakukan Backup<\/span><\/p>\n<p>Optimasi massal pada gambar dapat mengubah file atau membuat versi baru. Pastikan tersedia backup sebelum melakukan perubahan besar.<\/p>\n<h2>Langkah Praktis Mengoptimalkan Gambar di WordPress<\/h2>\n<p>Jika ingin menerapkan optimasi secara sederhana, Anda dapat mengikuti alur berikut:<\/p>\n<ul>\n<li><strong>Siapkan gambar<br \/>\n<\/strong>Gunakan gambar yang relevan dengan isi halaman dan hindari resolusi yang jauh lebih besar dari kebutuhan.<\/li>\n<\/ul>\n<ul>\n<li><strong>Resize gambar<br \/>\n<\/strong>Sesuaikan dimensi dengan area tampilan website.<\/li>\n<\/ul>\n<ul>\n<li><strong>Kompres gambar<br \/>\n<\/strong>Kurangi ukuran file dengan tetap menjaga kualitas visual.<\/li>\n<\/ul>\n<ul>\n<li><strong>Pilih format yang sesuai<br \/>\n<\/strong>Pertimbangkan WebP atau AVIF untuk aset yang mendukung format tersebut, sementara JPEG atau PNG tetap dapat digunakan sesuai kebutuhan.<\/li>\n<\/ul>\n<ul>\n<li><strong>Beri nama file yang deskriptif<br \/>\n<\/strong>Gunakan nama yang singkat dan menggambarkan isi gambar.<\/li>\n<\/ul>\n<ul>\n<li><strong>Upload ke Media Library<br \/>\n<\/strong>Masukkan gambar ke WordPress dan gunakan ukuran yang sesuai saat memasukkannya ke artikel.<\/li>\n<\/ul>\n<ul>\n<li><strong>Isi alt text<br \/>\n<\/strong>Tambahkan deskripsi singkat dan relevan jika gambar memiliki fungsi informatif.<\/li>\n<\/ul>\n<ul>\n<li><strong>Periksa responsive images<br \/>\n<\/strong>Pastikan tema atau implementasi website tidak menghilangkan mekanisme <code>srcset<\/code> dan <code>sizes<\/code> yang disediakan WordPress.<\/li>\n<\/ul>\n<ul>\n<li><strong>Periksa lazy loading<br \/>\n<\/strong>Pastikan gambar yang berada jauh di bawah halaman dapat dimuat secara efisien tanpa menghambat gambar utama.<\/li>\n<\/ul>\n<ul>\n<li><strong>Uji performa<br \/>\n<\/strong>Periksa kembali kecepatan dan Core Web Vitals setelah optimasi dilakukan.<\/li>\n<\/ul>\n<h2>Tips Optimasi Gambar WordPress untuk Jangka Panjang<\/h2>\n<p>Agar optimasi tidak hanya dilakukan sekali, buat standar penggunaan gambar untuk seluruh website. Beberapa kebiasaan yang dapat diterapkan adalah:<\/p>\n<ul>\n<li>menentukan ukuran maksimal gambar sebelum upload;<\/li>\n<li>menggunakan format yang efisien;<\/li>\n<li>melakukan kompresi sebelum atau saat upload;<\/li>\n<li>menggunakan nama file yang deskriptif;<\/li>\n<li>mengisi alt text secara relevan;<\/li>\n<li>menghindari gambar yang tidak diperlukan;<\/li>\n<li>menggunakan responsive images;<\/li>\n<li>melakukan audit Media Library secara berkala;<\/li>\n<li>memantau Core Web Vitals;<\/li>\n<li>menggunakan CDN jika memang dibutuhkan;<\/li>\n<li>melakukan backup sebelum optimasi massal.<\/li>\n<\/ul>\n<p>Dengan workflow seperti ini, optimasi gambar dapat menjadi bagian dari proses pembuatan konten, bukan pekerjaan tambahan yang harus dilakukan setelah website mengalami masalah performa.<\/p>\n<h2>Kesimpulan<\/h2>\n<p>Mengoptimalkan gambar di WordPress bukan hanya tentang mengecilkan ukuran file, tetapi juga memilih format, dimensi, kualitas, nama file, alt text, serta cara gambar dimuat pada halaman. WordPress sudah menyediakan berbagai fitur untuk membantu proses tersebut, termasuk responsive images dan lazy loading.<\/p>\n<p>Dengan optimasi yang tepat, gambar tetap dapat terlihat berkualitas sekaligus membantu menjaga performa website. Mulailah dari langkah sederhana seperti resize, kompresi, pemilihan format, dan penggunaan alt text yang relevan, kemudian lanjutkan dengan CDN atau image optimization tools jika kebutuhan website semakin besar.<\/p>\n<p>Untuk mendapatkan informasi lainnya seputar WordPress, website, hosting, cloud, SEO, keamanan, dan teknologi digital, kunjungi <em><a href=\"https:\/\/hosteko.com\/blog\/\"><strong>Blog Hosteko<\/strong><\/a><\/em> yang menyediakan berbagai artikel informatif dan praktis untuk membantu mengelola website dengan lebih baik.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;right&quot;,&quot;id&quot;:&quot;33270&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;0&quot;,&quot;greet&quot;:&quot;Jadilah yang pertama untuk memberi nilai&quot;,&quot;legend&quot;:&quot;5\\\/5 - (1 vote)&quot;,&quot;size&quot;:&quot;22&quot;,&quot;title&quot;:&quot;Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat&quot;,&quot;width&quot;:&quot;110&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 110px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 17.6px;\">\n            5\/5 - (1 vote)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Gambar menjadi salah satu elemen penting dalam sebuah website. Selain membuat artikel lebih menarik, gambar dapat membantu menjelaskan informasi secara visual dan membuat pembaca lebih mudah memahami isi konten. Namun, penggunaan gambar yang tidak dioptimalkan justru dapat membuat website menjadi lambat. File gambar dengan ukuran terlalu besar membutuhkan waktu lebih lama untuk dimuat dan dapat [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":33271,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"no","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[{"account":"twitter_2392824914_2392824914","service":"twitter","timestamp":1789966469,"status":"error"}],"rop_publish_now_status":"done","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[20,8],"tags":[24584,24582,24586,1385,24583,24588,24585,24587],"class_list":["post-33270","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips","category-wordpress","tag-cara-kompres-gambar-wordpress","tag-cara-mengoptimalkan-gambar-di-wordpress","tag-gambar-wordpress","tag-lazy-loading-wordpress","tag-optimasi-gambar-wordpress","tag-optimasi-website-wordpress","tag-seo-gambar-wordpress","tag-webp-wordpress"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46-1140x445.png",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46-300x169.png",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png",1366,768,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat - Hosteko Blog<\/title>\n<meta name=\"description\" content=\"cara mengoptimalkan gambar di WordPress dengan kompresi, resize, WebP, alt text, lazy loading, dan teknik SEO untuk meningkatkan performa website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"cara mengoptimalkan gambar di WordPress dengan kompresi, resize, WebP, alt text, lazy loading, dan teknik SEO untuk meningkatkan performa website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-21T04:54:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Fitri Ana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fitri Ana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress\"},\"author\":{\"name\":\"Fitri Ana\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0\"},\"headline\":\"Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat\",\"datePublished\":\"2026-09-21T04:54:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress\"},\"wordCount\":2928,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png\",\"keywords\":[\"cara kompres gambar WordPress\",\"cara mengoptimalkan gambar di WordPress\",\"gambar WordPress\",\"lazy loading wordpress\",\"optimasi gambar WordPress\",\"optimasi website WordPress\",\"SEO gambar WordPress\",\"WebP WordPress\"],\"articleSection\":[\"Tips\",\"Wordpress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress\",\"url\":\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress\",\"name\":\"Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png\",\"datePublished\":\"2026-09-21T04:54:05+00:00\",\"description\":\"cara mengoptimalkan gambar di WordPress dengan kompresi, resize, WebP, alt text, lazy loading, dan teknik SEO untuk meningkatkan performa website.\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png\",\"width\":1366,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita &amp; Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0\",\"name\":\"Fitri Ana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g\",\"caption\":\"Fitri Ana\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat - Hosteko Blog","description":"cara mengoptimalkan gambar di WordPress dengan kompresi, resize, WebP, alt text, lazy loading, dan teknik SEO untuk meningkatkan performa website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress","og_locale":"en_US","og_type":"article","og_title":"Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat - Hosteko Blog","og_description":"cara mengoptimalkan gambar di WordPress dengan kompresi, resize, WebP, alt text, lazy loading, dan teknik SEO untuk meningkatkan performa website.","og_url":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress","og_site_name":"Hosteko Blog","article_published_time":"2026-09-21T04:54:05+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png","type":"image\/png"}],"author":"Fitri Ana","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Fitri Ana","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress"},"author":{"name":"Fitri Ana","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0"},"headline":"Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat","datePublished":"2026-09-21T04:54:05+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress"},"wordCount":2928,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png","keywords":["cara kompres gambar WordPress","cara mengoptimalkan gambar di WordPress","gambar WordPress","lazy loading wordpress","optimasi gambar WordPress","optimasi website WordPress","SEO gambar WordPress","WebP WordPress"],"articleSection":["Tips","Wordpress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress","url":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress","name":"Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png","datePublished":"2026-09-21T04:54:05+00:00","description":"cara mengoptimalkan gambar di WordPress dengan kompresi, resize, WebP, alt text, lazy loading, dan teknik SEO untuk meningkatkan performa website.","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png","width":1366,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/cara-mengoptimalkan-gambar-di-wordpress#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Cara Mengoptimalkan Gambar di WordPress agar Website Lebih Cepat"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita &amp; Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0","name":"Fitri Ana","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g","caption":"Fitri Ana"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2026\/09\/Desain-tanpa-judul46.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/33270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=33270"}],"version-history":[{"count":1,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/33270\/revisions"}],"predecessor-version":[{"id":33272,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/33270\/revisions\/33272"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/33271"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=33270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=33270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=33270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}