Optimize animated GIF files for Image Resizer

Image Resizer supports animated GIF files. However, depending on image quality, number of frames, as well as encoding methods and tools, animated GIFs can result in very large files, especially in terms of pixel count and number of frames. Large files cause processing bottlenecks and timeouts in Image Resizer, which leads to failovers and errors in resizing. This guide explains GIF file limitations and calculations, and provides recommendations to optimize your GIF files and improve Image Resizer performance.

Processing limitations and file calculations

Image Resizer takes content from Photo Center and works with the Content Delivery Network (CDN) to provide images to your customers. This content pipeline can have processing and bandwidth bottlenecks (and result in failovers) if GIF image files get close to or exceed any of the following parameters:

Parameter	Value
File size on disk	128 Mb
Raw image size	2.0 Gb
Total number of pixels (summing all frames)	100 Mp

File size on disk

The file size on disk depends on each frame’s characteristics and the level of compression used. The GIF specification uses the Lempel-Ziv-Welch (LZW) lossless compression algorithm. The compression algorithm identifies and eliminates redundancies in the image data. The degree of compression depends on the complexity and repetition within the frames. But overall, using compression means that the file size on disk is always much smaller than the raw image size.

Calculating raw image size

You can calculate the raw image size (in bytes) of a GIF file using the following formula:

WIDTH (in pixels) * HEIGHT (in pixels) * NUMBER OF FRAMES * BITS PER PIXEL / 8

Bits per pixel refers to bit-depth, which determines the amount of information used to represent the color of a single pixel. The GIF standard only supports 8 bits per pixel, allowing for a palette of 255 colors plus one transparent color.

When you divide by 8, you obtain the number of bytes (8 bits per byte).

Calculating total number of pixels

You can calculate the total number of pixels using the following formula:

WIDTH x HEIGHT x NUMBER OF FRAMES

Note

Coincidentally, in the specific case of the GIF image standard (8 bit-depth), the numerical value for raw image size (in bytes) is equal to the total number of pixels in the GIF file (considering all frames).

GIF size calculation examples

This section provides a couple of examples of image size calculations and how they relate to Image Resizer limitations for GIF files.

• For a GIF file that is 640 x 480 pixels and has 50 frames, the calculation is as follows:

  640 x 480 x 50 = 15,360,000

  In this case, the total number of pixels is 15.36 Mp, which is below the 100 Mp limit for Image Resizer. Considering the formula to calculate the raw image size, the result is 15.36 Mb, which is far below the raw size limit of 2 Gb.

• For a GIF file that is 1280 x 720 pixels and has 250 frames, the calculation is as follows:

  1280 x 720 x 250 = 230,400,000

  In this case, the total number of pixels is 230.4 Mp, which is more than double the limit for Image Resizer to process (100 Mp). Considering the formula to calculate the raw image size, the result is 230.4 Mb, which is below the raw image size limit of 2 Gb. This example demonstrates that GIF files are more likely to hit the pixel number limit before hitting any file size limit. In this case, Image Resizer fails to process the file and the CDN delivers the full size image (as failover) every time the URL is accessed.

important

Repeated Image Resizer failovers due to exceeding GIF processing limitations impact bandwidth consumption and increase bandwidth-related costs.

General recommendations

This section provides general recommendations when working with animated GIF files to avoid issues and errors with Image Resizer.

• Reduce the number of frames.

  Animated GIFs are a great way to present dynamic graphic content while keeping a small file size. You must reduce the number of frames to avoid hitting the pixel number limit for Image Resizer. As a general rule, do not substitute short video clips with GIF files. Video sequences require many frames per second to achieve natural motion (cinema uses 24 frames per second, for example). Creating GIF files from video sequences quickly ramps up the number of frames. Animated GIF files are more suitable for diagrams, simple graphics, and image sequences that do not require fluid motion. If your workflow includes converting videos to GIF files, consider using the animated WebP format instead.

• Reduce image resolution.

  If you are unable to reduce the number of frames in your GIF file, reduce the width and height of the image so the total number of pixels (considering all frames) does not exceed 100 Mp.

