Optimasi Gambar Responsif di WordPress

Mengapa situs web WordPress yang menggunakan tema gratis sering kesulitan mencapai skor hijau pada Core Web Vitals (CWV), sementara tema premium dan tema yang dioptimasi untuk SEO lebih mudah?

Banyak demo tema yang menampilkan skor hijau Core Web Vitals hingga 99%. Namun, setelah menginstal tema tersebut, hasilnya jauh panggang dari harapan.

Apakah ini hanya gimik? Ataukah ada bug yang perlu dipecahkan?

Masalah utama pada tema WordPress gratis yang mendapat skor merah pada CWV sering kali terletak pada gambar feature.

Core Web Vitals dibagi menjadi tiga metrik: LCP, INP, dan CLS. Metrik LCP mengukur elemen seperti gambar, tag gambar, thumbnail video, gambar latar belakang, dan teks (judul dan paragraf). Waktu muat LCP disarankan tidak lebih dari 2.5 detik.

Jika gambar feature yang diunggah adalah foto mentah tanpa proses editing (cropping dan kompresi), maka kemungkinan besar akan mendapat skor merah dari Google CWV.

Solusinya bagaimana? Mudah, pakai ilmu padi efiensi abangkuh!

Pertama, setiap gambar yang diunggah sebagai konten web (posting WordPress) harus melalui proses post-production crop and compression feature image. Pangkas gambar dengan lebar standar posting saat ini, width: 1200px dan height (tinggi) yang proporsional dengan rasio 4:3 atau 1:9. Kemudian kompres gambar ke format .webp dengan ukuran file di bawah 100KB, maksimal hingga 200KB.

Kedua, pastikan tema WordPress menampilkan feature image secara efisien dan responsif sesuai ukuran layar. Jika pengguna mengakses dengan smartphone, feature image harus tampil dalam ukuran medium. Jika dibuka di layar lebar atau desktop, tampilkan dalam ukuran besar atau full image. Saat menjadi listing artikel di halaman utama, feature image harus tampil dalam format thumbnail.

Jika tema wordrpess tidak mendukung, gunakan tema Pehtheme WP atau lakukan trik ‘hack code’ pada tema favorit kalian untuk menyesuaikan tampilan gambar feature sesuai aturan web responsif.

Masalah pada the_post_thumbnail() WP Theme gratisan

Biasanya, theme WordPress gratis dikembangkan berdasarkan basic code “underscores”, yang merupakan kerangka kerja minimal yang disediakan oleh WordPress.org untuk membantu pengembangan theme.

Theme “underscores”, atau “_s”, hanya menyertakan fungsi dan elemen dasar yang diperlukan sebagai base code framework yang cukup aman.

Hal ini memungkinkan developer wp theme, cukup fokus pada kode CSS saja untuk merancang tampilan, tanpa harus memikirkan proses loop, if-else, dan logika pemrograman PHP yang begitu menjengkelkan.

So, kembali pada masalah gambar feature. Code yang biasa digunakan untuk display feature image adalah <?php the_post_thumbnail(); ?>.

Jika kita bedah jeroan dasar theme underscores, kita akan menemukan code tersebut bersama dengan turunannya seperti berikut:

// Kode standar untuk menampilkan gambar fitur postingan
<?php the_post_thumbnail(); ?>

// Kode dengan fungsionalitas tambahan untuk memodifikasi perilaku
// fungsi the_post_thumbnail() sesuai dengan kebutuhan tema tertentu.
<?php _s_post_thumbnail(); ?>

// Untuk menghindari konflik antara fungsi-fungsi dari banyak tema,
// pengembang diperbolehkan mengganti namespace sesuai nama tema.
<?php yournametheme_post_thumbnail(); ?>

Nah, hasil render dari browser untuk ketiga fungsi tersebut menghasilkan tag yang sama dengan semua atribut lengkap.

<img 
	width="1280" height="720" 
	src="https://pehtheme-wp.gui.my.id/wp-content/uploads/2023/11/jeshoots-com-xGtHjC_QNJM-unsplash.jpg"
	class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
	alt="VR Photo by JESHOOTS.COM on Unsplash"
	decoding="async"
	fetchpriority="high"
	srcset="https://pehtheme-wp.gui.my.id/wp-content/uploads/2023/11/jeshoots-com-xGtHjC_QNJM-unsplash.jpg 1280w,
					https://pehtheme-wp.gui.my.id/wp-content/uploads/2023/11/jeshoots-com-xGtHjC_QNJM-unsplash-300x169.jpg 300w,
					https://pehtheme-wp.gui.my.id/wp-content/uploads/2023/11/jeshoots-com-xGtHjC_QNJM-unsplash-1024x576.jpg 1024w,
					https://pehtheme-wp.gui.my.id/wp-content/uploads/2023/11/jeshoots-com-xGtHjC_QNJM-unsplash-768x432.jpg 768w"
	sizes="(max-width: 1280px) 100vw, 1280px">

