What's the best way to use the Featured Image for responsive web design?

Written by  on November 20, 2016 

I have a brilliant idea and since WordPress already takes care of some of the work, I just need to find a good method to make this work.

I am working on a project that needs to be responsive to all devices, whether a desktop PC or mobile gadget. Thus, I want the images to also be responsive, meaning that mobile devices shouldn’t load 50KB+ images.

For each page or post, I can add a Featured Image using Post Thumbnails which, at full-size, the image is about 950×250 at ~60KB. If I load the website on an iPhone/Android, I wouldn’t want the ~60KB image to load, but instead would like the small thumbnail to load in its place.

The default method for responsive images is to make the width of the image 100% of the parent container, thus it will resize automatically if the parent container is also resized. Not the best method for larger images.

I thought about trying out Filament Group’s responsive image script ^(http://www.netaksharee.com/goto/http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/), but I tried it and it didn’t work right. One way this could be accomplished is through user-agent detection, but I’d rather not do this method either since user-agents can be spoofed.

Here’s another method for resizing images on the fly ^(http://www.netaksharee.com/goto/http://adaptive-images.com/), but this seems to be duplicating what WordPress has already done.

If there is a way of doing this with the Media Gallery images that WordPress has be default, with all the resized thumbnails already created, that would be preferable.

Category : Wordpress

Tags :