Mirko Fabian

Photo by Headway on Unsplash

Digital Image Design Overview

Mirko Fabian
Multimedia-Designer

11/06/24

Category: AIT (Academy for Interactive Technology), Assignment 

What is this article about?

This report will hit on the topics of digital media, including image manipulation and copyright basics. This report will give you a good overview about Image design and video use on web. 

Image, Web video formats and Codecs

Image Formats

When it comes to stills images there are four commonly used formats with different advantages and disadvantages, depending on the general use-case.

JPG

The most commonly used image format, which uses compression algorithms to keep the file size relatively small. One of the biggest disadvantages is, with every copy process the image deteriorates every time. 

PNG

For lossless image delivery PNG is a great option, it comes with additional benefits such as the ability to store alpha channels for full and partial transparency of pixels. 

Pro
  • Great compatibility 
  • Small file size 
  • Support for IPTC meta data
Pro
  • High Quality 
  • Alpha channel 
Con
  • High compression

  • Deteriorates the more often being moved

Con
  • Bigger file size 

  • Not always compatible

  • Requires more bandwidth 

GIF

Like PNG it offers lossless compression and alpha channels on a basic level. Another big feature is animation, which is a popular use case of GIF files. 

WebP

Developed by Google, it offers the good aspects from JPG and PNG in one very web optimized and search engine friendly format.

Pro
  • Animation

  • Alpha channel 

  • Small file size 

Pro
  • Can be animated 

  • SEO friendly

  • Smaller than JPG

  • Supports alpha channels

Con
  • Not good for photographic images, due to it’s limited number of colors 

Con
  • Compatibility

Video Formats (container/wrapper)

When it comes to video we differentiate between the container and the codec. Like “container” implies it’s where the data like images and audio files of a video are stored. A container holds different codecs.

Photo by Jakob Owens on Unsplash

MP4

The most common and popular video format/container is supported by almost any platform and device. Capable of storing audio, video, subtitles, text, and stills images. 

MOV

Quite similar popularity but developed by Apple. MOV is the standard format in the media industry for handling video files, especially when shooting in Apple ProRes codec. 

Pro
  • Compatibility

  • Relatively small file size

  • Great image quality 

Pro
  • Highly regarded in the film industry 

  • High quality

  • Easy to edit 

Con
  • Ease of piracy (stealing and manipulating the content)

  • Can experience audio syncing issues 

Con
  • Compatibility (doesn’t play on all devices) 

  • Bigger in file size 

Video Codecs

Codecs define the parameters of the video and audio signal. Parameters like bit depth, color space, and audio sample rate. The most commonly used codec for web is H.264 and now it’s successor H.265.

Photo by fabio on Unsplash

H.264 / AVC

AVC is a highly flexible codec with a variety of profiles with varying capabilities. It’s mostly comparable on various platforms including web browsers and end customer devices. 

H.265 / HEVC

This codec was specifically designed to efficiently deal with up to 8k video footage while making full use of modern processors. 

Video export settings for social media

For optimal output on social media it’s important to know which settings should be used to render your final video. Each platform has different requirements and although many of them optimize the videos after we upload them.

YouTube

Formats: MOV, MP4, HEVC (h265), ProRes, and others

Codecs: H.264, MPEG-2, MPEG-4

Aspect Ratio: 16:9, 9:16, 4:3

Resolutions:

2160p: 3840×2160

1440p: 2560×1440

1080p: 1920×1080

720p: 1280×720

Facebook

Formats: MOV, MP4

Codecs: H.264

Aspect Ratio: 16:9, 9:16, 4:3, 4:5, 1:1, 2:3

Resolutions:

1080p: 1920×1080

720p: 1280×720

Instagram

Formats: MOV, MP4

Codecs: H.264, VP8, AAC 

Aspect Ratio: 16:9, 9:16, 4:3, 4:5, 1:1, 19:10

Resolutions:

1080p: 1920×1080

720p: 1280×720

Image Manipulation Techniques

It’s not always possible to capture perfect photos due to environmental elements, mistakes on set, lighting conditions or various factors. Therefore different image manipulation techniques are used. 

Image cropping

When taking a photo in the moment of action it’s not always properly framed, if the shot os too wide, cropping is used to ensure unnecessary parts are cut out and the composition follows the basic rules again. 

Exposure correction

Depending on the lighting conditions when a photo is taken, we might need to adjust the exposure afterward, either under or over exposed images can easily be corrected. 

White Balance correction

To make ensure the white balance is natural, and potential color casts are removed WB correction is used.

Contrast adjustments

Enhancing the contrast will make the image more crisp by pushing down the shadows and bumping up the highlights. 

Blemish removal

Skin imperfections are normal, but in same scenarios like fashion photography it would distract from the main focal point  Fashion strives for over perfection that’s when blemish removal is used to manipulate the skin. 

Copyright Essentials

The Copyright protects intellectual property of the author, including written texts, images, audio files, and motion pictures. It protects the original form of the authors interpretation. It’s important to be aware that without the authors written permission you’re not allowed to copy or modify their work and claim it to be your. The use of a substantial part of someone’s work counts as infringement. 

The copyright of intellectual property expires after 50 to 70 years after the death. The copyright then goes over into public domain and can be used freely.

Citing and Referencing

First of all, citing and referencing describes acknowledging the sources that you’ve used for a project for school and uni. Correct referencing allows the reader or viewer to distinguish what is actually your work, and what parts have been used from a different source.

More articles

Mirko Fabian
Multimedia-Designer

Self-educated creative problem solver and entrepreneur. Writing about personal development, self-education, photography & filmmaking. 

Hashtags:
#filmmaking #film #movie #short #story #storytelling #visual #camera #script #actor #director #audience