Home > wordpress > レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方

レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方

vanillate
2015-06-10 Wed 11:12:13
wordpress

レスポンシブ・イメージ。
ざっくり言うと、「retinaなど高解像度なディスプレイも増えてきたし
そろそろPCビューでも@2xと@1xと両方の画像を処理しましょうかね。」
・・という処理と、

レスポンシブレイアウトの際にさらに
「どうやって高解像度画像とノーマル画像を扱っていくの？」
っていう課題みたいなところのことかなと思っています。

そんなレスポンシブ・イメージ的なコーディングのしかたと
ついでのWordPressで「今」どうやって扱うといいかなぁという考察です。

retina.jsはなんとなく重いイメージ

「retina.js」は、「/images」などのフォルダに「a.jpg」と「[email protected]」を放り込めば自動でretinaな場合にのみ@2xに変えてくれる便利なjsです。

→わたしが使ったタイミングがだいぶ前なので、今はよくわからないのですが
なんとなく重い、あと、なんか変換されてるのか不安になるので、設定が簡単なので捨てがたいのですが、使いたい度でいうと低め。

結局htmlでは、imgタグに「srcset」を追加するのがいい気がしました

imgタグ内にノーマル画像と、retina画像を紐付ける方法です。

<img src="images/a.jpg" alt="" srcset="images/[email protected] 2x"/>

わかりやすいように@2xつけてますが、要はretina用のサイズの画像であればOK。

pictureタグは、アートディレクション（各幅のときに画像の縦横比を変える）の時につかうと良いそうで。
単純に画像を縮めたい場合はsrcsetでOKっぽいみたいです。→参考サイト

CSS背景の場合は@mediaで分けて書く

背景画像のサイズだけきちんと指定してあげれば、あとは道なりに解釈してくれます。
要はどこの数値を基準にして@2x画像を計算するかっていうのが大事っぽいです。


.image_class{
    background-image: url("images/a.png");
    background-size: 100px 100px;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx){
    .image_class{
        background-image: url("images/[email protected]");
    }
}

本気でレスポンシブするときに、画像はどれだけ必要になる？

レスポンシブ・イメージ系の流れに沿ったブレークポイントで考えると
１つの画像に、400w、800w、1200wの３つに対して違う画像を用意すればよいってことになります。

PCサイトでRetina対応したいときは、2x設定でいいので同じ内容の画像を２枚ですね。

各ブレークポイントに対していろいろいじりたいときは、さらに複雑になっていくんじゃないですかね。

WordPressでアイキャッチ画像に自動で適用したいとき

複雑なのは置いておいて、PCサイトで @1x と @2x を自動で作りたいときは

■functions.php


if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );
        set_post_thumbnail_size( 280, 396, true ); // 初期設定の投稿サムネイル値
}

if ( function_exists( 'add_image_size' ) ) { 
	add_image_size( 'news-thumb', 82, 82, true ); //小さな四角（サイドメニューなど用）
	add_image_size( 'news-thumb-x2', 164, 164, true ); //小さな四角（サイドメニューなど用）retina用
	add_image_size( 'post-thumbnails-x2', 560, 792, true ); //縦長（一覧用）retina２倍
}

こんな感じで、必要な分だけ切り取ってもらえるように設定して
任意のループ内で


/* 定義 */

$image_id = get_post_thumbnail_id();
$news_normal_imgs_url = wp_get_attachment_image_src($image_id,'news-thumb', true);


/* 呼び出し */
echo $news_normal_imgs_url[0];

こんな感じで呼び出して、imgタグの src と srcset にわけて入れていけばいけそうです。
切り取る画像の縦横比がいろいろ変わる場合は、正方形の大きめ画像をアップロードしてもらうようにすればよさげですね。

＊いまのところ、記事内の画像に関しては、圧縮をかけた画像を1/2にするだけにするか、srcsetを書き込んでもらう、くらいでいいんじゃないでしょうか。

コツは、retina画像と、ノーマル画像のサイズを用意して、画像URLを取得して、タグ内に振り分けるということです。

★

大きな画像を扱うときは、画像の圧縮も忘れずに。速さに関しては、今以上にネット回線が速くならないとどうしようもないですね。
まだいろいろバラバラに散らばってますが、じきに技術的にもまとまってくるのではないかとおもいます。

ご参考にどうぞ。

関連記事