suggested shopping cart iage sizes..?

[Shop Suey]

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.

[Shop Suey]

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

[amebb]

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.

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

[amebb]

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.

[Shop Suey]

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

[amebb]

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.

[amebb]

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

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

Thank you

[Shop Suey]

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.

[Shop Suey]

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)

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

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

[dbltoe]

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.