Why are my product images still too large after resizing?

[Nickahola]

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!

[dmwwebartisan · 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;
}

}

[Ninthony]

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.

[Nickahola]

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.

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

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

[Ninthony]

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.

[Nickahola]

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

I'm using the susie theme...

[Ninthony]

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

[Nickahola]

If possible yes please that would be great thanks 

[Ninthony]

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

[Nickahola]

I think the request has been approved now 

[Ninthony]

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

[Ninthony]

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.

[Nickahola]

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 · 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;
}

}

[Nickahola]

Thanks! Does this fix the height too?

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

[dmwwebartisan]

@Nickahola 

Please add provided css by me i will check again

[Nickahola]

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 · 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

[Nickahola]

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]

No problem, glad it helped.

[KARIN_SWEDEN]

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. 🙂