search

lzim / teampsd

Team PSD is using GitHub, R and RMarkdown as part of our free and open science workflow.
GNU General Public License v3.0
9 stars 23 forks source link

wk4: Reduce file size for gifs #1150

Closed ritahitching closed 3 years ago

ritahitching commented 4 years ago

Research options to zip gifs

Research options to zip/reduce the size of gifs. Estimate 2 hour.

ritahitching commented 4 years ago

@lzim i need some guidance on reducing the size of the gifs,

  1. online platform to zip the gifs https://ezgif.com/optimize
  2. size reduction (e.g. 1MB to 743KB)
  3. gifs attached

Please let me know if resolution ok, and if I should continue with the remainder of the gifs here

original 1MB community_button_1mb

reduced 743KB community_button_743k

staceypark commented 4 years ago

Two points of feedback:

anthonycpichardo commented 4 years ago

Resolution looks good to me.

I found this useful article on different ways to improve gif related performance if you want to scroll through. One hot tip seemed to be converting from gif to html5. https://moz.com/blog/how-to-improve-site-performance-using-gifs

lzim commented 4 years ago

FYI @ritahitching I’m catching up on the weekend, but this can definitely wait until Monday 😊

@anthonycpichardo and @staceypark thanks for the feedback

Let’s get more testing done following the animation instructions in Anthony’s post.

Specifically:

  1. Lossy optimization Produce an an example, AND/OR report the specific details to how the example above was compressed
  2. HTML5 Produce an example as described in Anthony’s link & post here for review.

Thanks!

ritahitching commented 4 years ago

Large file I chose a large file to stress test the compression process.

Lossy Optimization using https://ezgif.com/optimize

1. there are several options for several degrees of compression from light to heavy (30 to 200) Screen Shot 2020-03-16 at 3 56 14 PM

2. original image: File size: 3.2MiB, width: 800px, height: 478px, frames: 216, type: gif

data_ui_splashpage_original

3. shown 3 versions below

35 compression: File size: 1.92MiB (-39.91%), width: 800px, height: 478px, frames: 215, type: gif data_ui_35

**90 compression: File size: 1.77MiB (-44.7%), width: 800px, height: 478px, frames: 215, type: gif data_ui_90

160 compression: File size: 1.67MiB (-47.86%), width: 800px, height: 478px, frames: 215, type: gif

data_ui_160

Lossy GIF compression Details GIF compressor optimizes GIFs using gifsicle and Lossy GIF encoder, which implements lossy LZW compression. It can reduce animated GIF file size by 30%—50% at a cost of some dithering/noise. You can adjust compression level with a simple slider to get the best result for your use case. This is the default method and should work for any GIF.

Color Reduction This tool shrinks GIF file size by reducing the number of colors in each frame. Each GIF frame can use up to 256 unique colors, and by reducing this number, you can achieve a smaller file size. It makes multiple variations of your input image, and you can choose the one that has the best size/quality ratio for your needs.

Remove every nth frame The frame drop option can remove every second, third, or fourth frame to reduce frame rate and, therefore, file size. Useful for long gifs with a high frame rate.

Another option is to remove only duplicate frames. This method will search for identical or very similar, consecutive frames, remove them and merge their display duration. This will not do anything for most GIFs, but can be useful in some special cases.

Optimize Transparency This option keeps the first frame in the background, and makes unchanged parts of the following frames transparent. The results heavily depends on the nature of the image. It may give huge file size reduction in some cases when images have large, static areas, e.g. recorded screen capture of some program, but most likely will give poor results for converted videos or photo slide shows, where all or most pixels between each frame are completely different. The fuzz factor represents how similar colors can be considered as equal.

ritahitching commented 4 years ago

HTML5 Compression Using https://ezgif.com/optimize

Conversion to HTML5 Github does not support the upload of gifs converted to

  1. HTML5
  2. MP4 video

I can circulate images via email. Please let know.

staceypark commented 4 years ago

@anthonycpichardo @lzim @ritahitching I think the most compressed one still looks fine from Rita's newest examples. But then again I don't think I have the best eye for these since I don't notice the fuzzy icons.. 🤣

ritahitching commented 4 years ago

@staceypark thanks for the feedback. @lzim and @anthonycpichardo thoughts? thanks

ritahitching commented 4 years ago

@lijenn @anazariz @anthonycpichardo will you please look at the gifs above using the LOSSY compression and let me know if they are clear to you. thanks

ritahitching commented 4 years ago

@lijenn @anazariz @anthonycpichardo If you are able to look at the images in different monitors and send some screen shots it wold be really helpful. thanks

lijenn commented 4 years ago

@ritahitching I think the original, 35, and 90 compression all look very similar. I do see a minor drop in quality for the 160 compression though.

Here are screenshots of what I'm seeing on my mac pro 13inch display:

Original:

original

35 Compression:

1

90 Compression:

2

160 Compression:

