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.

Photo by Mylene Tremoyet on Unsplash

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.

Photo by Alexander Shatov on Unsplash

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.

References

Image, Web video formats and Codecs

https://www.researchgate.net/profile/Kai-Barthel/publication/243446128_Internet_Still_Image_and_Video_Formats/links/541c0a0d0cf241a65a0bad03/Internet-Still-Image-and-Video-Formats.pdf

10/06/2024

https://www.techsmith.com/blog/video-file-formats/

10/06/2024

https://thegreatbear.co.uk/video-tape/codecs-wrappers-digital-video/

10/06/2024

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

10/06/2024

https://imagecodecs.wordpress.com/

10/06/2024