category
oscprofessionals - Blogs - How to Handle the Opportunity “Proper Size Images” in Shopify
Optimizing Shopify Images for Peak Performance: Properly Size Images
Nitin & Bhavesha | December 6, 2022 | 5 min read
The following points outline considerations regarding the optimization of “Properly sized images”
Managing this opportunity effectively
Implementing responsive image techniques
Delivering images in appropriate sizes
Ensuring correct width and height dimensions
Unlock the potential of your Shopify website by addressing the critical aspect of image optimization. This comprehensive guide delves into the strategic handling of “Properly Sized Images” to enhance site speed, responsiveness, and overall user experience. Drawing from our extensive experience in executing over 50+ speed optimization projects on Shopify websites, we bring you actionable insights and best practices.
Site Speed Performance Analysis Tools
Following are some points related to the opportunity to “Properly sized images”
GSI assesses each page image by comparing the rendered size, accounting for the device pixel ratio, against the actual image size. If the rendered size is at least 4KiB smaller than the actual size, the image is flagged as failing the audit.
In your Lighthouse and Page Insight tool report’s Opportunities section, images lacking appropriate sizing are identified, accompanied by potential savings in kibibytes (KiB). To enhance page load time and conserve data, it is recommended to resize these images to their appropriate dimensions.
Clicking on the ‘Properly size images’ field reveals all images with potential for improvement, displaying both the potential savings and current resource size.
How to Handle “Proper-Sized Images”
Leverage the < img > tag’s src, srcset, and sizes attributes to ensure responsiveness. Tailor image selection based on the user’s screen width, optimizing the viewing experience.
Lazyloading and Preload: Implement lazy loading techniques to defer image loading until necessary, enhancing page load speed. Additionally, use preload attributes for essential images, prioritizing their loading for a seamless user experience.
Image Size Optimization: Transform the img_url width according to the viewport, passing it to the data-srcset with the appropriate Shopify image size. Avoid serving images larger than the version rendered on the user’s screen to save bytes and expedite page loading.
Advanced Techniques:
Utilize the srcset attribute to define a set of images for the browser to choose from, optimizing loading times based on screen size.
Leverage the tag withand tags to provide different sources for browsers, enhancing compatibility and performance.
Employ the Device Pixel Ratio to control image density, serving images at the correct resolution for every device.
Strategies to Resolve the Problem:
Serve Responsive Images: Ensure your images adapt seamlessly to different screen sizes, enhancing device user experience.
Image CDNs: Implement Content Delivery Networks (CDNs) to deliver images, reducing latency and optimizing load times efficiently.
Replace Complex Icons with SVG: Opt for scalable vector graphics (SVG) for complex icons, enhancing performance and reducing file sizes.
Utilizing the ‘srcset’ Attribute
The ‘srcset’ attribute empowers the definition of a set of images from which the browser can intelligently select based on varying screen sizes. This dynamic selection enables the loading of smaller image versions on compact screens, thereby optimizing page loading times.
Consideration of Aspect Ratio
The aspect ratio of an image or screen is delineated by two numerals separated by colons, denoting width and height, respectively. This ratio is crucial in defining the proportional relationship between these dimensions.
The <Picture> tag
<picture> tag contains both <source> and <image> tags. In this case, the attribute value is set to load the more appropriate image.
This <img> element is used as the last child element of the picture declaration block. <img>elements are used in order to provide backward compatibility for older browsers, or if none of the source tags are compatible.
In the same way as <video> and <audio> tags, the picture tag allows us to include different sources, and the first one that matches the preferences will be used.
As an alternative, the pixel density can be used within the srcset attribute of a source element.
The Device Pixel Ratio (DPR) provides granular control over image output density, ensuring images are served at optimal resolutions for diverse devices. This strategy involves specifying different sources for varying DPR values, allowing for tailored image delivery based on the device’s pixel density.
Example
A element, styled with a class defining a 16:9 aspect ratio, showcases a responsive image loading scenario. Source tags with media queries cater to different viewport sizes, each specifying appropriate image sources and resolutions. This strategic approach ensures an optimal visual experience across devices.
Example
For those mobiles whose DPR is 1: iPhone4
Here sizes is 336px so the srcset will display the very next image size which is 400w (400px x 400px)
Reduced Bounce Rates: Users are more likely to stay on a website that loads quickly, reducing bounce rates and improving engagement.
Conclusion
Elevate your Shopify website’s performance by embracing advanced image optimization strategies. By adopting responsive design, lazyloading, and leveraging the latest web technologies, you enhance user satisfaction and position your site favorably in search engine rankings. Stay ahead in the digital landscape by prioritizing the proper handling of images, a pivotal element in achieving peak website performance.
Skip to content
