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:
- Illustrations (Graphics)
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
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:
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.
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:
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.
To make sure your images and illustrations load quickly, you must optimize them before uploading them onto your site. You can do this by:
- 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.
- Before uploading any images, make sure to use an image optimization service such as Kraken or Tinypng.
- If you have a lot of images, use a bulk image optimizer plugin such as Smush.
- Choose the appropriate display size (thumbnail, medium, or large) when you include images in your content
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.
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.
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
- Displaying Images with Toolset
- Styling Custom Searches
- Styling a Site Header and Footer
- Styling Views and Archives
- Styling Single-post Templates
- Show all related topics...
- Choosing and Applying Colors in Your Site
- Using Typography for Better Website Readability
- WordPress Site Identity
- Where a WordPress Sites Design Comes From
- Adding Custom CSS to Templates, Archives and Views
- YouTube Videos with Advanced Options
- Styling Front-End Forms
- Creating a Hero Section
- Adding Dynamic Content to Your Homepage
- Creating Responsive Columns and Grids
- Creating Responsive Designs
- Advanced Styling with Container Blocks
- Display Content Conditionally