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
SELECTING IMAGES
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 link.
· 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.
Optimizing Images
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, content creator, and social media specialist.
Image Citation:
fruit-2367029_640. Silviarita. Pixabay.com. Web. 7 July 2019.
Comments
Post a Comment