WordPressの投稿で画像を表示していると思います。私が記事を作成する時には、画像をフルサイズで指定しています。

パソコンやタブレットは画面サイズが大きいので、フルサイズ画像でいいのですが、スマートフォンサイトだとファイルサイズが大きくなりすぎてしまいます。

スマートフォンはパソコンと比べると性能が劣るし、通信速度も遅いので、軽量化することが大事です。

スマートフォンは画面が小さいので、画像サイズも小さめのものを表示しても十分です。

私はスマートフォンで表示した時に、フルサイズの画像から中サイズの画像に置き換えて表示しています。

それだけでスマートフォンにかかる負荷が下がるので、表示速度が早くなると思ったからです。

functions.phpにコードを追加

以下のコードをfunctions.phpに追加して、スマートフォンの時だけ中サイズの画像に差し替えています。

add_filter( 'the_content', 'changeImageSP' );
function changeImageSP( $content ) { 
	global $post;
	
	//スマホサイトのみ処理を行う
	if(is_mobile()){
		$images = get_children( 'post_parent='.$post->ID.'&post_type=attachment&post_mime_type=image' );
		if ( !empty($images) ) {
			foreach ( $images as $attachment_id => $attachment ) {
				$full_image = wp_get_attachment_image_src( $attachment_id, 'full' );
				$medium_image = wp_get_attachment_image_src( $attachment_id, 'medium' );
				//画像を置き換え
				$replace_before = 'src="'.$full_image[0].'"';
				$replace_after = 'src="'.$medium_image[0].'"';
				$content = str_replace($replace_before, $replace_after, $content);
				$replace_before = 'width="'.$full_image[1].'" height="'.$full_image[2].'"';
				$replace_after = 'width="'.$medium_image[1].'" height="'.$medium_image[2].'"';
				$content = str_replace($replace_before, $replace_after, $content);
			}
		}
	}
	return $content;
}

is_mobileという自作の関数でスマートフォンだけ処理するように切り分けています。
参考：WordPressサイトでスマートフォンだけ処理を変更したい場合の処理

記事内容を表示する関数「the_content」の前に処理を入れています。ブログ記事に紐付いている画像(記事内の画像)を「get_children」関数で取得して、それをforeachでループさせています。

ループ内は、フルサイズの画像と中サイズの画像をそれぞれ取得して、imgタグに指定する画像ファイル名・幅・高さを置き換えています。「wp_get_attachment_image_src」関数で指定したサイズの画像ファイル名・幅・高さを取得できます。それをPHPのstr_replace関数を使って置き換えているという流れです。

このコードも完璧ではなくて、2回置き換え処理をしています。ホントは1回で置き換えしてしまえば一番いいんですけどね。

幅と高さだけを置き換える処理をしているので、複数画像のサイズを変更してしまう可能性があります。利用する際は完璧でないことを理解した上で使ってください。

今のところ、私が別に運営している「ふらっと」というサイトでこの処理を行っています。