Meskipun hasil ouput dari ketiga fungsi tersebut dalam browser menghasilkan tag <img> dengan atribut yang sesuai, terdapat masalah terkait atribut sizes="(max-width: 1280px) 100vw, 1280px".

Mari kita teliti masalah ini lebih lanjut.

Sebelum memulai proses debug, mari kita pahami struktur URL gambar sebagai berikut:

<img
	src="./uploads/2023/11/coldplay-concert.jpg"
	srcset="
	./uploads/2023/11/coldplay-concert.jpg 1280w,
	./uploads/2023/11/coldplay-concert-300x169.jpg 300w,
	./uploads/2023/11/coldplay-concert-1024x576.jpg 1024w,
	./uploads/2023/11/coldplay-concert-768x432.jpg 768w"
>

Perhatikan bahwa setiap kali gambar diunggah, WordPress akan melakukan proses “image resizing and cropping” atau “thumbnail resizing” untuk menciptakan beberapa format gambar, pada kasus ini, saya mengupload gambar dengan size 1200x800px dengan ouput yang dihasilkan:

Gambar asli → ./coldplay-concert.jpg
Format gambar thumbnail → ./coldplay-concert-150x150.jpg 150w
Format gambar medium → /coldplay-concert-300x200.jpg 300w
Format gambar large → /coldplay-concert-768x512.jpg 768w
Format gambar medium_large → ./coldplay-concert-1024x683.jpg 1024w

Untuk memverifikasi masalah ini, akses salah satu konten melalui desktop dan klik kanan pada gambar fitur, lalu pilih ‘Open image in new tab’. Analisa URL gambar yang muncul, dan Anda seharusnya melihat tautan ke gambar asli seperti https://pehtheme-wp.gui.my.id/wp-content/uploads/2023/11/coldplay-concert.jpg.

Kemudian, aktifkan fitur “Responsive Design Mode” pada browser, pilih mode tampilan tablet (768px), dan ulangi proses sebelumnya. Anda harus melihat tautan ke gambar dalam format medium. Jika masih muncul tautan ke gambar asli, ini menunjukkan bahwa ada masalah yang perlu diperbaiki.

Lakukan langkah yang sama dalam mode tampilan responsif, pilih tampilan ponsel, dan periksa tautan gambar yang muncul. Jika browser menampilkan tautan ke format gambar miniatur, itu adalah indikasi bahwa semuanya sudah berjalan dengan benar. Namun, jika tautan lain yang muncul, ini menandakan adanya kesalahan.

Periksa juga tautan gambar di beranda dan pastikan bahwa URL gambar yang dipanggil sesuai dengan lebar desain tema yang Anda gunakan.

Efek samping dari browser yang gagal mengambil URL gambar sesuai dengan lebar layar adalah peningkatan waktu pemuatan, karena load gambar asli tanpa crop akan membebani.

Sampai di sini, kita dapat memahami di mana letak masalahnya. Masalah ini juga dapat menjadi penyebab skor Core Web Vitals yang terus merah pada metrik LCP.

Modifikasi pada Tema WordPress

Pertanyaannya selanjutnya adalah bagaimana cara memperbaiki atribut srcset gambar agar browser menampilkan gambar sesuai dengan lebar layar?

Solusinya cukup mudah.

Cukup ubah output default sizes="(max-width: 1280px) 100vw, 1280px" menjadi beberapa max-width berdasarkan tema resposive yang Anda gunakan.

Untuk tema WordPress yang saya buat, saya menggunakan sizes="(max-width: 640px) 300px, (max-width: 768px) 768px, 768px".

Bagaimana caranya? Ada beragam solusi untuk untuk mengatasi masalah gambar feature image WordPress yang tidak responsif.

Pertama, kenali lebih dalam theme wordpress yang Anda gunakan, apakah thema yang dibuat oleh developer adalah turunan dari theme underscores?

Jika ya, cukup modifikasi kode the_post_thumbnail(); untuk mengubah output atribut

Caranya, cari file template-tags.php yang ada di dalam sub folder inc yang berada di dalam root theme dan lakukan perubahan pada baris kode 115 atau di dalam function if ( ! function_exists( 'your_themename_post_thumbnail' ) ) :.

if ( ! function_exists( '_s_post_thumbnail' ) ) :
	/**
	 * Displays an optional post thumbnail.
	 *
	 * Wraps the post thumbnail in an anchor element on index views, or a div
	 * element when on single views.
	 */
	function _s_post_thumbnail() {
		if ( post_password_required() || is_attachment() || ! has_post_thumbnail() ) {
			return;
		}

		if ( is_singular() ) :
			?>

			<div class="post-thumbnail">
				<?php the_post_thumbnail(); ?>
			</div><!-- .post-thumbnail -->

		<?php else : ?>

			<a class="post-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
				<?php
					the_post_thumbnail(
						'post-thumbnail',
						array(
							'alt' => the_title_attribute(
								array(
									'echo' => false,
								)
							),
						)
					);
				?>
			</a>

			<?php
		endif; // End is_singular().
	}
