The CSS would scale it down to fit inside the 700px div, but that would still result in a lot of wasted data and time loading that overly large image. We could then use the next default size up, which is master, but this would then output that image at 1920px wide, which is way too big for this use case. However the large size outputs the image at 600圆00px, which is slightly too small for our 700px wide div. We want to place it inside an element that is 700px wide. To demonstrate this, let's say we've got a product image that has an original size of 1920x1080px. The best way to avoid this is to ensure that your image sizes are optimized for your use case. Which, of course, is bad for user experience and SEO. While this will ensure that the page shows a larger image, the problem is that sometimes it can be larger than the theme needs it to be, and when this happens on a number of images on the page it results in wasted data and an unnecessary increase in page load time. That can often be too small for certain situations, so often a developer will use one of the standard larger sizes such as grande or master. Which renders a product's featured image at 100x100 pixels. Rather than going through and having to adjust the size of all of your images directly, the simplest way to output an image in Shopify is using the img_url filter like this: It may seem obvious, but one thing that can be easily missed or not fully considered is the size at which your images are rendered. So the initial page load shows a fairly small and highly compressed version of the image, to reduce the initial data usage on initial load, and from there it renders the image in higher detail with successive passes. Generally speaking, I highly recommend progressive JPG as much as possible, since this provides an additional performance boost by loading the image in several stages of progressively higher detail. It allows you to output your images as either a JPG or a progressive JPG. One useful feature that you may not be aware of is the format parameter when outputting shopify images. Images are usually the main contributor to page load times and since Shopify stores, especially things like collection pages, often use a lot of them on pages, it is vital to make sure you follow a number of best practices to ensure your images are optimized correctly, for better user experience and better SEO. People are surfing on their phones, on computers, on WiFi hotspots, so in the unbelievably fast-paced world of online browsing, even an extra second spent waiting for something to load can be enough to bounce a prospective customer. Load times are important, no way around that fact.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |