Responsive web design is awesome stuff but a lot of people have the valid concern of driving things like images to mobile devices over 3G.
With just a straight responsive web design you will be using high quality images for your main website which scale down as you get into the the mobile versions of your design.
These still use those large images.
So what can you do?
One sollution for some of these images is actually straight forward and with one of the recent features from BC quite clever.
{system_visitorDeviceClass}
This will render: mobile, tablet or desktop
There has been some Demo's already showing how you can drive different stylesheets with this tag but you can apply the same concept to images.
Create folders in your website like the following:
/mobile/images/
/tablet/images/
/desktop/images/
You can probably see where we are going with this.
Your desktop images will be your bigger higher quality versions and your mobile images will be a lot smaller.
An image you use in a template, such as a logo for example would look like this:
{system_visitorDeviceClass}/images/youglogo.png
Depending on the device your on, this folder will be one of the folders you created thus issuing a unique image per device. If you scale a window on your PC or Mac you will be using the same large scale image and see your reponsive design take shape but for your mobile or tablet device they will be pulling those more optmised and scaled images
This does not cover all cases, it would be difficult to manage in terms of client use for things like webapp item images for example but it goes a long way to help when considering 3G perfomance.
Comments