Skip to main content
cbolorinos
Participant
June 2, 2017
Question

How to do an HD GIF?

  • June 2, 2017
  • 4 replies
  • 23259 views

Hello,

My client wants me to do a GIF as a hero banner, something similar to this

http://headscape.co.uk/

but with more colors. I can stay within Photoshop's 500 frame limit, but I have a few questions:

1) How many fps can you get away with on a GIF?

2) Can you make a 1920 x 1280 GIF? Every time I try anything bigger than 500 x 400 Photoshop gives me an unknown error message.

3) Can you get a higher resolution GIF with color? And if so, what are the limitations?

I'd really appreciate any help you have.

This topic has been closed for replies.

4 replies

Conrad_C
Community Expert
Community Expert
June 3, 2017

GIF compression isn't very efficient for large animations; loading time and frame rate are highly dependent on the CPU and RAM available on the device. Since your questions 1, 2, and 3 all ask about significantly increasing the frame rate, frame size, and number of colors, be aware that doing so could make the animation load more slowly and run at a lower, more jittery frame rate for web site visitors with less powerful computers or phones, or if they are on a slow network connection. Almost all desktop and mobile hardware today has built-in optimizations for 30 fps playback of HD resolution H.264 video with low impact on CPU and battery, but GIF animation can't take advantage of that.

You can go ahead and continue exploring how to do what you want this, but you'll definitely need to test performance on the range of devices your client expects to look good on. You want to make sure that whatever you do isn't so large and heavy that it doesn't load or play as smoothly as expected, and you especially don't want it to delay the load time of the rest of the web page since that only turns visitors away.

One thing that makes the Headscape example work is that they seem to take care to animate only two very small areas of the frame. If they had animated large areas of the frame, the frame-to-frame processing load would be much higher, as well as the file size. Keeping the number of colors down was probably another conscious performance decision.

Nancy OShea
Community Expert
Community Expert
June 3, 2017

Trevor.Dennis  wrote

I don't think that's a GIF,

It's a GIF.   For me, it's 753 KB, 32 frames.  1000 px X 364px. 

The first frame is 5 seconds long.  The remaining frames animate the top right corner of the image without any delay.  And then the whole thing loops forever.

The big trick is to keep file size down to a minimum with the smallest size image and fewest frames possible.   As Conrad said, using a B&W image was probably a performance decision.  Less colors = less file size.

One other thing I should mention is this animation is used as a background-image with the CSS background-size property.  What that means is you can use a smaller width image and still have acceptable results in larger viewports.  BTW, I viewed this on an average HiDef display; not a high pixel density device.   I didn't look closely but given this is a  WordPress site, it's possible they're serving different sized images to different devices.   

Nancy

Nancy O'Shea— Product User & Community Expert
Trevor.Dennis
Community Expert
Community Expert
June 3, 2017

I stand corrected.    I can usually download animated GIF files and bring them into Photoshop, but this appeared to be saving as a .html file, and that's where my lack of website knowledge kicked in and I assumed it had to be some sort of embedded format. 

Legend
June 2, 2017

3) GIF has no resolution at all, so this is not meaningful, you can't increase or decrease the ppi because there is nowhere in a GIF to store a ppi. It is limited to 256 colours by design.

JJMack
Community Expert
Community Expert
June 2, 2017

You could do more colors with an MP4 video the file size would most likely be close or smaller in size to the animated GIF which only supports 256 mapped colors.  You would not need that many frames and you would not be using a high frame rate.

The banner you pointed at is an animated GIF it has 73 Frames the frame size is 1300px by 472Pisels and is 1.3MB in size save as a mp4 video its size is 0.5MB.

JJMack
Trevor.Dennis
Community Expert
Community Expert
June 2, 2017

I don't think that's a GIF, although there's no reason why you couldn't make one that size.  My connection is a middling 45Mb/s here, but it still took about 30 seconds for the animation to fully download and become fluid.

You are limited to 256 colours with a GIF, but it can be banner size.  1920 x 1280 and 256 colours with a bunch of frames would run to several megabytes, so you'd need to think about that.

I'd be inclined to ask the same question on the Dreamweaver forum where they would know how to build that sort of graphic with Animate and run it in HTML5 (at a guess — I don't do websites)

Trevor.Dennis
Community Expert
Community Expert
June 2, 2017

Here you go.  A 1920 x 1280 256 colour GIF.  Surprisingly, it is only half a Mb in size but it only has 77 frames, so is a bit jerky.

cbolorinos
Participant
June 2, 2017

How did you do this? This has 256 colors and 180 frames, but Photoshop gives me an error message: