suggested shopping cart iage sizes..?

[amebb]

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!]

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

[amebb]

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.

[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....ndex&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.

[torvista]

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

[dbltoe]

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.

[Shop Suey]

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

[Shop Suey]

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/inde...oducts_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.

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

[dbltoe]

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

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....roducts_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/...n-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.