Hey guys,
So I am creating my site, however whenever I post my images in the Gallery section or in my logo, the photos come out blurry.
However, the original flie used to upload to Shopify is as clear as day and is not at all blurry.
After doing some research I learned that Shopify compress files to improve site speed, but what is the point having a fast site with blurry pictures.
Any help?
Hi @wholesalebraids ,
Congratulations on getting started on building your store! How exciting!
You’re right that Shopify compresses images to improve site speed, which is why we also provide a guide for Uploading Images which includes Best Practices. We also have a great blog post on Choosing the Right Image Dimensions that you might find useful!
Could you tell me a little more about what kind of theme you are using? And what kind of store you are building, please?
Hi Andrew, thanks for your response.
I am using the Debut theme and building a store which sells beauty products; so the photos really do need to be clear.
I have followed the steps on he best practices and tried numerous heights, widths and file types.
The only photos which are clear are on the product page, anything else just comes up blurry.
What else can I do, the photos need to be clear!
@wholesalebraids you can usually control that by selecting the optimal file type + size.
The best graphic format for logos is vector format (SVG). SVG graphics are infinitely scalable with the highest resolution and low file weight.
Ask your designer if your logo can be made into a vector graphic in SVG format.
If not, then the next best option is PNG. PNG is ideal for graphics (logos, icons, etc that aren’t able to be created in vector format), where JPG is ideal for photos (product photos, for example).
If you’re using a vector image (SVG), the size doesn’t matter, because it can scale up or down according to the container and not lose resolution.
If you’re using PNG, I recommend sizing the logo to exactly 2x the maximum size of the container it will go in (the size it will show on the website). For example, if the space where your logo goes is 150px, then resize the image in a graphics editor to 300px, then upload to Shopify.
If you’re not sure how to measure logo size, you can either inspect the element using dev tools console (if you don’t know how to use that, there are steps here: https://speedboostr.com/finding-and-fixing-console-errors)… or alternatively if you’re on mac you can do a screenshot where you drag the area, or on any computer you can use a rule plugin for your browser.
Our team focuses on Shopify optimization and development, if you need help with this or anything in the future feel free to reach out at speedboostr.com/contact.
That’s strange to hear @wholesalebraids - could you please give me your store URL so that I can have a look at it for myself?
While I wait on you to share your link so I can get a better understanding of what’s going on, have you considered transitioning to our Online Store 2.0 with a theme like the Dawn theme which is our next generation, next-level theme?
While all our themes are built for optimum results whatever the device, our Online Store 2.0 offers you more flexibility and better customization options. It may just make building your brand that little bit easier than your current Debut theme.
Just a thought! I look forward to hearing from you.
Apologies for the late response Andrew.
My url is http://www.wholesalexpressions.com
Would switching theme improve photo quality however?
What kind of options are we talking about?