読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

A Simple Solution for Responsive Images Performance

WordPress RWD

It matters to consider responsive images performance especially when it comes to one page web sites with full background images.

Let's take a glance at how to do this.

First, you need to have two different size images at least. The one is for desktop devices and the other is for mobile. With 'Preview' Application in Mac OS X, you can make easily images small.

Next, write a script for detecting whether users use mobile devices or not. In this article, I write this with PHP.

<?php
function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

php - Simplest way to detect a mobile device - Stack Overflow

Lastly, add two images as a value of 'background-image' in style (or a stylesheet). Due to WordPress compatibility, I wrote this in inline style attribute.

<?php
<div class="full-width-image" style="background-image: url('<?php echo get_template_directory_uri();?>/images/<?php echo (isMobile()) ? 'hoge-mobile.jpg' : 'hoge.jpg'; ?>');"></div>