GIF image processing tools

There are several applications and tools that can help you optimize your GIF files before you upload them to Photo Center. This section includes an overview of two open-source tools that run on the command line.

ImageMagick

ImageMagick can convert, resize, transform, and compose images in many formats. When it comes to the GIF format, ImageMagick provides useful features for manipulating image dimensions:

• Resizing (-resize):

  This is the primary option for changing the dimensions of a GIF file. You can specify exact dimensions, percentages, or fit within a bounding box while preserving the aspect ratio. Example:

  magick input.gif -resize 300x output_300w.gif

  This command resizes the GIF to a specific width and adjusts the height proportionally.

• Coalescing (-coalesce) and cropping (-crop):

  The -coalesce argument expands each frame to it’s full canvas size. This is necessary when using the -crop argument on an animated GIF to reduce its pixel count and content. Example:

  magick animated.gif -coalesce -crop 100x100+50+50 +adjoin output_cropped_animation.gif

  This command uses the syntax Width x Height + X offset + Y offset. Positive offsets define the top-left corner of the crop. The +adjoin argument ensures that each cropped frame is assembled before being reassembled into an animation. This prevents animation artifacts.

• Pixel Count Limit (-resize @):

  Resizes an image to have a specified maximum area in pixels, preserving the aspect ratio.

  magick input_animation.gif -coalesce -resize 4096@ -layers Optimize output_resized_pixel_limit.gif

  This command limits the pixel count to 4096 and includes the -coalesce argument to reduce animation artifacts.

• Layer Optimization -layers Optimize:

  Reapplies optimization techniques after manipulating the animated GIF to reduce file size. Example:

  magick -layers Optimize output_optimized.gif

  You can use the -layers Optimize argument in conjunction with other arguments to ensure your GIF output file is always optimized.

Note

As a good practice, always use the -coalesce argument whenever you perform image size manipulations.

Gifsicle

Gifsicle is a command-line tool specifically designed for creating, editing, and optimizing GIF images and animations. When it comes to image size manipulation, its features are very similar to those of ImageMagick, however, Gifsicle includes the following GIF specific features:

• Optimization (--optimize or -O): This is Gifsicle’s core strength. It performs various lossless and lossy optimizations to reduce file size, including:

  • Lossless optimization (levels 1, 2, 3): Reduces redundant data, compresses color tables, and removes unused colors. Higher levels perform more aggressive optimization.
  • Lossy optimization (—lossy): Introduces small, imperceptible changes to the image data to achieve greater compression. Values range from 0 (not lossy) to 200 (more loss, smaller file).

  Example of lossless optimization:

  gifsicle input.gif -O1 > output_O1.gif

  Example of lossy optimization:

  gifsicle input.gif -O3 --lossy=30 > output_lossy_30.gif

• Color Reduction (—colors): Specifies the number of colors (less than 256) in the GIF’s palette, which can lead to significant file size reduction. Example:

  gifsicle input.gif --colors 128 > output_colors_128.gif

• Dither (—dither): Applies dithering when reducing colors to smooth out transitions and minimize banding. Example:

  gifsicle input.gif --colors 64 --dither > output_colors_64_dithered.gif

• Delay (—delay): Sets the delay time for frames. A delay value of 20 is equal to 0.2 seconds. Example:

  gifsicle input.gif "#0-4" --delay 20 > output_first_5_frames_delay_20.gif

Alternative: use animated WebP format

If you are unsure that your GIF file is not optimized enough to work with Image Resizer, Arc XP recommends using the animated WebP format instead. The animated WebP format offers the following advantages over animated GIF files:

• More efficient compression. WebP files are smaller than comparable GIF files thanks to its compression derived from video codecs (on average, 64% smaller when using lossy WebP).
• Full color depth. The WebP format supports 24-bit color and an 8-bit alpha channel for higher quality and more vibrant animations. This aso provides high-quality retention when downsizing image dimensions.
• Wide support. Most modern browsers support the animated WebP format.

The only downside of using the WebP format is that its creation requires more advanced tools and availability of open source tools can be limited.