Get Awesome Images on Your Website
An important aspect of a professional WordPress website is great images. Images provide visual interest, add increased functionality, and help to communicate the message of the brand. In this article you will learn how to select the right images, how to optimize image, and how to correctly resize images to get professional image results on a website.
There are several things to consider when adding images to a website. These include selecting images that are appropriate for the subject matter of the website; optimizing images to prevent large files that cause slow website load times; and using the correct image sizes and proportions to prevent distorted images. We will cover each of these topics in greater detail below.
Selecting the Right Images and Logo
It’s very important to use the right images throughout the website. This is accomplished by making sure that: The images convey the message of the brand; are related to the content of the website; and adds visual interest to the website. Images are also used to help visitors navigate the website, and sell products or services.
There are numerous sources where great images can be obtained. If it’s within your budget, you could buy images from image websites or purchase image licenses to use stock images for specific amounts of time. These paid image sources include Adobe Stock, iStock, Shutterstock and others.
There are also websites that offer free images with, and without attribution. These free image sources include Unsplash, Pixabay, Pexels and many others. However, to avoid possible copyright issues, it is recommended that you create your own images for use on the website and on other platforms.
CHOOSING THE LOGO
Just as selecting the right images for the website is essential for communicating the message of the brand, it is also essential that the logo is a reflection of the brand. You will need to develop a brand logo, if you don’t already have one. A good brand logo will allow you to accomplish the following:
- The logo is appropriate for your brand;
- The logo distinguishes your brand from other brands;
- The logo helps to communicate the message of the brand; and
- The logo can be used across all digital platforms, including social network platforms.
It’s recommended that you start the logo process by looking at some famous logos for inspiration. Below are some tips and resources to help you develop the best logo for your brand.
- Less is more when it comes to logo design. The best logos have two things in common; the logo designs are simple and timeless.
- When selecting a graphic that will reflect your brand, determine if the graphic will have images, text or both.
- Use color psychology to select the colors that will best represent the brand. Color creates perception and can represent a type of industry. Take a look at color in logo design using this Color Emotion Guide
- Other options when looking for logos are websites where you can create your own logo using logo generators. These sources include Canva, Designhill, Squarespace and others. Some of these websites, like Logopond offer pre-made logo designs that can be purchased.
Once you have chosen your logo and images that will be displayed on the website, you will have to optimize the images. Images should always be optimized before adding them to the website to avoid having very large file sizes, which result in slow load times for the website. This is definitely something that you want to avoid. It is estimated that a typical user only allows three seconds for a Web page to load, and if it does not load within that time, they promptly move on.
When it comes to image manipulation, Photoshop is what comes to many peoples’ minds. However, Photoshop is only one of many ways to edit images. Some other ways to optimize images include using the device or application that was used to create it; using authoring programs; and online photo editing software. There are also free online photo editors such as Befunky, Canva and Pixlr.
The desired result of optimizing images is to reduce the file size while maintaining the quality of the image. Images that are correctly optimized results in a website with increased functionality and great images that communicate the message of the brand. The following are some quick tips for correctly optimizing images.
- Always save a copy of the original image in case the edited version does not turn out as you intended.
- Save images in the correct file type. For example, saving an image in PNG-24 format creates a larger file size than saving the same image in JPEG format.
- Reduce the bit-depth of bitmap graphics from a 24-bit to 8-bit color.
- Keep images below 1,000 pixels wide.
- Try to keep image file sizes below 200 KB
- Use a compression rate of 60% to70% to maintain image quality and reduce file size.
- Image resolutions of 72 to 100 dpi works well for Web viewing of both vector and raster images.
- When saving images, use the “Save for Web” option in your image editing software.
Adjusting Image Size and Proportions
Most website themes have recommended image sizes. Typical theme size recommendations are: Thumbnail size 150 x 150px; medium size 300 x 300px; and large size 1024 x 1024px.
- Thumbnail images are used to display portfolio items, or as breadcrumbs to help users navigate the website.
- Medium size images are used in page content and in blog posts.
- Large size images are used as page headers and background images.
- Always maintain the image proportions. When adjusting the dimensions of the image, adjust the width and height together to prevent distortion of the image. Objects in a distorted image will appear too wide or elongated.
For detailed information on image editing follow this instructional website link on digital photography. In my next article we will cover adding and editing images on the WordPress platform. There are several ways to edit images in WordPress. The benefits of knowing how to manage images in WordPress are professional websites with optimal visual appeal and high functionality.
Diane Penny is a full-stack Web designer, author and blogger. For more information on how to set up a professional website and stay up-to-date on current Web trends, use the “Sign-up” button above to subscribe to the "Tech Realm Newsletter." You can also find some great video tutorials on Web design and development by subscribing to the Diane Penny Web Design YouTube channel.
Diane Penny is a member of the Amazon Affiliate Program and receives a commission on sales generated using this "Shop at Amazon!" link. The revenue that is generated is used to maintain the Diane Penny Web Design blog so that we can continue to provide free Web industry information and other resources to our subscribers and guests. Thank you for your support.
fruit-2367029_640. Silviarita. Pixabay.com. Web. 7 July 2019.
Copyright 2019 - Diane Penny Web Design - All Rights Reserved