Scaling images on PDP level

[scruffandco]

Hello,

Trying to figure out why my images aren't scaling on a PDP level. I have the 'image fit' option to scale, and this works perfectly on a PLP level and images fit. But when going into a product, they go into a crop type mode to cuts off the images. Any ideas how to fix that?

[BernadetteA]

Hi @scruffandco 👋

It sounds like you may just need to change the ratio display, but can you post a link to the page with the image you are referring to, or post a screenshot if it is within the site editor? 

Thanks in advance! 

[scruffandco]

Hi @BernadetteA screenshots here for you. So as you can see, in the editor all looks fine. And All looks fine on the plp too, but then when you click into the product (not all) it then crops the edges?  

[Sineaid]

Thanks for the screenshots @scruffandco!

It certainly looks as if the crop and scale settings are optimised for your Shop All page. 

If you haven’t already, could you please try re-publishing your site. Online > Website > Edit Site > Publish.

If the issues persist, would you mind sharing a link to your site so that we can dig a little deeper? 

[scruffandco]

Hey @Sineaid, still looks like it's doing it annoyingly. Sure: https://www.scruffandco.com/product/ruffwear-front-range-leash-blue-moon/2515?cp=true&sa=true&sbp=fa... / https://www.scruffandco.com/s/shop

[Sineaid · Accepted solution]

Thanks for that @scruffandco

We’ve taken a look, and it would appear that the images you’re using are 1280x853 pixels. Our image guidelines suggest 2,000x2,000 pixels for the best fit (for item images). So, we’d recommend resizing the images and uploading them again to avoid the cropping issue moving forward.

There are a few best practices you can follow for image sizing, depending on where you intend to display a specific image. 

Non-background images:

• The best approach for non-background images added to any page of your site is to use JPEGs that are no more than 1,000 pixels on their longest side.
• For high quality images, we recommend using a photo hosting site made for photographers (e.g. Flickr.com) and embedding the images onto your site from there. We don’t design around larger, uncompressed, high-quality images because we need to host millions of images from millions of users. As a result, third-party image hosting can be a better way to make sure your image quality doesn’t go down.
• Learn more about customizing images and backgrounds in Square Online.

Background images:

• For images that are a part of your site design (e.g. header, banner, and background images), it’s best to use an image that’s at least 2,000x1,000 pixels. This makes the image large enough to look good at full width on virtually any screen size.
• Learn more about customizing images and backgrounds in Square Online.
• Learn more about understanding background images in our Seller Community.

Item images:

• A good rule of thumb is to use an image with a 1:1 aspect ratio that’s at least 2,000x2,000 pixels large. Anything lower than 2,000x2,000 could result in blurry images.
• If you’re taking product images on your own, check out our Square Photo Studio app, where you can take professional-looking, quality product photos directly from your mobile device.
• Learn more about product images in Square Online.

Category images:

• Category images should generally be at least 160 pixels on the shortest side and have a 4:3 aspect ratio.

Hope this helps!