endif;

Lalu modifikasi dengan logika sebagai berikut:

<?php if ( is_singular() ) {

  // Ketika dihalaman single
    the_post_thumbnail( 'large' ); 

  else
  // Ketika dihalaman selain single, seperti home, archive etc
   the_post_thumbnail( 'thumbnail' ); 

}

Namun, jika tema selain turunan dari _s (underscores), bisa melalukan modifikasi output atribut <img sizes> melalui file functions.php dari theme dengan insert kode berikut:

/**
 * Pehtheme custom thumbnail sizes attribute 'sizes="(max-width: 1024px) 100vw, 1024px"' 
 * is generated from the_post_thumbnail() function
 */

function pehtheme_custom_post_thumbnail_sizes_attr($attr, $attachment, $size) {
    // Tambahkan opsi sizes ke dalam atribut
    $attr['sizes'] = '(max-width: 640px) 300px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, 100vw'; // Sesuaikan lebar sesuai responsifitas tema yang Anda gunakan

    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'pehtheme_custom_post_thumbnail_sizes_attr', 10, 3); 

Harap diperhatikan, bagian max-width: 640px harus disesuaikan dengan ukuran responsifitas tema yang Anda gunakan.

Kemudian, lakukan proses debug seperti yang dijelaskan di atas. Jika belum memperbaiki masalah, sesuaikan ukuran max-width: (xxx) dengan pengaturan crop gambar di dalam menu Settings → Media dalam dasbor WordPress.

Menampilkan <img srcset> WordPress secara manual

Metode ini sedikit lebih kompleks karena melibatkan pengeditan kode tema untuk menampilkan gambar dalam loop menggunakan beberapa baris kode prosedural melalui fungsi wp_get_attachment_image().

Namun, dengan menggunakan metode ini, Anda memiliki kendali penuh untuk menampilkan gambar sesuai dengan lebar layar browser.

Cara melakukannya adalah dengan mencari file tema yang memanggil <?php namatema_post_thumbnail(); ?>, lalu menggantinya dengan struktur kode berikut:

<figure class="post-thumbnail">
  <?php
    // Dapatkan ID gambar fitur
    $img_id = get_post_thumbnail_id();

    // Dapatkan URL gambar fitur dengan ukuran 'large'
    $img_src = wp_get_attachment_image_url($img_id, 'large');

    // Dapatkan set sumber gambar (srcset) untuk gambar fitur dengan ukuran 'large'
    $img_srcset = wp_get_attachment_image_srcset($img_id, 'large');

    // Dapatkan dimensi gambar asli
    $image_data = wp_get_attachment_image_src($img_id, 'large');
    $width = $image_data[1]; // Lebar gambar
    $height = $image_data[2]; // Tinggi gambar

    // Dapatkan teks alternatif (alt text) untuk gambar
    $alt = get_post_meta($img_id, '_wp_attachment_image_alt', true);
    if (!$alt) {
        $alt = get_the_title(); // Gunakan judul postingan jika alt text tidak tersedia
    }

    // Dapatkan keterangan (caption) untuk gambar
    $caption = wp_get_attachment_caption($img_id);
  ?>

  <img class="wp-post-image"
		 src="<?php echo esc_url($img_src); ?>" 
     srcset="<?php echo esc_attr($img_srcset); ?>" 
     alt="<?php echo esc_attr($alt); ?>"
     width="<?php echo esc_attr($width); ?>"
     height="<?php echo esc_attr($height); ?>"
     sizes="(max-width: 640px) 300px,
			(max-width: 768px) 768px, 768p,
			(max-width: 1024px) 1024px, 100vw"> // <- Sesuaikan ukuran sesuai kebutuhan
  <?php if (!empty($caption)) : ?>
      <figcaption><?php echo esc_html($caption); ?></figcaption>
  <?php endif; ?>
</figure>

Dengan menggunakan kode kustom ini, Anda dapat mengatasi masalah tautan gambar yang tidak responsif. Selain itu, kode ini akan menampilkan alt image dengan judul post bila alt image tidak ada dari keterangan gambar untuk meningkatkan SEO dan aksesibilitas.

Semoga solusi ini dapat membantu.

Jika solusi ini berhasil mengatasi masalah Anda, dukung terus penulis konten agar semakin termotivasi untuk menyelesaikan masalah perangkat lunak dengan cara memberikan like, share, dan komentar atau dengan memberikan dukungan melalui donasi kopi. Terima kasih.