When Apple introduced the Retina display on their iPhone 4s and then later the new iPad and MBP Retina. Everybody had been fussing about making their site images ‘retina’ supported. What does it mean? It basically means that the images will look sharp on these devices, instead of blurry due to the higher pixel ratio of the devices’s display. This usually involves serving a 2 times size of the images used in the theme, done mostly via CSS.
When you are working with WordPress themes, for thumbnails or featured images, you’ll usually use the WordPress Post Thumbnail Code.
[php]<?php the_post_thumbnail( $size, $attr ); ?>[/php]
There are 1 or 2 solution to ‘How to make your theme retina support’ like this tutorial by WP Magnet but i was looking for a easier solution to make featured or thumbnail images in themes to be retina support or look sharp in mobile device that support retina display.
After checking on WordPress codex, i found that WordPress had a built in mobile detect which work great than alternate PHP Mobile detection. its the wp_is_mobile() function.
Using this code, i could easily create a condition where larger images can be display instead of small images when user using mobile device that support retina display when viewing the themes. All i have to do is create a post thumbnail call like this:
[php]<?php
if( wp_is_mobile() ) {
the_post_thumbnail(‘large’); //large or full
} else {
the_post_thumbnail(‘thumbnail’);
}
?>[/php]
that’s it, an extra condition check so user in mobile device will serve a sharper largerer and clearer images.
Downside or bad about this code
One of the downside from this code is that when loading larger or original images from mobile device, you will suffer somewhat slower loading due to increase of images size and time to take when loading in mobile device browser. My suggestion would be adding add_image_size() into your theme’s functions so that each time you upload featured images into your post, a larger and smaller ‘retina’ ready image can be created for the post_thumbnail call like this:
[php]add_image_size( ‘retina’, 768, 9999, true); [/php]
and use similar first code above but different image size:
[php]<?php
if( wp_is_mobile() ) {
the_post_thumbnail(‘retina’);
} else {
the_post_thumbnail(‘thumbnail’);
}
?>[/php]
Although this was not the ultimate solution to ‘retina’ support for your themes but it is a much easier step to make sure your images did not get blurred when user viewing your site in smaller devices. Hope you find this WordPress tips useful and let me know what you think and did it work on your end.