SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reduce Animated Gif

    Is there a way to use Javascript to reduce a animated GIF ?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Reduce the file size?

    AFAIK you can't do that with JS. Maybe with server side JS, but it would still likely use a 3rd party application (e.g. https://github.com/rsms/node-imagemagick)

    Traditionally this is something you would leave to the server to process. (But then you might incur data loss and break the animated GIF, so that's something to be aware of too)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    What do you mean by 'reduce'? You can set with width and height in the HTML or via CSS if you want it to display at a smaller size.

  4. #4
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you mean reduce the number of frames, you can do it by loading the gif into Adobe ImageReady and reworking the layers. You can also use the same technique to reduce the file size or speed it up or slow it down.

  5. #5
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I meant the file size. I shank the GIF significantly, but not enough. I thought maybe JS could do something about roughly 150K.

  6. #6
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Do it in Canvas

    If there aren't too many frames, and animations are simple, doing it in JavaScript as what would effectively be a JS slideshow might be an option.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  7. #7
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do it in Canvas ? There is almost 200 frames.

  8. #8
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    200 frames ouch.

    If we think of a standard 100x100px GIF image, it might end up at 3kb or so, depending on the amount of colours and number of gradients, so 200 frames at 150k is looking pretty good IMHO.

    TBH, I've never been a big fan of GIF for complex or lengthy animations, I'd probably opt for Flash or Canvas (and that probably depends heavily on what the animation is). (Or make it a movie )
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  9. #9
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't own flash, problem is I don't want someone to disable flash and then they can't see what they are suppose to see. The GIF file size bumped up to 285K, solid. Isn't there a really smart GIF algorithm out there, that can cut that down to atleast 150K if that's all I can squeeze out of it. I've played with it in Photoshop trying and trying to no end.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Usually you can get the file size lower by using Fireworks. Or have you tried reducing the size of the original slides?

  11. #11
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or have you tried reducing the size of the original slides?
    You mean each frame ? Isn't that what I did with the original GIF ?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Isn't that what I did with the original GIF ?
    I have no idea. You tell me!

    If you used 200 gif images, did you optimize them before merging them all into one animated file? That's what I mean. Do you have Fireworks?

  13. #13
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have fireworks. The file was converted from another media format to GIF, it was not originally created as a GIF in frames.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •