Responsive Images

To add to the answer from @cristian.raiber, there is no function in WordPress or php to detect screen sizes, and there will in all probabilty never be such functionality. Php runs server side, which runs before clients side which is browser side. As for php, and for that matter WordPress, I cannot see any future implementation of any kind of function to handle such detection in any form of predictable and reliable way.

There is just no fool prove way to make this work, no matter how you look at it. Server side operations is predictable and something we can trust as it does not rely on end user input, and most importantly cannot be manipulated by the end user. Client side operations can be maniplulated.

Look at the following client side variables and manipulations:

  • Cookies -> Cookies can be deleted or blocked by the user, cookies can also be blocked by state or country laws

  • jQuery -> End users can disable jquery anytime

  • Browsers -> Sites behave differently in different browsers. End users can disable browser detection

Client side solutions will work in some cases, in other cases not based on the above (there are other points not mentioned as well).

You could use wp_is_mobile() to detect mobiles (it only works on mobiles, not tablets) and then dish up the correct image size accordingly, BUT, the following should be noted

  • As the above points on client side operations, this is also an unreliable function as it also depends on client side operations. In my opinion, a mickey mouse function

  • It does not detect screen sizes, and it only detects mobile phone devices. It does not work on tablets

CONCLUSION

The only proper solution to this is to optimize your images as best you can (this require proper planning and correct image sizes to be dished up according to content size. Don’t load a 700px image when your content max width is 500px) then let the browser resize the images accordingly. I know this slows loading times as browsers use a lot of resources to resize images, but at least you can be able to serve content reliably to the the end user

Leave a Comment