PWA in Magento – how do your images look?Pradip Shah
Progressive Web Apps (PWA) in Magento opens a new opportunity to improve image quality on eCommerce websites. Use of good quality images has been known for a long time to be the a key factor in digital experience and hence conversions. In recent years many factors have changed that requires a relook at how images are served. These factors include :
- Shoppers increasingly use mobile devices for eCommerce
- The vast improvement in the ability of mobile devices to show high quality images
- Improvement in the mobile internet connectivity speeds with 4G and above
- Improvement in compression formats with introduction of webp
- Advancement in responsive UI technology ranging from HTML picture tag and srcset attribute to PWAs that increase the application awareness of the ability of the mobile device
Through PWAs in particular, the app knows enough of the device to decide what pixel ratio as well as width of the image to get, thereby improving displayed image quality to the best possible.
PWA in Magento is now live. To see a curated list of modern eCommerce sites see https://headless.page/.
Analyzing www.hartsofstur.com for image quality
I picked a magento site and analysed for image quality. The site is the beautifully made. The site looks like a standard magento website – except that on click, the page does not seem to refresh (though the address bar changes URL) – only the content does. That is nicely done.
This site is a PWA created using Deity Falcon – a headless open source library built with ReactJS, NodeJS and GraphQL.
The Category Page
When you navigate to a category listing page from the menu, the category view uses API to get details including images.
The API URL for a category looks like this https://www.hartsofstur.com/api/catalog/products/57. (A real URL has layered navigation and other filters appended).
Such a URL returns category information as json. Let us review a snippet below :
See the “thumnail_url” (3 lines below the highlight) in the json is a standard Magento image URL from the cache. The image comes from this API for each element. The thumbnail URL is not device aware as no hint of the device was passed to the category API.
The website seems to return the same image URL (image size 600×600) for any sized device as shown below.
600×600 image is resized to 165×165 in html
600×600 image is resized to 250×250 in html
Device Pixel Ratios
Using higher Device Pixel Ratios, todays mobile phones give a very high quality image display experience to users. HTML tags have been enhanced to allow their usage. However, many eCommerce sites do not use such features.
The other notable hosting of this website is that it does not use a CDN. Use of CDN is every more important for PWAs.
Developing PWA for Magento?
Talk to us about how our hosting stack which includes a image generator, can improve the quality of images you display.
Here is how our stack compares with default Magento for image generation.
|When is an image generated?||Pre 2.3, synchronous with frontend
2.3, synchronous with product save
|Asynchronous – queued on product save|
|Webp support||No support||Supported – needs img tag change|
|High resolution 2x, 3x, Retina display||Possible with img tag change – but makes synchronous problem worse||Possible with img tag change – asynchronously generated|
|Other image optimizations||Not possible||In the roadmap
such as progressive jpeg
During the demo we will show you how the luroConnect stack can help your website.
- Improve the quality of images displayed on your website.
- Block any malacious hits to the site
- Divert admin traffic to another server
- Show what a Disaster Recovery Plan can do
- See site performance on a dashboard
- Review your current server size and suggest improvements to gain performance and/or reduce costs of hosting (a $100 value)