Mockups are intended to serve as a representation of a real product. To make the mockups look and feel like a real website, you’ll probably need to add images and logos to the mockups. There are a few things you should consider as you search for and addd images and logos to your designs.

Images and graphics usually fall into two categories: rasterized and vector.

Rasterized images are made of pixels, which are the smallest single element in a digital display. Each square-shaped pixel is organized and assigned a color, and all of the pixels fit together to form a complete image.

Rasterized images are measured by pixels per inch (PPI). The number of pixels in a square inch of an image determines its resolution or clarity. The more pixels that are packed into one square inch, the higher the resolution will be. Images with a high density of pixels appear sharp and crisp. On the other hand, images with few pixels per square inch have a low reolution, which makes them look blurry and low in quality.

An important characteristic of rasterized images is that they are limited to the original image’s size. If you make an image smaller, you can usually retain its quality. But if you make an image larger than the original image, it can cause pixels to be visible, making it difficult to see the image.

Rasterized images are categorized by their file format. File formats are standardized means of organizing and storing digital images. This is important to know as you design mockups because different file formats serve different purposes, and one file format may not work on every platform or screen size. Popular file formats include:

• JPEG: The JPEG (or JPG) file format supports millions of pixel colors, making it ideal for photographs. These files are usually rectangular and do not support transparency, meaning any negative space is filled with a white or black background. JPEGs are great to use on websites, because they load quickly and have relatively small file sizes.
• PNG: The PNG file format also supports millions of pixel colors. They have transparency capabilities, so they are great for images with transparent backgrounds. Because of this capability, however, PNG images usually have larger file sizes and load more slowly than JPEGs.
• GIF: The GIF file format supports both transparency and animations. Unlike JPEGs and PNGs, GIFs are limited to 256 pixel colors, so they can be more pixelated than other file formats. However, you’ll want to use GIFs to create animations in your designs.

The other category of images is vector images. Vector images are not composed of pixels, meaning they are resolution-independent. Every piece of the image is calculated mathematically from one point to another, in order to form lines and shapes that ultimately create an image. Vector images can be scaled to any size without losing quality.

Like rasterized images, vector images also have different file formats that serve different purposes. The most common vector image file format is SVG, which are vector graphics exported from a design software like Adobe Illustrator, Gimp, or Inkscape. SVGs are ideal for logos and graphic art in your website designs.

No file format is necessarily “better” than the other. Instead, the file format that’s right for your website design depends on the purpose of the image! Being aware of these file formats and choosing the best file format for your design will make your designs look professional and functional.

When determining the placement of images in your website mockups, it’s important to consider the aspect ratio that will work best on the screen size you’re designing for. The aspect ratio is the proportion of an image’s width to its height.

The aspect ratio is commonly written as two numbers separated by a colon. For example, when Instagram, the photo-sharing social media app, premiered in 2010, the platform only allowed users to upload square images. Square images have an aspect ratio of 1:1 which means the width and height of the image is the same. The red square in the image above has an aspect ratio of 1:1. Today, Instagram allows users to upload photos with other aspect ratios too, like 4:5 for vertical posts.

Add images to mockups in Adobe XD

With file formats and spect ratios in mind, you’re ready to add images to your mockups in Adobe XD. To do so, follow these steps:

1. Open the Adobe XD file with the responsive website designs you’ve been creating. You can create one if you don’t already have it.
2. Select the Rectangle tool from the left side bar, which is outlined in red in the image below.

3. Drag your cursor over the part of the artboard where you want to add an image, while holding the Shift key, to create a rectangle. A blue outline of the rectangle will appear on your artboard, as shown in the image below.

4. Click the photo or graphic you want to include in the mockup, and drag it inside the rectangular shape you just drew, as shown in the image below.

5. Using the Selection tool, adjust the image to your liking, For example, as shown below, you can adjust the image by clicking and dragging on the nine dots that outline the image.

Use images in your mockups

It is simple as that and remember to have fun adding and removing all kinds of images to your designs until you find the perfect fit for the website you’re creating. It might take you a few tries to find the image you’re looking for, and that’s okay! This is all part of the iterative design process.

Next, if you are interested in making the static images animated, check out the Interactions from Adobe XD.

Good luck!