How should I handle Images?

Images are crucial to the ecommerce experience, but if handled incorrectly, can be detrimental to the site performance and the customer’s experience. We’ve compiled some of our best practices concerning images in our documentation - named “Handling Images”.

In addition to the callouts from the documentation shared above, here are some considerations for your handling images on your PWA:

• For Nuxt 

  • Instead of using nuxtjs/cloudinary for image optimization, try using nuxt/image. The package is leaner and also supports cloudinary as an image provider.

  • Be sure that <nuxt-image> is properly being used. When <picture> is used, <nuxt-picture> should replace all image elements. More info here: <nuxt-picture> | Nuxt Image 

  • Review instances where you may be using <img> tags instead of <nuxt-img> tags

  • Consider using priority in key places to reduce Largest Contentful Paint for things like the Homepage and images “above the fold” on PDPs & PLPs 

• For Next

  • Use next/image. Check out the features here.

  • Consider using priority in key places to reduce Largest Contentful Paint for things like the Homepage and images “above the fold” on PDPs & PLPs

• For best accessibility results, images should have alt text set

Note: This is not just an implementation task. Great PWA management continues these best practices to ensure customers continue to be delighted with their experiences on merchants’ websites.