More than half of your web store's traffic comes from mobile devices. These customers get a subpar experience if your store isn't optimized for their screens.
In the past, optimizing for mobile devices meant creating a separate webpage altogether. Today it's about developing a page that will feel at home on a screen of any size. The tools and the methods helping to achieve this reside under the umbrella term of responsive design. The web pages using it will move, resize and rearrange all the visual elements to fit better on a small screen.
The main staple of such page design is responsive images. The HTML code provides a set of links to image files of various sizes for a specific position on the page. The web browser then decides which file to download and display depending on the screen size. It saves bandwidth, improves the page's loading speed and responsiveness.
Responsive images in Shopify
Web store content is always rich with visual information. Employing responsive images will net you significant speed optimization.
The proper way to add them is to have a theme with built-in support for responsive images applied to your web store. Shopify themes, like the default "Debut", already employ this technique.
If you have a custom theme and want to check whether it supports responsive images, follow this guide.
Checking for responsive images using Google Chrome
- Open Google Chrome and navigate to a page of your web store.
- Right-click any large image and choose the "Inspect Element" option.
- Chrome Development Console opens and shows the HTML code for the element you clicked in the previous step.
- Look for the "picture style=" and the "source-data srcset=" elements nearby. You may have to expand them by clicking the corresponding grey arrow. The expanded section should contain links to several image files (see the screenshot).
If you can't find these elements, it means your theme does not support responsive images. Below is an example of such a page.
Adding responsive images to your web store
The best way to implement Responsive Images is to apply a Shopify theme supporting this feature. If you noticed that your theme doesn't use Responsive Images, you should consult with your theme developer regarding this feature. Sometimes it might be enough to update your theme to the latest version as developers constantly improve their themes add new features. Using responsive images is vital since the site loading speed is one of the most important metrics for SEO optimization.
If you have more questions, don't hesitate to write us an email at firstname.lastname@example.org. We are here to help you.