3
ritahitching commented 4 years ago

@anthonycpichardo and @lzim any decision on the choice and degree of compression for the gifs? thanks!

anthonycpichardo commented 4 years ago

I agree with jenn, I dont really notice a drop until we get to 160.

ritahitching commented 4 years ago

@anthonycpichardo thanks for feedback. @lzim will you please provide a final decision on the choice and degree of compression? Please let me know if I should go ahead with compression for all the gifs in the MTL 2.0 folder once you've made you've made your decision. thanks!

lijenn commented 4 years ago

@ritahitching Let's go with the 90 compression since we have some consensus about 160 showing a drop in quality.

Could you close this card when the task is completed? Thank you!

ritahitching commented 4 years ago

@ritahitching provide the team with guidance on how to use gifs for our purpose of instructional guides.

lijenn commented 4 years ago

From Mon. 3/30 WG Leads Meeting: Can @branscombj & @dlkibbe provide a second set of eyes on these gifs?

Please look at the examples and give feedback on whether or not the gifs can be followed through from the point of view as a learner (i.e is going through the motions enough in the gif or do you think it needs to be of higher quality to follow each step).

ritahitching commented 4 years ago

@branscombj if you a chance will you please review the at the gifs and let me know your thoughts? thanks!

branscombj commented 4 years ago

@branscombj if you a chance will you please review the at the gifs and let me know your thoughts? thanks!

Hi @ritahitching - I"m not sure what to review?

ritahitching commented 4 years ago

@branscombj the gifs in the this issue - I pasted below for ease: Some gifs are taking too long to load and we are trying to compress them to reduce lag, but want to keep as much visual clarity as possible. thanks

Lossy Optimization using https://ezgif.com/optimize 1. there are several options for several degrees of compression from light to heavy (30 to 200) Screen Shot 2020-03-16 at 3 56 14 PM

2. original image: File size: 3.2MiB, width: 800px, height: 478px, frames: 216, type: gif

data_ui_splashpage_original

3. shown 3 versions below

35 compression: File size: 1.92MiB (-39.91%), width: 800px, height: 478px, frames: 215, type: gif data_ui_35

**90 compression: File size: 1.77MiB (-44.7%), width: 800px, height: 478px, frames: 215, type: gif data_ui_90

160 compression: File size: 1.67MiB (-47.86%), width: 800px, height: 478px, frames: 215, type: gif

data_ui_160

branscombj commented 4 years ago

@ritahitching so, all 4 of the above gifs are of the same content, shown at the same speed, and you're asking about clarity? I did not notice much difference in quality of the images. I do feel that the gif moves too fast for my brain to keep up. It would help me to have more time on the drop-down menu, and more time to catch the spreadsheet column headings and the chart title, axes, and legend to be able to make the connection between what's being selected and what's being shown. I'm not sure it's necessary to show the scrolling down to include the file folders unless you want to point something out about them.

lzim commented 4 years ago

@ritahitching

@branscombj Apologizes @lijenn already remade all the .gifs and now we are simply trying to reduce the total file size so that pages on slow machines with limited RAM (like my VA machine) can keep up.

ritahitching commented 4 years ago

from @ritahitching

  1. The recommended format for gif construction is jpg for gifs

    Summary:

    You can optimize GIF files, but in most cases, the results won’t be as good as with other image formats. That means you should aim to use GIFs sparingly throughout your website, only when you need to showcase an animation you can’t create any other way (such as with CSS). On top of that, GIFs only support up to 256 colors, as well as transparency. That makes them a poor choice for displaying complex images.

  2. The recommended format for gif compression

    Summary:

    GIFReducer reduces the several colors from the GIF image or file. It only works to make the smaller files. But it can improve the quality of an image. Better than previously recommended Lossy compression mode reduces both size plus quality of the image.

  3. I could not find any information about slowing down the display of the gifs.

from @lzim

lijenn commented 4 years ago

@ritahitching @lzim I believe I could try to slow them down with any gif editor out on the web. However, as mentioned, this may affect the file size and our plan to reduce it as much as possible and also hurt the quality even more as changes are being made on it.

Maybe the addition of screenshots could address the issue of needing to look more carefully at drop-down menus or areas with a lot of text involved? Screenshots have a much smaller file size and are static which also addresses the issue of not being able to "pause" a gif, a point @branscombj brought up earlier in our WG meeting.

staceypark commented 4 years ago

I like the idea of screenshots to complement critical steps. Esp since it also lets you highlight or circle specific sections.

@ritahitching @lzim I believe I could try to slow them down with any gif editor out on the web. However, as mentioned, this may affect the file size and our plan to reduce it as much as possible and also hurt the quality even more as changes are being made on it.

Maybe the addition of screenshots could address the issue of needing to look more carefully at drop-down menus or areas with a lot of text involved? Screenshots have a much smaller file size and are static which also addresses the issue of not being able to "pause" a gif, a point @branscombj brought up earlier in our WG meeting.

