![]() It’s not uncommon to want to use a Shopify slideshow for your product pages. This should strike a nice balance between optionality but also manage the overall weight of the page.įrom a dimensions perspective, we’d suggest sticking to the 1920×1080 figure referenced above for Shopify banner images. If you’re choosing to use a slider for the hero section of your homepage, or other key pages on your website we’d encourage you to limit the number of slides you use to 3. However, it’s easy to overload these banners. Sliders should stand out, capturing your audience’s attention, much like a single hero banner image. If you do, you have to be careful about the slideshow image size. ![]() You might want Shopify slideshow images for various parts of your website. If you choose to implement a feature like that because it aligns with your products (think fashion, leather goods, ornate goods etc.) then the recommended size of 2,040px will be appropriate.ĬHAPTER five Best Picture Sizes for Shopify Sliders The only exception to this rule would be if you chose to use a zoom feature for products to focus on product details. Using the benchmarks we notated above for sizing requirements of retina images, this means you’d want the photo size of your product thumbnails to be somewhere between 600px to 1200px in both width and height. In most cases Shopify automatically will display the website images in a square format at around 300×300 or 600圆00px. Personally, we feel this is overkill in most cases. Shopify recommends square images for products, 2,048 pixels in width and height. You might think that Shopify product image sizes don’t matter because they show as thumbnails. You need to optimize your Shopify image for each product you sell on the platform. If you already have a batch of icons and logos in PNG or JPG format without an option for SVG you could use a service like this one to easily convert the files to SVG. Same goes for obtaining press or partner logos, try to find an SVG variant if you could. So if you’re purchasing a pack of icons, first check if they offer SVG versions of those icons. Even better, SVGs file size tend to be smaller than JPGs or PNGs on average. SVGs (Scalable Vector Graphics) is a lossless image file format that you can use for icons and logos instead of something like JPGs or PNGs.ĭue to the fact that these are lossless, they’re natively retina friendly because they’re designed to scale. However, we’d actually suggest approaching it a little differently. You could use the same approach we’ve outlined above for other images for icons and logos. How to Create Retina Ready Icons and Logos So using our example, we’ll need to save an image at 604×680 to maintain the right aspect ratio. Retina image sizes will be 2x the native image display. For our example, the display size is 489×340. Next, turn on the page ruler tool and measure the image you’d like to convert to a retina Shopify image. I suggest you start by installing a ruler tool for your web browser like Page Ruler Redux for Google Chrome. You’ll need to start by understanding what the native display for a recommended Shopify image on your website may be. How to Create Retina-Ready Shopify Product ImagesĬreating a retina-ready Shopify product image is quite simple. To make sure your Shopify logo image or feature image is just as sharp on that new Pixel or Galaxy as it is on a desktop, you need high resolution images (aka Retina images). Starting in 2011 with the iPhone 4S, smartphones, in general, have continued to improve display quality. Technologies like Apple’s retina display and other high DPI devices demand high resolution image format. They need to display in high quality everywhere. That means your optimized images need to look good not just on a regular or traditional computer screen. CHAPTER two Building a Retina Image for Shopify
0 Comments
Leave a Reply. |