When I upload my post with an animated .gif, the thumbnail generates into a new image and doesn't stay animated. It will stay animated inside the post which is great. It seems to resize the .gif image and convert it into a static image because it generates an image with the sizing at the end of the original file. Is there a code to add or remove that prevents it from generating a new image for the thumbnail so it just resizes down as the gif?

  • 1
    According to this, WP only likes certain files (or I didn't read it which is possible). The post also suggest installing an external plugin but it looks older(ish). If you're inserting it into a post though, use the full sized (original) image instead of the WP resized version.
    – Howdy_McGee
    Sep 5 '14 at 21:17
  • The old "Animated GIF resize" plugin seems to fail these days with Wordpress 4.x + wordpress.org/plugins/animated-gif-resize
    – Eric
    Jan 25 '16 at 3:13

Actually WordPress render uploaded images. So if you upload a animated gif then it will not stay animated. Read this article on how to overcome these issue.

I haven't read it through but as Howdy_McGee said, you will have to use a plugin for that.

Essential WordPress Plugins for Working With Animated GIFs


You can add a filter using add_filter() hook for wp_generate_attachment_metadata to teach Wordpress to resize animated gif images correctly:

 * Filters the generated attachment meta data.
 * @param array $metadata An array of attachment meta data.
 * @param int $attachment_id Current attachment ID.
 * @param string $context Additional context. Can be 'create' when metadata was initially created for new attachment or 'update' when the metadata was updated.
 * @return array
 * @author: gresser 2020-11-26
public function resizeGifs(array $metadata, int $attachment_id, string $context)
    if (preg_match('/\.gif$/', $metadata['file'])) {

        foreach ($metadata['sizes'] as $image_site) {

            $file_path_original = wp_upload_dir()['basedir'] .'/'. $metadata['file'];
            $imagick = new Imagick($file_path_original);
            $imagick = $imagick->coalesceImages();

            $width = $image_site['width'];
            $height = $image_site['height'];

            foreach ($imagick as $frame) {
                $frame->cropThumbnailImage($width, $height);
                $imagick->setImagePage($width, $height, 0, 0);
            $imagick = $imagick->deconstructImages();

            $file_path_thump = wp_upload_dir()['path'] .'/'. $image_site['file'];
            $imagick->writeImages($file_path_thump, true);
    return $metadata;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.