1. Graphics Mill 11.5.53
  2. Working with Image Formats

Loading and Saving Animated WebPs

WebP is an image format developed by Google Inc. This format provides lossless and lossy compression for images on the web. WebP can be used for animated images as an alternative to the popular GIF format.

Graphics Mill allows working with WebP images as a whole or with each image frame separately. There are two main classes to deal with WebP files: Codecs.WebPReader and Codecs.WebPWriter. For more information about format readers and writers see the Working with Files topic.

This topic contains the following sections:

  • reading WebP images, which describes how to load a WebP image and save its frames to separate image files
  • writing WebP images, which demonstrates how to create a WebP image from a set of image files, and how to specify general WebP settings
  • resizing WebP images, which examines how to shrink a WebP image

Reading WebP images

You can read a WebP image from a file or a stream by using the appropriate WebPReader constructor. After the image is opened use the WebPReader.Frames property to get access to an image frame or to iterate through all frames in the image.

The following code reads a WebP image and saves its frames as separate PNG files:

C# 
using (var reader = new WebPReader(@"Images\AnimatedWebP.webp"))
{
    for (int i = 0; i < reader.Frames.Count; i++)
    {
        reader.Frames[i].GetBitmap().Save(@"Images\Output\WebP_frame_" + i.ToString() + ".png");
    }
}

Writing WebP images

To write a WebP image to a file or a stream use the appropriate WebPWriter constructor. The WebPWriter properties allows specifying the general WebP image settings, such as playback count, image optimization, etc.

Any bitmap having WebP-supported pixel format can be a frame of a WebP image. You can check if the pixel format is supported either by using the table or via the IsPixelFormatSupported(PixelFormat) method. To add a frame to the writer, run a pipeline by calling the Pipeline.Run method. If you are not familiar with pipelines, read the Understanding Image Processing Approaches in Graphics Mill topic.

The following code creates an animated WebP image from separate bitmaps:

C# 
using (var writer = new WebPWriter(@"Images\Output\AnimatedWebP.webp"))
{
    writer.FrameOptions.Delay = 250;

    for (int i = 0; i < 400; i += 25)
    {
        var bitmap = new Bitmap(400, 100, PixelFormat.Format24bppRgb, RgbColor.Yellow);

        using (var graphics = bitmap.GetAdvancedGraphics())
        {
            graphics.FillEllipse(new SolidBrush(RgbColor.Green), new System.Drawing.RectangleF(i, 0, 100, 100));
        }

        Pipeline.Run(bitmap + writer);
    }
}

Resizing WebP images

To resize an animated WebP file you should resize each of its frames separately. So you need to perform the following steps:

  1. Copy general setting of the WebP file.
  2. Iterate through all frames of the image. For each frame perform the following steps:
    1. Copy frame settings to a new frame using the WebPWriter.FrameOptions property.
    2. Get the bitmap of the frame.
    3. Preserve the original palette and pixel format.
    4. Resize the bitmap in a high quality mode to avoid color and transparency loss.
    5. Convert the bitmap back to the indexed format keeping the transparency.
    6. Add the frame to the writer by running a pipeline. If you are not familiar with pipelines, read the Understanding Image Processing Approaches in Graphics Mill topic.

The following code resizes an input WebP image to half of original width and height.

C# 
using (var reader = new WebPReader(@"Images\AnimatedWebP.webp"))
using (var writer = new WebPWriter(@"Images\Output\AnimatedWebP1.webp"))
{
    //Copy general properties of the source file
    writer.BackgroundColor = reader.BackgroundColor;
    writer.PlaybackCount = reader.PlaybackCount;

    for (int i = 0; i < reader.Frames.Count; i++)
    {
        //Read a frame
        using (var frame = reader.Frames[i])
        using (var bitmap = frame.GetBitmap())
        {
            //Preserve the original palette
            ColorPalette palette = bitmap.Palette;
            //Preserve the original pixel format
            PixelFormat pixelFormat = bitmap.PixelFormat;

            //Convert the bitmap to a non-indexed format
            bitmap.ColorManagement.Convert(ColorSpace.Rgb, true, false);

            //Resize the bitmap in a high quality mode
            bitmap.Transforms.Resize(frame.Width / 2, frame.Height / 2,
                ResizeInterpolationMode.High);

            //Return to the indexed format
            bitmap.Palette = palette;
            bitmap.ColorManagement.Convert(pixelFormat);

            //Copy frame delay
            writer.FrameOptions.Delay = frame.Delay;

            //Add the frame
            Pipeline.Run(bitmap + writer);
        }
    }
}

See Also

Reference

Manual