Image Types and Formats lesson

Conventional wisdom says that an image is worth a thousand words. A study proves this idea by noting that the human brain processes visuals 60,000 times faster than text. Moreover, visual information is easier to remember and recall than auditory one. However, other factors like motivation can influence our abilities.^[1]

So you know that images are certainly important. But what do the acronyms like JPG, PNG, GIF mean? More importantly, how do they differ from each other? By understanding these names and other image terminology, you'll know what words to use for communicating with designers, developers, and clients and which formats to use in which cases.

Exercise #1

Icons

In web and mobile UI design, icons are pictograms that visually represent ideas, objects, or actions. They tell users how they can use various elements throughout the design.

When used correctly, icons can speed up user interactions as they are immediately recognizable. They can also add style and visual interest to user interface designs.

Pro Tip: The best icons are those that can be understood without putting in a lot of guesswork.

Exercise #2

Illustrations

An illustration is a visualization made by an artist to explain an idea, concept, or process. It refers to any artwork such as a drawing, photograph, pencil sketch, or painting.

Illustrations come in different forms. Common forms include:

Editorial illustrations in magazines, newspapers, and books
Concept art in games and movies
Fashion illustrations
Infographics
Packaging illustrations

The most popular digital tools for creating illustrations are Adobe Illustrator, Adobe Photoshop, and Procreate.

Exercise #3

Patterns

In UI design, a pattern refers to the repeated use of lines, shapes, colors, or forms. These aren't just for decoration; they serve a functional purpose, helping to distinguish different elements on the screen.

There are two main types of patterns:

Regular patterns have a consistent, predictable repetition of elements. Think of a checkerboard or stripes.
Irregular patterns shake things up a bit; the elements or their arrangement may vary, offering a less predictable layout.

Whether you opt for regular or irregular, the key is to use patterns in a way that enhances the user experience, without overwhelming or confusing users.^[2]

Exercise #4

Assets

In design, assets refer to the digital resources utilized throughout the design process. These encompass UI components, typefaces, images, icons, videos, mockups, wireframes, text content, animations, and audio files. Effectively managed assets are essential to ensure that design projects proceed without hitches and fulfill their aesthetic and functional objectives.

Exercise #5

JPG

JPG (also referred to as JPEG) is a standard image format for compressed images. The abbreviation is short for Joint Photographic Experts Group and pronounced as "jay-peg."

JPG shrinks the file's storage size, discarding unnecessary image details and decreasing quality. That's why JPG files can't display files with the "richest" color depth and transitions. Each time you edit an image and save it, it loses details due to compression.

In comparison to PNG, JPG doesn't support pixel transparency. If you create a transparent background and save the image in JPG, the background becomes white.

JPG format is the best option for small-sized images, such as images used on websites or emails. Quality is less important than site speed in this situation.

Pro Tip: Avoid saving text-heavy images and illustrations with fine lines in JPEG. Those details will get blurry after compression.

Exercise #6

GIF

GIF is an image file format that supports animation and transparency. The abbreviation stands for Graphics Interchange Format.

You've definitely encountered GIFs as small animated images on the web. GIF images allow for only a small file size due to a limited number of supported colors (256).

According to the creator, American computer scientist Steve Wilhite, the term should be pronounced as "JIF," contrary to the widespread pronunciation of "GIF."

Exercise #7

PNG

PNG is an image file format used for high-quality images. PNG stands for Portable Network Graphics.

In contrast to JPG, PNG compresses images without losing a bit of information. This means no blurring or other undesirable effects. While GIF supports only 256 colors, PNG images can include over 16 million!

One of PNG's standout features is its ability to support transparent backgrounds. This is especially useful in UI design for creating logos, icons, and other graphic elements that need to overlay different backgrounds without a visible square box around them. Although PNGs offer better quality, they do take up more storage space compared to JPEGs.

Exercise #8

SVG

SVG is a vector image format. The abbreviation stands for Scalable Vector Graphics. SVG images are made up of mathematical formulas, so they don't depend on pixels and can be scaled to any size without pixelating.

One of the many advantages of the format is that it can be created and edited with any text editor. SVG images can also be compressed, animated, and printed in high quality at any resolution.

Most designers use software tools such as Adobe Illustrator, Sketch, or Inkscape to create SVG images.

Pro Tip: SVG images are perfect for responsive design, as they stay sharp and don't lose their quality at any scale or zooming degree.

Exercise #9

Blur

Blur is a visual effect used to soften the details of an image, making it appear as though it's viewed through a haze or mist. By reducing the focus and clarity of the background, the blur effect guides users' attention to specific foreground elements. It's an effective tool for making text, icons, or other interface elements more prominent and easy to focus on.

Most graphic design software, including Adobe Photoshop, Figma, and Sketch, offer various blur options. Whether you're looking to highlight key information or create a visually pleasing backdrop, blur can be a strategic design choice.

Exercise #10

Lottie

Lottie is a recently new JSON-based animation file format. When a page's loading time matters, Lottie is a more reasonable choice than GIFs. It's very small in size and takes 3,000 times less space than a GIF.

You can scale Lottie files, and the quality of animations remains crisp and vibrant due to being coded. GIFs have a hard time performing and compressing complicated graphics, and files get blurry and pixelated when zooming.

Designers can edit Lottie files at any stage and change the background color or increase the speed. To find the largest collection of free Lottie animations you can use on your website or application, go to the LottiesFiles website.