RSSNewsRobot
Senior Member
Authors:
Susan Neuhaus
Body:
Animated GIFs are popping up everywhere as a medium for self expression and as a tool for marketing. Twitter and Reddit accept GIFs, and theres been an explosion of creativity on Tumblr. They're also great for illustrating steps in tutorials, as shown in this article at InDesignSecrets.com.
Load time is important to websites, so there are file size, or weight, restrictions on your GIF. Heres a few Photoshop tricks to make sure your masterpiece is the optimal size.
[h=3]About GIFs[/h]GIF stands for Graphics Interchange Format and it is a common web standard for images. If youre interested in the history and current state of the artform, PBS Digital Studios has a great video on Youtube: Animated GIFs: The Birth of a Medium. There is a search engine and sharing space just for GIFs: giphy.com and the GIF animations have their own category in the social media industrys shorty awards.
[h=3]Why is GIF Size Important?[/h]Publications and websites have limited bandwidth. Very simply, bandwidth is rate at which information transfers from a web server to a web browser. The more pictures and animations on a web page, the larger that page will be in file sizeand the slower it will transfer to a viewers device. Naturally, no one wants to frustrate visitors with a slow-loading page, or worse, crash their browser.
GIFs are measured in two ways:
Size or dimensions - the width and height of an image in pixels, such as 336 px x 280 px
Weight - the file size, such as 25k
You can find standard sizes and weights for banner ads at the designers toolbox and most publications and websites have their requirements on their rate sheets. Notice that these are some very lightweight animations. A skyscraper is recommended to weigh no more than 20KB. If youre creating for Tumblr, youll want to be sure your GIF is no more than 500px wide and less than 1.75MB.
[h=3]Limiting Colors in Your Design to Control Weight[/h]The Graphics Interchange Format allows 8 bits per pixel for each image, so a single image to can have its own palette of up to 256 different colors. A smaller color palette can have a significant effect on the final file size.
Sometimes, you can make an image smaller simply by darkening it, according to Tumblr GIF artist carriefishers. A color overlay works as well, if you make one or more of your frames monochromatic, you can use a smaller color palette.
[h=3]Optimizing Your GIFs Color Palette[/h]In Photoshops Save for Web dialog box there are tools for getting the best outcome for the fewest colors to shave off some weight. Exporting the grid animation above, at 256 colors the file weight was 829.5k.
You can see the 256 colors Photoshop intends to put in the GIF in the color table on the right. Many of these colors look like duplicates or near duplicates, so Im sure I can use fewer colors. I was able to cut the file weight in half by limiting the colors to 16. But the image quality suffers.
Photoshop offers three schemes for dithering, or dispersing pixels in a way that can imitate smooth areas of color in a limited-palette image. This is a bit deceiving, as the dithering happens in Photoshop and is not directly supported in GIF. It almost always results in a larger file, because it interferes with the way a GIF is compressed. It's worth trying each dithering option and adjusting its percentage (if available) to get an effect you like, or at least one you can live with.
You can also select way Photoshop interprets and reduces the RGB colors in your image: perceptual, selective, and adaptive each use slightly different algorithms, and its worth trying them all to see which gives you the most accurate palette. For really small files, the restrictive palette limits your image to websafe colors, and while it makes a lightweight file, the colors are not usually acceptable.
The "nuclear option" is to let Photoshop decide how to make your GIF fit your target size. Im not usually satisfied with the result, but it's worth a try.
For the final grid animation above, I used a palette of 96 colors and no dithering.
[h=3]Reducing the Number of Frames[/h]An obvious place to reduce your animations file size is to show fewer frames. Tumblr artist Kidsha recommends using about 25 frames to stay within the Tumblr 1.75MB weight limit in his Youtube demo. Another trick is to remove every other frame of imported video and increase the frames delay slightly, often the result is still pretty smooth.
There is no file weight change when you choose more or fewer animation loops. Nor is there any change in file weight when the delay between frames is longer or shorter, since both of these choices simply represent a change in integer in the compressed file, rather than more or less data. Wikipedia has a sample of the encoding in the article Graphics Interchange Format.
The thinning GIF animation at the top of the article is 82k. To slim it down below 25k (the standard weight limit for a square web ad) I went from 7 to 4 frames, and used the adaptive algorithm and a pattern dither.
[h=3]GIF Creation Apps[/h]In addition to using Photoshop to make GIFs, you can try dedicated apps like GIF Brewery (for Mac) and Giffing Tool (for Windows). Both apps offer handy features that can save you time and effort, especially when you have a lot of GIFs to create.
[h=3]The Biggest GIF Controversy [/h] is how you pronounce it. Like the peanut butter, or the items tied with ribbon on your birthday but without the final t? Although everyone from the President of the United States to Steve Wilhite (the creator of the format) have weighed in, the debate will probably never end.
Inserted Article Image(s):
Article Slider image:
[h=2]Liked This? Read These![/h] [TABLE="class: views-view-grid cols-2"]
[TR="class: row-1 row-first"]
[TD="class: col-1 col-first"] [h=3]Inside Web Design: Creating Animated GIFs with Illustrator 8 and ImageReady 2[/h]
Read More
[/TD]
[TD="class: col-2 col-last"] [h=3]Reduce PDF File Size with PDF Checkpoint 1.1[/h]
Zevrix Solutions announced the release of PDF Checkpoint 1.1, an update to its new powerful PDF workflow automation solution. PDF Checkpoint quickly preflights, exports as images, splits and reduces... Read More
[/TD]
[/TR]
[TR="class: row-2 row-last"]
[TD="class: col-1 col-first"] [h=3]How to Choose the Right Image File Format for Print[/h]
The ABCs of JPEG, TIFF, EPS, PDF, PSD, and more. Read More
[/TD]
[TD="class: col-2 col-last"] [h=3]Master Colors Announces the Immediate Release of HVC Color Composer Plug-in for Photoshop in Windows[/h]
Master Colors, LLC has announced the availability of the HVC Color Composer plug-in for Adobe Photoshop in both Macintosh and Windows platforms at a new lower price.The HVC Color Composer ($129.95... Read More
[/TD]
[/TR]
[/TABLE]
Graphics
Graphics Image Editing
Web/Mobile
Web Design & Layout
More...
Susan Neuhaus
Body:
Animated GIFs are popping up everywhere as a medium for self expression and as a tool for marketing. Twitter and Reddit accept GIFs, and theres been an explosion of creativity on Tumblr. They're also great for illustrating steps in tutorials, as shown in this article at InDesignSecrets.com.
Load time is important to websites, so there are file size, or weight, restrictions on your GIF. Heres a few Photoshop tricks to make sure your masterpiece is the optimal size.
[h=3]About GIFs[/h]GIF stands for Graphics Interchange Format and it is a common web standard for images. If youre interested in the history and current state of the artform, PBS Digital Studios has a great video on Youtube: Animated GIFs: The Birth of a Medium. There is a search engine and sharing space just for GIFs: giphy.com and the GIF animations have their own category in the social media industrys shorty awards.
[h=3]Why is GIF Size Important?[/h]Publications and websites have limited bandwidth. Very simply, bandwidth is rate at which information transfers from a web server to a web browser. The more pictures and animations on a web page, the larger that page will be in file sizeand the slower it will transfer to a viewers device. Naturally, no one wants to frustrate visitors with a slow-loading page, or worse, crash their browser.
GIFs are measured in two ways:
Size or dimensions - the width and height of an image in pixels, such as 336 px x 280 px
Weight - the file size, such as 25k
You can find standard sizes and weights for banner ads at the designers toolbox and most publications and websites have their requirements on their rate sheets. Notice that these are some very lightweight animations. A skyscraper is recommended to weigh no more than 20KB. If youre creating for Tumblr, youll want to be sure your GIF is no more than 500px wide and less than 1.75MB.
[h=3]Limiting Colors in Your Design to Control Weight[/h]The Graphics Interchange Format allows 8 bits per pixel for each image, so a single image to can have its own palette of up to 256 different colors. A smaller color palette can have a significant effect on the final file size.
Sometimes, you can make an image smaller simply by darkening it, according to Tumblr GIF artist carriefishers. A color overlay works as well, if you make one or more of your frames monochromatic, you can use a smaller color palette.
[h=3]Optimizing Your GIFs Color Palette[/h]In Photoshops Save for Web dialog box there are tools for getting the best outcome for the fewest colors to shave off some weight. Exporting the grid animation above, at 256 colors the file weight was 829.5k.
You can see the 256 colors Photoshop intends to put in the GIF in the color table on the right. Many of these colors look like duplicates or near duplicates, so Im sure I can use fewer colors. I was able to cut the file weight in half by limiting the colors to 16. But the image quality suffers.
Photoshop offers three schemes for dithering, or dispersing pixels in a way that can imitate smooth areas of color in a limited-palette image. This is a bit deceiving, as the dithering happens in Photoshop and is not directly supported in GIF. It almost always results in a larger file, because it interferes with the way a GIF is compressed. It's worth trying each dithering option and adjusting its percentage (if available) to get an effect you like, or at least one you can live with.
You can also select way Photoshop interprets and reduces the RGB colors in your image: perceptual, selective, and adaptive each use slightly different algorithms, and its worth trying them all to see which gives you the most accurate palette. For really small files, the restrictive palette limits your image to websafe colors, and while it makes a lightweight file, the colors are not usually acceptable.
The "nuclear option" is to let Photoshop decide how to make your GIF fit your target size. Im not usually satisfied with the result, but it's worth a try.
For the final grid animation above, I used a palette of 96 colors and no dithering.
[h=3]Reducing the Number of Frames[/h]An obvious place to reduce your animations file size is to show fewer frames. Tumblr artist Kidsha recommends using about 25 frames to stay within the Tumblr 1.75MB weight limit in his Youtube demo. Another trick is to remove every other frame of imported video and increase the frames delay slightly, often the result is still pretty smooth.
There is no file weight change when you choose more or fewer animation loops. Nor is there any change in file weight when the delay between frames is longer or shorter, since both of these choices simply represent a change in integer in the compressed file, rather than more or less data. Wikipedia has a sample of the encoding in the article Graphics Interchange Format.
The thinning GIF animation at the top of the article is 82k. To slim it down below 25k (the standard weight limit for a square web ad) I went from 7 to 4 frames, and used the adaptive algorithm and a pattern dither.
[h=3]GIF Creation Apps[/h]In addition to using Photoshop to make GIFs, you can try dedicated apps like GIF Brewery (for Mac) and Giffing Tool (for Windows). Both apps offer handy features that can save you time and effort, especially when you have a lot of GIFs to create.
[h=3]The Biggest GIF Controversy [/h] is how you pronounce it. Like the peanut butter, or the items tied with ribbon on your birthday but without the final t? Although everyone from the President of the United States to Steve Wilhite (the creator of the format) have weighed in, the debate will probably never end.
Inserted Article Image(s):
Article Slider image:
[h=2]Liked This? Read These![/h] [TABLE="class: views-view-grid cols-2"]
[TR="class: row-1 row-first"]
[TD="class: col-1 col-first"] [h=3]Inside Web Design: Creating Animated GIFs with Illustrator 8 and ImageReady 2[/h]
Read More
[/TD]
[TD="class: col-2 col-last"] [h=3]Reduce PDF File Size with PDF Checkpoint 1.1[/h]
Zevrix Solutions announced the release of PDF Checkpoint 1.1, an update to its new powerful PDF workflow automation solution. PDF Checkpoint quickly preflights, exports as images, splits and reduces... Read More
[/TD]
[/TR]
[TR="class: row-2 row-last"]
[TD="class: col-1 col-first"] [h=3]How to Choose the Right Image File Format for Print[/h]
The ABCs of JPEG, TIFF, EPS, PDF, PSD, and more. Read More
[/TD]
[TD="class: col-2 col-last"] [h=3]Master Colors Announces the Immediate Release of HVC Color Composer Plug-in for Photoshop in Windows[/h]
Master Colors, LLC has announced the availability of the HVC Color Composer plug-in for Adobe Photoshop in both Macintosh and Windows platforms at a new lower price.The HVC Color Composer ($129.95... Read More
[/TD]
[/TR]
[/TABLE]
Graphics
Graphics Image Editing
Web/Mobile
Web Design & Layout
More...
