Solved

What is the ideal image size for Shopify without compromising quality?

Nickahola
Shopify Partner
74 1 11

Hi.

Ive spent hours on this and I can't make it make sense. I've searched the forum but I'm none the wiser.

A supplier sent me their images but they exceed 20mp so I've ran them through bulk resize photos but theyre still coming out far too big. I've sized them at 1024 x 1024 but theyre coming out huge compared to other sites so i've made them 800 x 600 but then the quality of the image suffers.

I just don't know what image size without making the quality bad.

I've tried SEO image optimizer & sizer but that doesnt do a thing.

https://www.silverstork.co.uk/collections/east-coast/East-Coast

I also don't know the collection is broken down into 'east coast' twice - Id like to get rid of the lower case directory.

Thanks!

Accepted Solutions (2)

dmwwebartisan
Shopify Partner
12279 2546 3693

This is an accepted solution.

@Nickahola 

- Step 1: Go to Online store > Themes > Actions > Edit code.

- Step 2: Go to Assets > style.css and paste this at the bottom of the file.

@media only screen and (min-width:768px){
.product-photo-container>a {
    position: relative;
    display: block;
    width: 50% !important;
    margin: 0 auto;
}


.owl-carousel .owl-stage {
    max-width: 385px !important;
    width: 100% !important;
    margin: 0 auto;
}

}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

For myself, if you want to change the width of the container at all you just have to change the max-width property for the product-wrapper class in your style.css file toward the bottom of the file.

.product-wrapper {
  max-width: 1000px;
}


You'll just change the pixel value to be whatever you want. I can't speak on @dmwwebartisan 's edits

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 19 (19)

Ninthony
Shopify Partner
2329 350 1023

You're linking to your collection "east-cost" and also products tagged "East Coast" - that's why you're seeing it show up twice. You can't get rid of the lowercase east-coast in the URL because that's how shopify handle's work, also having uppercase letters in a url is just unusual in general.

https://www.silverstork.co.uk/collections/east-coast

What's the problem with your images though? They look fine to me. If you think their grid is taking up too much space, I assume there's a setting in your Customize editor on your collections pages to show more products per row, that would make your product cards smaller. Right now they are taking up 25% of the screen space so it's likely set to 4 per row.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Nickahola
Shopify Partner
74 1 11

Hi. Thank you for your reply.

The tag fixed the directory issue. That fix has been noted, don't tag in the menu editor. One day i might get the hang of collections, they confuse me so much.

Yes, I found the option to edit the number of products on a row, thanks.

As for the product pages, I think the images are way too big.

My product on my product page takes up half the width of the screen and the full height.

Nickahola_0-1632423315109.png

Yet any other regular website has an image that doesn't take up anywhere near as much screen/page space:

Nickahola_1-1632423439953.png

I don't know how to get my images to be reduced in size like this.

 

Ninthony
Shopify Partner
2329 350 1023

I don't think it's too big, but a way you'd be able to change that is to set a maximum width to your containing div. What theme are you using? Probably a premium theme. I think you may be able to get away with adding this to the bottom of your theme's css file:

.template-product .wrapper {
    max-width: 1000px!important;
}

 

You can change the pixel value to whatever you want. Let me know if that doesnt work, if it doesnt I can request access to your themes and make the change for you, at the moment I just can't tell you where exactly to put the code without looking myself.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Nickahola
Shopify Partner
74 1 11

Thanks. Tried that but it didn't change a thing.

I'm using the susie theme...

Ninthony
Shopify Partner
2329 350 1023

Would you like me to request access to your themes and take a look for you?

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Nickahola
Shopify Partner
74 1 11

If possible yes please that would be great thanks 

Ninthony
Shopify Partner
2329 350 1023

Ok I requested access. You should get an email to approve or deny me.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Nickahola
Shopify Partner
74 1 11

I think the request has been approved now 

Ninthony
Shopify Partner
2329 350 1023

Alright cool, I was busy the rest of the day yesterday but I'll take a look at it here in a bit.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Ninthony
Shopify Partner
2329 350 1023

Ok I added a max width to your product wrapper. You can find the style in your style.css file in your assets folder if you scroll to the very bottom. I set it at 1000px, just change it to whatever you'd like. Just preview the Ninthony Editing theme. Then if it looks good to you, publish whenever.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Nickahola
Shopify Partner
74 1 11

Thanks! It looks better already. That's a great help. I would never have figured it out!

Does this now apply to every product I have/will have in my store?

 

dmwwebartisan
Shopify Partner
12279 2546 3693

This is an accepted solution.

@Nickahola 

- Step 1: Go to Online store > Themes > Actions > Edit code.

- Step 2: Go to Assets > style.css and paste this at the bottom of the file.

@media only screen and (min-width:768px){
.product-photo-container>a {
    position: relative;
    display: block;
    width: 50% !important;
    margin: 0 auto;
}


.owl-carousel .owl-stage {
    max-width: 385px !important;
    width: 100% !important;
    margin: 0 auto;
}

}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Nickahola
Shopify Partner
74 1 11

Thanks! Does this fix the height too?

Do I still need this code now Ninthony has fixed the width?

dmwwebartisan
Shopify Partner
12279 2546 3693

@Nickahola 

Please add provided css by me i will check again

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Nickahola
Shopify Partner
74 1 11

Hello. I have added your code and publushed the draft, it looks to me like it has fixed the problem. Thanks!

So this will apply to all products I upload in the future?

If I want to change the size at all, which values do I change in the code you provided?

Thank you again

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

For myself, if you want to change the width of the container at all you just have to change the max-width property for the product-wrapper class in your style.css file toward the bottom of the file.

.product-wrapper {
  max-width: 1000px;
}


You'll just change the pixel value to be whatever you want. I can't speak on @dmwwebartisan 's edits

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Nickahola
Shopify Partner
74 1 11

Thank you! It looks a lot better now than it did.

I will await the answer to the other piece of code too. Thanks!

Ninthony
Shopify Partner
2329 350 1023

No problem, glad it helped.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
KARIN_SWEDEN
Visitor
2 0 0

Hi there, I have tried this as well, and I can´t find the style.css in the code. Maybe I am totally off, but I have the same image size problem in the Pipeline theme that drives me nuts. I really wish to get help. 🙂