How do you keep a GIF detailed when resizing in Photoshop?

New Here ,
Jul 24, 2019 Jul 24, 2019

Copy link to clipboard

Copied

When making GIFs, the initial image is almost always too big so needs to be resized - but whenever I do so, it always makes the GIF blurry afterwards. It's not always to a massive extent, but it's frustrating to see what would otherwise be a good, sharp GIF become blurred when made smaller. How do you resize the image, but still keep it HQ?

Message was edited by: Sahil Chawla

Views

4.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 24, 2019 Jul 24, 2019

Copy link to clipboard

Copied

Hi there,

That does not sound good, let's make it right.

  • Could you please let us know the version of Photoshop you're using?
  • Also, does it happen with every file or some specific files?
  • What's the size of the gif?
  • Are you scaling a really small image into a big one?

Regards,
Sahil

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 24, 2019 Jul 24, 2019

Copy link to clipboard

Copied

Hi Sahil,

It's Photoshop CC 2018. It happens with every single GIF. They have to be under 3mb each time for the website specifications, so the end file isn't particularly large. Sometimes it's much larger images into smaller ones, but often it's cropped a lot first just to get the target area, so the reduction isn't drastic. It's usually scaled down to around 500 or 540 pixels (width).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 24, 2019 Jul 24, 2019

Copy link to clipboard

Copied

There is no info on original or resized pixel width and heigh, nor is there a sample file - which makes it hard to comment. That being said, this sounds right and expected.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 24, 2019 Jul 24, 2019

Copy link to clipboard

Copied

Since it happens with all of them, I didn't include a particular example. There are some really good HQ GIFs (e.g, this random one on google) that are fairly large size wise.

Basically my question is just how do you get GIFS to look like that example without making them massive in file terms.

Image result for gif real

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 24, 2019 Jul 24, 2019

Copy link to clipboard

Copied

GIF files are indexed colour mode, which for best results should be resized in RGB colour mode.

You didn't mention that the GIF was animated, I was thinking static like a website icon.

This is why an example is important.

So it all comes down to reducing frames, reducing detail and colour, reducing pixel size and file size, dithering etc.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 24, 2019 Jul 24, 2019

Copy link to clipboard

Copied

The Eddie Murphy Gif has only 21 frames, a full 256 colour depth, and a file size of 750Kb.  That's quite small, but the pixel size is is quite low at 500 X 281.  It also has limited movement, and that makes a huge difference.

If your GIF is losing sharpness when downsizing, you need to look at the default Free Transform algorithm in Preferences. If not already so set, change it to Bicubic Automatic which will probably use Preserve Details 2, which is good at keeping things sharp.

Other than that, you need to consider each situation by it's own merits.  How busy is the image, and how complex the colours?  If you can get away with lower colour depth when exporting, that makes a lot of difference to file size. 

With a lot of movement, you don't want the frames to be too sharp, as it will produce jerky movement.  This is the last GIF I made (for our weekly SFTW threads) and I gave the moving frames some motion blur, but left the stationary frames sharp.  It still shows as jerky, but that's the nature of frame animations with lots of movement.

You will get better results starting with video, and converting to GIF when saving.  The apps that can do that best like After Effects and Animate also have way more features than Photoshop.  They can do ease in, and ease out.  They can do multiple moving elements, which is a chore with Photoshop.

Bunjee-Jumper-2.gif

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 25, 2019 Jul 25, 2019

Copy link to clipboard

Copied

pvrich  wrote

Basically my question is just how do you get GIFS to look like that example without making them massive in file terms.

Unfortunately, GIF uses a type of compression that's very inefficient for video. The compression works best for solid color areas, but video has so many colors that it's hard to compress. Your best chance is to, as much as possible:

  • Reduce the areas of the frame that include movement
  • Reduce the frame rate
  • Reduce the frame size (as you did by cropping)
  • Reduce the number of colors
  • Reduce the amount of dithering

The Eddie Murphy video might be relatively small because it has small pixel dimensions, movement is restricted to the middle of the frame, and there are relatively few colors in it. It helps that the background is basically just green.

For example, a worst-case scenario is when you make an animated GIF of a camera moving across a scene (every pixel changes in every frame), with a wide range of colors and tones, using noisy footage (adds more detail that's hard to compress), at 30fps or more, at 1920x1080. That is a recipe for a very large animated GIF.

A best-case scenario is a small animated logo using two or three solid colors - no shadows, gradients, or patterns.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 25, 2019 Jul 25, 2019

Copy link to clipboard

Copied

The Eddie Murphy video might be relatively small because it has small pixel dimensions...

I'd like to just point out that this GIF is definitely of Anthony Mackie.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 02, 2021 May 02, 2021

Copy link to clipboard

Copied

LATEST

Eddie Murphy?!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 25, 2019 Jul 25, 2019

Copy link to clipboard

Copied

Gifs are often used for type, If so keep a.psd version with live type & shapes. Then use save for web to make you .gif. You need to use the correct settings, so please share what settings you are using, should you like more help.

Trevor Dennis that is a lovely gif.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines