Skip Navigation
Buy Now
Home » Course » WordPress Design » Using Images and Illustrations in WordPress » How to Design and Choose Images and Illustrations

How to Design and Choose Images and Illustrations

Images and graphics make your site attractive by adding color and accentuating your layout. They also help visualize your textual content. It’s important to understand what media options are available in WordPress and how to best use them.

Users often just scan pages and skip over paragraphs of text to find large headings or images that are relevant to what they are looking for. You need to add media that suits your content but also helps users find the information they need. The main media types that you can add to your site include:

  • Photos
  • Illustrations (Graphics)
  • Videos
A series of photos which complement one another and have similar content

How to choose media for your site

A website with slow-loading or random images puts off and confuses readers, so make sure to select your media content carefully. When deciding on the media content, everything you pick should follow these points:

  • Attractive and complementary to the site design
  • Informative and relevant to the content
  • Loads quickly
  • High quality

Finally, ensure that the color palette of the images or videos on your site match one another. You can use advanced software like Photoshop to edit the color of images to make them visually match in color scheme and effects. Doing this helps tie together the design and follows the points above. 

A set of images with different color palettes

A set of images that have similar color palettes

Image provider services

However, an easier and quicker way you can achieve a consistent look is by using a site such as Unsplash, Pexels, or Pixabay. These kinds of sites allow you to do this by searching with a color filter:

An example of an online service with visual search options

Please note that all of these points are also true for illustrations. Ensure you choose illustrations with the same colors and style so that your brand design remains consistent.

Illustration 1 uses the colors orange, purple, black and green
Illustration 2 uses the colors green, purple, orange, and black

These illustrations have the same style and won’t distract users from the content.

Whether your website is a business or a personal blog, you must always check that any images, illustrations, or videos you use follow copyright law. This means it is your responsibility to make sure the media content you use is copyright-free if you do not pay or give any attribution for it. 

Some good sites that have this information upfront about their media content include:

The search results for “therapist” on Pexels

If your site relies on photos for the majority of your content, and you have the budget, you can also hire a photographer or videographer to produce exclusive media content for your use.

Optimizing your Images and Illustrations

To make sure your images and illustrations load quickly, you must optimize them before uploading them onto your site. You can do this by:

  1. Using reasonable resolution. For example, don’t upload a large image file if the image is going to display in a small section of a page. 
  2. Before uploading any images, make sure to use an image optimization service such as Kraken or Tinypng. 
  3. If you have a lot of images, use a bulk image optimizer plugin such as Smush.
  4. Choose the appropriate display size (thumbnail, medium, or large) when you include images in your content

How to style your graphics 

WordPress only has basic options when it comes to styling any graphics you add to posts or pages. In order to create professional designs, you need to use plugins. 

The default image styling options from WordPress

Toolset enables you to apply different styling to images on your site. You can easily do these by expanding the Style Settings tab in the right sidebar and applying styling from the options here. 

The Toolset customization options from the Style Settings panel

You can apply different types of changes, such as adjusting the Border of images and Border Radius.

In the above example, the Border Radius is 25 pixels on each corner, so the image corner sharpness is rounder.

You can also adjust the shadows of your images, such as: 

Altogether, using a robust plugin such as Toolset can help you make design changes to your website that help your content stand out from basic templates.

Square images that don’t match the design of round buttons

Rounded images that match the shape of the buttons with illustration on top

Go to next step
Cloe
Updated
May 11, 2021
Send feedback to our documentation team