Image

Images come in different forms, like photographs, illustrations, or digital art. In contrast to animations and videos, images are static. However, designers may add motion to images, transforming them into animations.

Images serve many purposes in digital products. Some images are decorative and add to the visual appeal of the interface. Other images are functional, such as product photos or illustrations of a technical process. Regardless of their purpose, images must be accessible to be effective. Resources from WebAIM and The A11Y Project provide considerations for designing accessible images and writing alternative text.

For digital images, the most common file types are raster and vector:

• A raster file is made up of pixels and often uses the extension .jpeg or .png. While a raster file can be resized as the image increases in size, it will lose quality and become blurry.
• A vector file is made up of equations that capture the shapes, colors, and properties of the image. Because a vector file uses equations instead of pixels, the image can be resized without compromising quality. Vector files are often saved with the extension .svg.

Each file type has its advantages and disadvantages as discussed in this article from Adobe XD.

Design software includes tools for importing images and adjusting their properties. Additionally, images can be created in design software and exported as SVG, JPEG, PNG, or PDF files.

Figma, a prototyping tool and graphics editor, has more information about adjusting image properties.