M3

File Size in Animations

Animations can vary in file sizes and this is completely dependent on the content of the animation. An animation with more colours, frames per second and length will be larger in size thus taking longer to load on the internet. These animations would be of high quality at the cost of high file size. Lower quality animations would be lower in file size.

Frame Disposal

Frame disposal is a method used in animations for the reduction in its file size. Frame disposal simply removes the current frame before the next frame is brought up, so the two are not existent at once which makes for the lower file size each time a new frame is introduced - it is removing unnecessary frames. The obvious benefits are that it reduces file size, can make the animation smoother and might even improve the animation by reducing the number of repeated images/frames in an animation. However frame disposal could lose some of the animation's content as it's getting rid of some frames. 

The image above shows options of frame disposal. The automatic option will remove a frame if the coming frame has layer transparency. 'Do not dispose' disables disposal in the frames, and 'Dispose' will dispose of the frame regardless. Adobe have a guide on animations here.

The two animations above are made differently, with transparent backgrounds. The first image is made with the 'Dispose' option, while the second is made with 'Do not dispose'. This is evident as the previous frames are still present during movement, while in the first one the previous frame is removed as the second one comes on. In an animation with a background this is not an issue as it is in the second animation, however due to the transparent background it does not appear well and would require the dispose option.

Auto Crop

Auto crop is a feature present in many programs and is used to clear the blank space on the canvas in order to decrease file size and reduce/remove unnecessary space. It simply crops down to the furthest edges of the drawings to remove blank space wherever it can. The image below is a cropped version of the image above. The tool used here was the Trim tool, highlighted in the Image menu. This allows one to base the trim off whichever pixel (I based it off the bottom left, which was white). It cropped accurately to the edges.

Other Factors Affecting File Sizes

Colour Depth/Number of Colours

More colours in an animation will obviously increase its file size. This is because more colours are stored and represented in the animation. Simple animations featuring fewer colours will load much faster and can afford to be longer because of the fewer colours. It is a matter of balance. Reducing colour will take a drastic hit on the quality but also on the file size, thus making it easier to load.

Transparency

Background transparency in an animation can reduce file size. This is because there aren't extra pixels present for the background - without these extra pixels the image reduces slightly in file size, and transparent animations are preferred usually over ones with default backgrounds because they take on the background of the site itself and it looks well blended in and fitting.

Sounds

Sounds in animations are not always common but it goes without saying that including them into an animation will boost the file size. Higher quality sounds will make the animation even larger.

Resolution

Better resolutions for animations will make the file much larger which can be worth it for the noticeable quality. However resolution might need to be sacrificed for a lower file size, and sometimes it would need to be reduced anyway for mobile devices because high resolution images could be larger and thus being unable to fit properly on a phone screen.

Frame Rate

This is very simple - higher frame rate means more frames in a second, meaning more loading due to the file size. Higher frame rates deliver better quality and smooth animations, but with this comes longer loading times with the large file size. Reducing frame rate is the obvious solution, along with others offered by some sites such as skipping every 5th frame for example, it will give a choppier animation but will be lower in file size.

Content

After numerous attempts at compression an animation might not be accepted by some sites (for example a site might only accept 5MB or lower animations). Some of the content might have to be cut from the animation or one could reduce some frames as mentioned above for a choppier performance but enough for it to be uploaded/used properly.

P5

Rollover images are made up of two images. HTML code allows the web designer to have a primary image that is displayed naturally until the mouse moves over the image (rolls over, hence rollover image) and then displays the secondary image. Websites can be used on links in a website where rolling over a picture will show more information like where the image links to, or having two images in one space. Rollovers are used to save space by having two images in one space as well as for the design part of it - it looks nicer for users. The main benefit to a rollover is that it allows more information or another extra image to be added to one primary image on the screen - a picture can turn into a block of text explaining the picture or explaining the page that it links to. In compact spaces it can hold two images in one and can be activated with a rollover. However rollover images don't quite work on mobile devices and can be quite a nuisance for users if there are way too many, because it is very likely they will want to move the mouse over the page but will end up activating rollover images they do not really care for. An example of the code used in the rollover above is below.

E-cards are electronic greetings usually sent by messages but more commonly by email. Below is a Christmas e-card I made.

E-cards are usually very beneficial over traditional paper cards because they can be sent electronically and to numerous people whereas with traditional paper cards they must be handmade, hand-written and sent out separately by post. E-cards also have the ability to be animated when viewed - this is the main benefit over physical cards. However e-cards are not always beneficial because in case of a slow internet connection the e-card might not load for the receiver, and if it does it could be very slow. The technology behind e-cards is the animation file formats - most commonly they are of the GIF format. When e-cards are sent by email they are usually attached as they are an image themselves. Attachments in emails are very simple - when composing the email the option to attach a file is available, and the user just needs to locate the file and then upload it, it is then attached and sent with the email. Sometimes e-cards have sounds that play along with it, and this increases the file size further for the better quality of presentation - it will play a sound for a better experience.

https://www.hallmarkecards.com/ is a well known professional e-card creator. They offer e-cards for numerous events.

Animations are used on various types of technology. This usually includes mobile phones, desktop computers, laptops, tablets, and public display screens (standalone screens in public places). These devices have different abilities. In terms of animation, mobile phones and tablets can load animations (modern smartphones have no problem) however it does put stress on the devices because they are obviously built with weaker CPUs/RAM and it also depends entirely on connection - mobile devices usually have lower connection speed than desktops/laptops especially being wireless and the wireless hardware is not as strong. This means several things for the developers. They would have to adjust it for screen sizes - while it can fill a mobile phone's screen, if viewed on a computer monitor it might be very small. Resolution also fits into this but with the added factor of higher resolution = higher file size/quality leading to loading times and connection problems upon loading it due to the added detail. Download speed is very vital too because longer loading times are usually a result of file sizes or bad internet connection. Colours in images also increase the file size. GIFs already are limited in colours but reducing the number of colours even further can help to reduce a heavy-load animation thus making it easier for tablets/mobile phones to view whereas desktop users won't find problems due to the good processors. Formatting can be a problem but a rare one as GIFs are very common on the internet right now. Mobile devices made by Apple don't have access to Flash which can sometimes cause a problem, but when animations are in GIF format they can be viewed easily. Considering how easy it is for an animation to be in GIF format this is not that big of an issue.