In this article, we are going to take a look how to display a different image on mobile devices (phones in this case). While there is a CSS approach to this as well, with CSS you aren’t really displaying another image on mobile. You are loading two images and only showing one. To reduce to server load, we only want to load one image.
Mobile vs Desktop
As you probably are aware, mobile devices like iPhones and others, have a very different resolution compared to laptops and desktop machines. If you aren’t one of those people, who browses the web holding the phone landscape, the dimensions are reversed compared to laptops and desktops. For laptops, normal resolution width is somewhere around 1366 pixels, where as phones have a resolution width below 400 pixels. Because of this, there are various reasons why you wouldn’t want to display the same image on all devices.
Smaller images improve page load
Usually, but not always, the mobile internet connection isn’t that great and the data plans aren’t unlimited. Smaller images are faster to load and your visitors consume less data on their data plans. This leads to better page speed and therefore also for improvement in the user experience. It may also boost your SEO. And since phones aren’t able to display the picture in full resolution anyways, it is rather pointless to load the same image on mobile than on desktop or laptop. While it is true, that some some devices are capable of showing a higher pixel density, you would still be facing the dilemma with the phones being mainly used in portrait position.
Setting up image sizes
Instead of manually doing any cropping, we will set the different sizes ourselves in our themes functions.php file. In this case, we will need two image sizes. The smaller image will be displayed on smartphones only, tablets can use the same the same image as
/* Custom size for WP medium images */ update_option( 'medium_size_w', 750 ); update_option( 'medium_size_h', 250 ); update_option( 'medium_crop', array( 'center', 'center' ) ); /* Custom size for WP thumbnails */ update_option( 'thumbnail_size_w', 375 ); update_option( 'thumbnail_size_h', 250 ); update_option( 'thumbnail_crop', array( 'left', 'left' ) );
How to detect the device in WordPress
To detect what device the user is using, Mobile Detect is a nifty solution for this. It is a lightweight PHP class, that detects mobile devices (including tablets). Everything you need, is included in one PHP file. Include this PHP file in your WordPress theme.
Using Mobile Detect
When you need to use the mobile detect, just require the php file and detect the device.
require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect;
Requiring the file once, ensures that it isn’t required more than once.
<?php if( $detect->isMobile() && !$detect->isTablet() ):?> /* If user is on a mobile device, excluding tablets */ <?php $thumb = get_the_post_thumbnail_url($post->ID, 'thumbnail');?> <?php else:?> /* User is not on a mobile device (smartphone) */ <?php $thumb = get_the_post_thumbnail_url($post->ID, 'medium');?> <?php endif;?>
Result – WPTipster website
WPTipster modified the appearance throughout the site on mobile as different featured image is now being displayed on single post, category page and latest posts feed. What do you think about the change?
Banner owl: Designed by Freepik
iPhones mockup: MediaLoot
