cht-core icon indicating copy to clipboard operation
cht-core copied to clipboard

Images on production could be smaller

Open alxndrsn opened this issue 8 years ago • 9 comments

Running icons and form images through pngout when committing to github, or as part of upload scripts, could save a bit of bandwidth, RAM, storage.

alxndrsn avatar May 04 '17 06:05 alxndrsn

The icons are uploaded via the upload_icons.js script. Assigning to @Lesterng and @amandacilek to review using pngout with @alxndrsn.

abbyad avatar May 06 '17 13:05 abbyad

Hey @alxndrsn, I understand that pngout compresses image files. I don't think of our app as being very image-heavy already. I'm not sure about what images we already include in "form images", do you have any examples? Is this mainly in reference to the file size of the icons?

I'm happy to work with you to figure out solutions for smaller icon files but I don't think the overall storage savings will be that significant, as the files are already quite small.

Would there be any benefits to switching to svg instead of png images? Sometimes svg can produce smaller file sizes, and they are more scalable so we only have to upload one file for multiple sizes.

amandacilek-zz avatar Jun 05 '17 21:06 amandacilek-zz

@amandacilek This is a near-zero-technical-effort fix which generally compresses images between 30% and 70%, losslessly.

Examples of icons which were recently bigger than they should be, see https://github.com/medic/medic-projects/pull/2010

I don't think the overall storage savings will be that significant

I agree, but it will save bandwidth, which is very important to us.

Looking at SVG vs PNG definitely sounds worthwhile. Checking handset browser support would be a good first step.

alxndrsn avatar Jun 06 '17 08:06 alxndrsn

@alxndrsn can we run images through pngout within the upload script? That seems like the easiest way to ensure that it happens. Given that you're working on the CLI for config, it could be part of that work.

@amandacilek we use images in some forms (such as showing examples of positive and negative malaria tests) and we have other requests to include more images in the future.

I did a test to see if SVGs worked in the web app and they did on my computer browser. I can do another quick test to see if they work on a Tecno Y4. I like the idea of shifting over to SVGs completely if we can.

sglangevin avatar Jun 06 '17 08:06 sglangevin

@garethbowen should we move this to medic-conf?

abbyad avatar Mar 18 '19 16:03 abbyad

@abbyad We should run some optimisation on images bundled with the app as well as when uploading in medic-conf, so we could leave it in webapp and do both at once, or split it so we have one issue for each step.

There's a node lib we can use: https://github.com/imagemin/imagemin-pngout . imagemin also has a bunch of other plugins for other file types so we should investigate using a range of them.

I think we should schedule this and get on to it.

garethbowen avatar Mar 18 '19 21:03 garethbowen

Good idea to schedule this issue. Splitting it into separate issues could help avoid one blocking the other, but either is fine with me.

abbyad avatar Mar 19 '19 16:03 abbyad

Ok, scheduling for 3.7.0. I'll leave it as one issue because the implementation will probably be using the same library so it's easier to do both at once.

garethbowen avatar Mar 19 '19 22:03 garethbowen

Ensure all the images we serve with the app are minimised too, for example, instead of the grunt task copy:ddoc-attachments just copying the files to build/ddocs/medic/_attachments run them through the minimisation script first. This solves #5676 now and forever more.

garethbowen avatar Jul 26 '19 04:07 garethbowen