“Responsive Images” refers to a web standard for serving different image sizes based on different contexts. Whether you’re browsing on a mobile device, on a laptop, or using a high DPI screen, responsive images make sure you get the best image to suit your context.
To help you deliver a highly optimized experience to all your visitors, we’re rolling out Responsive Image support to all VIP Go sites over the coming months. Read on to learn more about how to leverage (or opt-out of) this feature.
What will this look like?
The VIP Go Files Service will serve images with the srcset and sizes attributes that will be used to automatically serve images based on screen sizes and resolutions.
Currently, on VIP Go:
<img src="https://site.go-vip.co/wp-content/uploads/2018/09/image.jpg" width="660" height="371" />
With Responsive Images:
<img src="https://site.go-vip.co/wp-content/uploads/2018/09/image.jpg" sizes="(max-width: 660px) 100vw, 660px" srcset="https://site.go-vip.co/wp-content/uploads/2018/09/image.jpg 5472w, https://site.go-vip.co/wp-content/uploads/2018/09/image.jpg?resize=300,169 300w, https://site.go-vip.co/wp-content/uploads/2018/09/image.jpg?resize=768,432 768w, https://site.go-vip.co/wp-content/uploads/2018/09/image.jpg?resize=1024,576 1024w" width="660" height="371" />
What’s the timeline?
- On September 24, 2018, we’re going to enable this feature for all non-production VIP Go sites.
- On January 7, 2019, this will be enabled for all VIP Go sites, by default (unless you have opted out).
Implementation
Once this feature is available on September 24, 2018, it will be enabled automatically for all non-production sites. You can opt-out of using this by using this filter:
add_filter( 'vip_go_srcset_enabled', '__return_false' );
You can turn it on for production sites with the following filter:
add_filter( 'vip_go_srcset_enabled', '__return_true' );
What do I need to do?
I have my own responsive images implementation and want to keep using it
You can opt-out of our implementation by setting the vip_go_srcset_enabled filter to false. Make sure you do this for all sites that you don’t want to use this on.
I have my own responsive images implementation and want to switch to the VIP- supported version
Start by testing this on your non-production environments and keep an eye on the differences that might be present. You can also toggle between implementations via a query string parameter (e.g. ?enable-vip-srcset=1) to aid in this testing. Once your testing is complete, remove your implementation and turn ours on.
I want to implement responsive images
Test ahead of time on non-production sites, and then turn the feature on.
I don’t want to implement responsive images on my site
Make sure to turn the feature off using the vip_go_srcset_enabled filter before it goes live on all production sites on January 7, 2019.
Testing Guidelines
Testing this update on your sites will help make sure no unexpected image display issues present themselves when this is rolled out. You will need to test this on a VIP Go site as this feature relies on the VIP Go Files Service.
Here are some testing guidelines you can use:
- Make an inventory of the areas on your site that you will want to check
Example:
- Test using a variety of devices (mobile, small screens, high DPI, low DPI) to see if images are displaying as expected.
- This implementation uses the default image sizes defined in WordPress. If you have specific image size needed (maybe for a specific template, or a special use case), you can change them using these WordPress methods:
Adding: add_image_size
Removing: remove_image_size
If you have feedback or questions related to this update, please open a support ticket with details and we will be happy to assist.
WordPress VIP Lobby 
You must be logged in to post a comment.