ritahitching commented 4 years ago

@staceypark @lijenn

I like the idea of screenshots to complement critical steps. Esp since it also lets you highlight or circle specific sections.

@ritahitching @lzim I believe I could try to slow them down with any gif editor out on the web. However, as mentioned, this may affect the file size and our plan to reduce it as much as possible and also hurt the quality even more as changes are being made on it. Maybe the addition of screenshots could address the issue of needing to look more carefully at drop-down menus or areas with a lot of text involved? Screenshots have a much smaller file size and are static which also addresses the issue of not being able to "pause" a gif, a point @branscombj brought up earlier in our WG meeting.

ritahitching commented 4 years ago

@lzim I need some decisions on this issue:

1. Based on the research I provided above on gif compression:

2. Speed at which gifs are displayed

from @branscombj I do feel that the gif moves too fast for my brain to keep up. It would help me to have more time on the drop-down menu, and more time to catch the spreadsheet column headings and the chart title, axes, and legend to be able to make the connection between what's being selected and what's being shown. I'm not sure it's necessary to show the scrolling down to include the file folders unless you want to point something out about them.

from @lijenn I believe I could try to slow them down with any gif editor out on the web. However, as mentioned, this may affect the file size and our plan to reduce it as much as possible and also hurt the quality even more as changes are being made on it.

Maybe the addition of screenshots could address the issue of needing to look more carefully at drop-down menus or areas with a lot of text involved? Screenshots have a much smaller file size and are static which also addresses the issue of not being able to "pause" a gif, a point @branscombj brought up earlier in our WG meeting.

from @staceypark I like the idea of screenshots to complement critical steps. Esp since it also lets you highlight or circle specific sections.

ritahitching commented 4 years ago

@lzim I'm sorry to ping you again :pray: I know you are slammed :muscle: with the grant submission, but are you able to make a decision on the choice of file compression? thank you

lzim commented 4 years ago

@ritahitching

  1. The .gifs are definitely not a bigger priority than the COVID-19 grants and updated compliance tasks. I have adjusted the title, milestone, and epic to accurate reflect May.

    • This is great, it means there's more capacity to help with higher priority april epic tasks. 🧯

  2. I'm not sure what your recommendations are from the group based on the details above. Can you concisely describe your recommendations, please?

    • For example, is @branscombj's feedback specific to this .gif only, or is it a generalizable comment? Can you "active listen" to see what inferences you should draw?

  3. @lijenn and @staceypark I notice that sometimes having a lot of screenshots and .gifs actually interferes with my ability to just read what a guide says (e.g. https://github.com/lzim/mtl/blob/master/blue/session02/s02_learner/mtl_session02_see.md)

    • This is especially problematic when differing dimensions are used so they don't align as you scroll down the page.

  4. I'm really struggling to interpret the estimate of 3 story points? Really? That's all this would take?
    • **Can you please consider a more accurate reflection of how much re-work this entails?
    • We really need the accurate estimates to determine whether/when/how to do this.
ritahitching commented 4 years ago

@lzim thank you for the coaching. Please see answers below.

from @lzim

  1. The .gifs are definitely not a bigger priority than the COVID-19 grants and updated compliance tasks. I have adjusted the title, milestone, and epic to accurate reflect May.

    • This is great, it means there's more capacity to help with higher priority april epic tasks. 🧯

from @ritahitching

from @lzim

  1. I'm not sure what your recommendations are from the group based on the details above. Can you concisely describe your recommendations, please?

    • For example, is @branscombj's feedback specific to this .gif only, or is it a generalizable comment? Can you "active listen" to see what inferences you should draw?

  2. @lijenn and @staceypark I notice that sometimes having a lot of screenshots and .gifs actually interferes with my ability to just read what a guide says (e.g. https://github.com/lzim/mtl/blob/master/blue/session02/s02_learner/mtl_session02_see.md)

    • This is especially problematic when differing dimensions are used so they don't align as you scroll down the page.

      from @ritahitching

    • [ ] The story points were to do the research on the appropriate choice of compression.
    • [ ] I was following the SOP of breaking down tasks into individual issue cards that can be closed. I was planning a separate issue card to do the work of compressing the images.
    • [ ] The compression I would estimate at about 5 points. Total for both research and work 8 points.

from @lzim

  1. I'm really struggling to interpret the estimate of 3 story points? Really? That's all this would take?
    • Can you please consider a more accurate reflection of how much re-work this entails?
    • We really need the accurate estimates to determine whether/when/how to do this.
ritahitching commented 4 years ago

@lijenn this is issue is blocked by the #1192 and the MVP process. If you read the thread you will find recommended suggestions on the choice of file compression. No decisions were made. I recommend we keep this issue open.

lijenn commented 3 years ago

File sizes reduced, may need to reduce new S2 data gifs for facility and data ui for VVC updates in Dec. epic.