When I upload the image of a product, the optimal size of the image is not written and I don't manage to upload an adapted image

[myriamboure]

Issue mentionned by a beta-testeur in France: in the product page, the image size is not written

It would be great to tell the user what size the product image should have, to avoid them multiple back and forth to find the right size so that the product looks nice.

[myriamboure]

Or even better it would be to enable automatic resizing of images, for products, but also for hub logo and banner. Do you see any solution for that @ltrls ?

[myriamboure]

Also if the image is too heavy, the system take ages... can we limit the size of the image if the size is above this limit, display a message like "the file you try to upload is bigger than the authorized limit of xxxMo. Please upload another image."

[myriamboure]

So to sum up here is the list I see for product images (but ideally would apply to logo and banner images as well):

• Write the image size accepted below each concerned image (in term of Lxl like 100x100) and max weight for the file (like 5Mo) > what should be that limit ?
• Set up an automatic resize tool if the image doesn't fit the image Lxl recommendation
• If the image is above the max weight for the file, display an error pop-in telling "the file you try to upload is bigger than the authorized limit of 5Mo. Please upload another image."

@enricostano @sauloperez @sstead @lin-d-hop @sigmundpetersen no objection for you ? If you have any advice for the max weight tell us ;-)

[sauloperez]

I like it but I wouldn't implement the resize tool on a first iteration. It's a bite off more than we can chew. IMO we have way to many open initiatives/features already and that particular requirement has a considerable cost.

[sigmundpetersen]

Agree with @sauloperez , and when we first do it we should have an automatic compression tool as well. Sothe user shouldn't worry about either image size or file size. There must be off the shelf solutions out there though (?)

[Matt-Yorkley]

I opened an issue previously that relates to the second point (resizing images). As far as I can tell there is some sort of image resizing that happens on AUS production but not UK production.

#1603

[daniellemoorhead]

@Matt-Yorkley @myriamboure should we close #1603 as a duplicate or remove it from this issue?

[myriamboure]

@daniellemoorhead I suggest to keep the #1603 and take the "resize" thing out of this issue. It seems there is already a solution implemented in Aus for resize @sauloperez so we'll see if we can get it work elsewhere ;-)
So if I sum up the scope of this issue:

• Write the image size accepted below each concerned image (in term of Lxl like 100x100) and max weight for the file (like 5Mo) > what should be that limit ? Is 5Mo ok or too much @sauloperez @sigmundpetersen ?
• If the image is above the max weight for the file, display an error pop-in telling "the file you try to upload is bigger than the authorized limit of 5Mo. Please upload another image." OR if possible, better, set up an automatic compression tool (if easy solution). Any preference @sauloperez for first step ?

If we agree on that I'll list all the pages and images concerned so that a dev can start working on it.

[myriamboure]

Also this issue woudl be covered if we solve this one: #1185 so closing it. @mkllnk had referenced #1389 as a potential solution, I'll let the devs have a look at it.

[daniellemoorhead]

All sounds fine to me @myriamboure, go for it :)

[sauloperez]

@myriamboure 5 Mb feels too much for me. Keep in mind that the photos are listed in the shop page so in the worst case the browser would be rendering 5 Mb * number of products in the page. Definitely slow. Besides, there's also a technical limitation regarding the time out of our servers. I suggest something like 2Mb.

if possible, better, set up an automatic compression tool (if easy solution). Any preference @sauloperez for first step ?

We can take a look at issuing Gzip requests but I'd rather leave this for a later step. Let's iterate something that we can chew.

[myriamboure]

Agree, thanks @sauloperez but given #1185 shouldn't we even reduce more than that the allowed size? From the test I made it takes more than 10 sec to upload an image of 1,2MB... It's a bit annoying to put less than 2MB as the user likely will have to work on the image before he can upload it... but the load time is super high even for relativelly small images. I just retested right now with 1,2 MB image it took 13 seconds to create the products after I clic the save button... 8 sec fo 600 KB, 5 sec for 160 KB... Should we but limit like 200KB ?
Else if we think it's not good in term of ux maybe we should incude the compression tool in the scope... I dont think UX is satisfying if we allow 1MB and it takes 10 sec to charge, you have the impression the product creation is bugging...

[sauloperez]

I'll do the same test on my local setup. Do not forget the upload time is bound to the network. The smaller the bandwidth your provider gives you, the longer it'll take.

[myriamboure]

Sure, but I think I have a "normal" connexion that probably most users will have ;-) I did test in two different locations and the results are pretty similar. Looking forward to see your tests ;-)

[mkllnk]

We can take a look at issuing Gzip requests

That doesn't help much in this case, because the used images are compressed already.

I have seen jQuery plugins that can easily re-size images before uploading them. I'm sure we could get something for Angular as well.

[sauloperez]

that could help, but keep in mind that will require some extra effort. Again, I would do short and quick iterations and improve it little by little. Better done than nothing.

[myriamboure]

#gitcull2017
https://community.openfoodnetwork.org/t/improve-product-images-display-in-shop/1162