suggested shopping cart iage sizes..?

Just a quick question....

What should the ideal image sizes be and what format works best?

What are you guys using in your shop?

Thank you

[Note: remember to include site URL, ZC version, list of plugins, PHP version, etc ... read the Posting Tips shown above for information to include in your post here.
And, remove this comment before actually posting!]

Start here. https://docs.zen-cart.com/user/images/images_howto/

Try to have images that are grouped together be the same size and layout (i.e., don't mix portrait and landscape images on a product). For products and categories, pick a standard heighth or width and go with that. Using a standard heighth will show multiple items (new products) better in templates that aren't prepared for different heighths.

If you use banners in the logoWrapper or similiar situations, remember that they will need to fit on a mobile phone as well.

I'm sure others have things they always use to determine the right image size for the location the image is being used.

dbltoe:

Start here. https://docs.zen-cart.com/user/images/images_howto/

Try to have images that are grouped together be the same size and layout (i.e., don't mix portrait and landscape images on a product). For products and categories, pick a standard heighth or width and go with that. Using a standard heighth will show multiple items (new products) better in templates that aren't prepared for different heighths.

If you use banners in the logoWrapper or similiar situations, remember that they will need to fit on a mobile phone as well.

I'm sure others have things they always use to determine the right image size for the location the image is being used.

Thank you so much for your reply.

So, at this stage i have a collection of various sized images. I know that they will cause me issues so what i am tryung to do now is to standardise all the image zixes eg 800x800 and then to make their size small eg 100kb etc.
I understand that today most people will have access to phones and tablets so the images will need to be small and fast loading.

I will have a look at the link you have shared with me and take it from there.

Thank you so much for your help.

IMHO, 800 x 800 is too large. 500 x 500 is probably the largest I would go. The largest iPhone screen is only 430 px wide in portrait.

Remember too that processing time is used to resize every image before it's presented to the browser.

Take a look at https://brothersandnobles.com/index.php?main_page=index&cPath=198. That's images at 200 px in height. And that page works well in both mobile and desktop. It's bootstrap and responsive images is built in.

Analyzing page load with Chrome's lighthouse, the site scores 98, 98, 100, 92 Yet, the reason for the first 98 instead of 100 is..... Image size! And, it's the "smallest image" on the page that needs to be resized. (Grotto Butcher Apron is ~280K while the Grotto Mason 1/4 Zip Sweatshirt is only 77KB.

The problem is that even mobile phones take images at DPI settings way larger than they need to be when shown on a desktop or even the phone itself.

One of the most used tools in my arsenal is IrfanView. Open any of your images with it and hit CTRL + R. Set the height to 300 and the DPI to 72. Click OK and save as (CTRL + S) a png file.

You'll be amazed at the difference in size but you'll not be able to tell the difference in quality on any desktop or mobile.

>800 x 800 is too large.

I find some of our suppliers have started using enormous images like 1200x1200 for new products. Ok, for zooms I guess.

torvista:

I find some of our suppliers have started using enormous images like 1200x1200 for new products. Ok, for zooms I guess.A monitor with horizontal resolution of 2048px generally only has a 742px vertical vewport with the browser header present.

One with 1920 pixels horizontally still only has a vertical viewport of 954px.

So, any image taller than 742px will either scroll off the page or be forced to be resized by the browser, template, or some other image program like IH.

That's why I always recommend no larger than 500 heighth and DPI of 72.

Which images do you mean?
The "shopping cart image"?
The main product image?
Images in lists?

I would recommend to upload higher resolution images e.g. 1600x1200 and use IH.
I favour 912*684 for the moment.

Take a look here -> https://www.roller-aus-blech.de/index.php?main_page=product_info&products_id=3342

I want to compete at various points with the two largest competitors so I have to have good images.

The main "large" product image also loads in resolution for "large", while being shrinked down via CSS.
Otherwise on mobile the image would have a resolution of "medium" only while being shown full-width.

That's not enough for quality orientated presentation. So users on mobile do get the full resolution shrinked to the viewport of course.

Important to understand is that mobile viewports are small, but the true display resolution often is far higher.

The impact on loading times is so little with higher res images (as long the Webhosting is solid of course)
It is far more the javascript that hurts when there are lots of images like 25 at my example product page

You also can see at the Front-Page that js hurts badly because because of the sheer amount of images. After 800ms fully loaded it takes even more 400ms to process on the device CPU.

Since everything revolves around the product(s), those are what I'm referring to.

dbltoe:

So, any image taller than 742px will either scroll off the page or be forced to be resized by the browser, template, or some other image program like IH.

As I stated before, there are basically three ways images can be adjusted for whatever monitor is being used. If you were not using IH, your perfoormance score would be in the eighties versus your current 99.

Boootstrap does an excellent job without IH as long as the image is not too big to begin with.

In your case, with my 2048x865 monitor, your image is rendered at 640x480. It's the same for 1920x1080.

Therefore, if I use a smaller image to begin with, I can drop the IH and just let something like the current bootstrap take care of the sizing for other images.
So, let's compare your product (with responsive_classic and IH) to https://brothersandnobles.com/index.php?main_page=product_info&cPath=179_205_189&products_id=582 (with bootstrap)

Your page has a speed index of 1.0s while the B&N has a speed index of 0.6s. Part of the 1.0 is the number of images being managed, but still, that's almost double.

Your product image is rendered at 640x480 with the larger image starting at 888x795, then 663 high, then 635, then finally at 846x635 by IH.

B&N's product is presented at 274x300 (main reason for the 0.6 speed index) and the larger image at 600x656 (they went with max width of 600 for images) and more than fills the screen.

While I agree that putting the best foot forward is ideal, the larger image is where I would put my emphasis after making sure the page "paints" as quickly as possible.

The emphasis should be put on resolution vs size. https://largeprinting.com/resources/image-resolution-and-dpi.html is a great article to discuss screen resolution versus print resolution.

Without a link to a competitor of yours, I can't compare their images to yours but you can see the importance of size and screen resolution. Thus, the reason for my recommendation of a standard max of 500 width for portrait images and 500 heighth for landscape images and a DPI of 72. Anything more and you run into overkill and overlap. i.e., if your Top Picks Popular Brands and Experience the ESC Circuit... were half the size, the customer would have access to a lot more data.

My only advice is think big.
You will see awesome shops have large images because they want the user to be able to us the full screen to watch a product.

If you think your images are ugly and you don't want to present them large then invest in better images.

You're right with the 640px. You're so at details. I remembered it just different.
The medium is set to 640px but I make it to fit on FHD desktop @503px and an intermediate viewport between 1367 and 1600 with 400px for those who use Desktop but who have Deskto and/or browser scaling enabled.

For the preview image I'm satisified with 503px. For the "large" image I decided to go with 912x684px. I had to redo thousand images because in 2013 they looked ok at 640x480 but when you make them big every uglyness (shadows, sharpness) becomes so dominant.
I would even prefer to load large at 1024px but some of my images don't have the physical resolution. So uglyness would become visible. E.g. this item is so small that I crop exactly to the minimum real resolution. The reasons are no macro objective but a wide angle with very close distance in combination with a 4MP sensor. In 2013 i thought this would be enough forever. It still is. But it's at the edge.

If you like to see to take a look at my largest competitor: sip-scootershop.com/en/product/clutch-sip-race-supersport-23-teeth-primary-62-teeth-vespa-125-vna-ts-150-vba-super-180-200-rally-px80-200-pe-lusso-t5_9344023G

dbltoe:

IMHO, 800 x 800 is too large. 500 x 500 is probably the largest I would go. The largest iPhone screen is only 430 px wide in portrait.

Remember too that processing time is used to resize every image before it's presented to the browser.

Take a look at https://brothersandnobles.com/index.php?main_page=index&cPath=198. That's images at 200 px in height. And that page works well in both mobile and desktop. It's bootstrap and responsive images is built in.

Analyzing page load with Chrome's lighthouse, the site scores 98, 98, 100, 92 Yet, the reason for the first 98 instead of 100 is..... Image size! And, it's the "smallest image" on the page that needs to be resized. (Grotto Butcher Apron is ~280K while the Grotto Mason 1/4 Zip Sweatshirt is only 77KB.

The problem is that even mobile phones take images at DPI settings way larger than they need to be when shown on a desktop or even the phone itself.

One of the most used tools in my arsenal is IrfanView. Open any of your images with it and hit CTRL + R. Set the height to 300 and the DPI to 72. Click OK and save as (CTRL + S) a png file.

You'll be amazed at the difference in size but you'll not be able to tell the difference in quality on any desktop or mobile.

Thank you for your reply.
You are 100% right, i think my calculations may have been a bit too wild.
Sticking to a smaller size is going to be more benificial.

I will try that now and let you know what happens.

Rhank you

Shop Suey:

Which images do you mean?
The "shopping cart image"?
The main product image?
Images in lists?

Mainly referring about the product images showing in the shop front.

Be aware that high quality sites like ebay, which are successful companies are using 1000px in height (tested today at ebay.de)

Shop Suey:

The impact on loading times is so little with higher res images (as long the Webhosting is solid of course)
It is far more the javascript that hurts when there are lots of images like 25 at my example product page

You also can see at the Front-Page that js hurts badly because because of the sheer amount of images. After 800ms fully loaded it takes even more 400ms to process on the device CPU.

Thank you. I have seen what you have done on your website - very nice.

I was using IH4 on the Bootstrap template. I then upgraded my bootstrap template and that is where i started having issues with the images.

Since then i have downgraded my template to a previus version and everything is working well.

I then noticed that my image sizes were not standard, some images were smaller and other bigger.
So, my objective if to streamline my site and make all product images the same size.

Thank you for your help.

dbltoe:

Since everything revolves around the product(s), those are what I'm referring to.

As I stated before, there are basically three ways images can be adjusted for whatever monitor is being used. If you were not using IH, your perfoormance score would be in the eighties versus your current 99.

Boootstrap does an excellent job without IH as long as the image is not too big to begin with.

In your case, with my 2048x865 monitor, your image is rendered at 640x480. It's the same for 1920x1080.

Therefore, if I use a smaller image to begin with, I can drop the IH and just let something like the current bootstrap take care of the sizing for other images.
So, let's compare your product (with responsive_classic and IH) to https://brothersandnobles.com/index.php?main_page=product_info&cPath=179_205_189&products_id=582 (with bootstrap)

Your page has a speed index of 1.0s while the B&N has a speed index of 0.6s. Part of the 1.0 is the number of images being managed, but still, that's almost double.

Your product image is rendered at 640x480 with the larger image starting at 888x795, then 663 high, then 635, then finally at 846x635 by IH.

B&N's product is presented at 274x300 (main reason for the 0.6 speed index) and the larger image at 600x656 (they went with max width of 600 for images) and more than fills the screen.

While I agree that putting the best foot forward is ideal, the larger image is where I would put my emphasis after making sure the page "paints" as quickly as possible.

The emphasis should be put on resolution vs size. https://largeprinting.com/resources/image-resolution-and-dpi.html is a great article to discuss screen resolution versus print resolution.

Without a link to a competitor of yours, I can't compare their images to yours but you can see the importance of size and screen resolution. Thus, the reason for my recommendation of a standard max of 500 width for portrait images and 500 heighth for landscape images and a DPI of 72. Anything more and you run into overkill and overlap. i.e., if your Top Picks Popular Brands and Experience the ESC Circuit... were half the size, the customer would have access to a lot more data.

That makes perfect sense and the viewer would get great results using his phone, tablet or even PV screen.

Thank you

Please no one get me wrong.
No one needs to use IH but for me it's essential

@amebb

IMHO prepare all your images locally with a proper aspect ratio.
Decide once what you want to use, eiter square, 4:3 or 3:2.

For a great result you need to should edit every image before you upload it. So the aspect ratio is not a question of your camera sensor but a decision of your webdesign styling.

Then upload them larger (I do NOT mean 6000x4000px) but as previoulsy mentioned 1600x1200 (for 4:3).
It wont't hurt your loading times when you use IH. IH creates the desired sizes and compression quality on the fly.

And as previously said image KB are not equal to JS KB.

If you're absolutely in reducing loading tinmes, the 1. chck whether your hosting is not the bottleneck and 2. reduce the amount of images and don't add more and more. This would raise the JS execution time which is far higher than the image loading time.

dbltoe:

Therefore, if I use a smaller image to begin with, I can drop the IH and just let something like the current bootstrap take care of the sizing for other images.
So, let's compare your product (with responsive_classic and IH) to https://brothersandnobles.com/index.php?main_page=product_info&cPath=179_205_189&products_id=582 (with bootstrap)

You compare my page with 25 images to a page with 4 (smaller) images?

I'm interested in comparisons but that's no "comparison".

Shop Suey:

You compare my page with 25 images to a page with 4 (smaller) images?

I'm interested in comparisons but that's no "comparison".Respectfully, you are not looking at what is happening in the background.

The page you provided (IIRC) resizes the image four or five times before it finally renders the image to the browser while the other site does only one.

Do the F12/right-click inspect thing to seee what I mean.