Disclosure: This content is reader-supported, which means if you click on some of our links that we may earn a commission.
They say a picture is worth a thousand words, which is why several web professionals prioritize including images in a website’s design and content. After all, visual appeal is important.
But there’s a catch.
Adding too many unoptimized images to your website can slow downloading speeds, which, in turn, can make your site visitors go POOF! Nobody wants to sit and wait for a site to load.
It’s not only about adding relevant images, but you also have to optimize them and make it easy for search engines to index them.
In this guide, we’ll discuss website images and how you can improve them to add more visual appeal to your website and boost conversions.
Ready? Let’s get started.
Why Website Images Is So Important
Today, images are more than a nice-to-have element for a website. They serve a purpose beyond looking good.
Website images can help boost traffic, and therefore conversions, by either gaining inquiries or making sales. Here’s a breakdown of what photos can do for your site.
Better User Experience
Having good quality images on your site helps you capture your visitor’s attention. They can also convey complex messages easily and quickly.
For instance, you can get an idea of some of the amenities offered by a hotel by looking at the pictures of the hotel and its rooms. So there’s no need to read lengthy descriptions.
The images you use must be relevant and not ‘filler.’ While the former delivers a contextual message that answers the need for information, the latter only looks pretty. There’s a difference—one you should make a note of.
Continuing with our hotel example, guests expect fast information whenever they visit a hotel’s website, which is what images help deliver explicitly and quickly. Having an image gallery optimized for hassle-free browsing can also contribute to a better user experience.
Better On-Site SEO
Image searching is incredibly crucial for your website traffic. When you use an image that matches the text, you can improve its rank in the image search section of search engines.
According to MOZ and Jumpshot, Google Images account for 26.79% of US searches, surpassing even YouTube and other Google properties. Youtube counts for a comparatively meager 3.71%.
You create more content for search engines to index when you properly label images with search-friendly metadata and captions. You double your discoverability, as your content can show up within web search results and search engines.
Better On-Site Dwelling Time
The total time spent by a visitor on your website serves two purposes: It’s a search ranking factor and a user engagement signal.
Google wants to find webpages that have extraordinary user engagement metrics. This includes dwell time, organic search click-through rate (CTR), conversion rate, and bounce rate, and once it does find these pages, it rewards the content with higher organic search rankings.
Every marketer will agree that images are part of a good website content strategy. However, the images need to act as both eye candy and information. In other words, your chosen images should do more than making the website look good—they should relate directly to the content. Even better if you can get original images.
Better Social Media Reach
Great images can help spread the word about your social media platforms. You don’t have to take our word for it—there’s research to prove it.
Adding at least one image on pages can increase your Facebook shares. Another found that social media posts with images enjoy higher engagement rates than text-only posts.
Quick Tips to Improve Your Website Images Today
Whether you own an online store, a blog, or a regular website, you want it to look amazing and load fast. Below, we’ve compiled a list of a few fast-acting tips to help you optimize the images on your website.
Always Use High-Quality Images
There are plenty of options when it comes to selecting high-quality images. We made a list of some of the best sources for you to get clear, high-quality, and relevant images.
Using Original Photos
You need original photos on your website. They can be images of your product or your team. Also, the internet is filled with helpful tips to make your pictures more well-lit and professional-looking without using expensive camera equipment.
Stock Photography
You don’t have to be a professional photographer to add great images to your website. Especially not when there are high-quality stock photo sites that let you download free images for commercial use. You can check out Pixabay, Unsplash, Barn Images, Little Visuals, and SplitShire. There are many others, but these are great sites to get started.
Downloading images from these websites will give you a massive JPEG file. So you’ll want to compress it for your website before using it, reducing the size to get a smaller version.
Graphics
Many people prefer adding graphic-based images. There are also tons of new (and free!) online tools you can use to build your own infographics or photos with font overlays. Check out Canva and PiktoChart for creating such graphics, and look for a logo-making tool for creating logos.
Pick the Right Image Format
There are many different file formats. You can choose between JPG, PNG, GIF, SVG. But on your website, it’s best to pick either a JPEG (JPG) or a PNG file type.
Here are a couple of guidelines to help you make the right file type choice:
Use the JPG Format to Save and Upload Photographs
JPGs can handle all of the colors in a photograph, keeping it in small and efficient file size. When you use JPEGs, though, you don’t have to deal with enormous files—something you have to handle when saving a photograph as a PNG.
Use the PNG Format to Save and Upload Graphics
Graphics include infographics, images with heavy text, and logos. And considering that PNGs are of a higher quality than JPEGs, they are more suitable for adding graphics, especially those using large, flat areas of colors.
Similar to SVG, PNGs deal with areas of colors and text with clear and crisp lines, allowing you to zoom in without losing the quality.
What’s more, they also support transparent backgrounds—something you use when adding a logo. We also recommend saving PNGs in a 24-bit format rather than 8-bit for better quality and a richer array of supported colors.
On the other hand, if you’re using a photograph with text sprawled over it, it’s better to stick to JPG.
While you can convert a PNG to JPG, changing a JPG to PNG isn’t worthwhile. The JPG file is already stored in a “lossy format,” with the image data already been lost due to compression, so there’s no chance to bring it back.
Instead of converting your logo that’s already in JPG format to PNG, go directly to your designer and ask for a PNG of the original design.
Keep the following in mind when choosing images for your website:
GIF
- Line drawings and simple graphics
- Animations
JPEG
- Photos, especially those without high contrast
- Screenshots of websites, movies, games, or similar content
PNG
- Line art or illustrations
- Photos with high contrast
- Transparency or alpha channel transparency
- Application screenshots or other detailed diagrams
Get the Image Dimensions Right
Images imported from a phone or a digital camera have a very high resolution (300 DPI) and large file dimensions (starting from 2000 pixels).
While these high-quality photos are an excellent option for print or desktop publishing, they aren’t suitable for websites. Website images should be resized using image editing software to make them more reasonable.
Your image’s proportions or aspect ratio is also important since it indicates how the photograph’s width compares to its height. For instance, an image with a 2:1 proportion is twice as wide as it is tall. This says nothing about the actual size of the image.
If your source image has the wrong proportions, you may not be able to use it for your website.
It’s why professionals use very large source material to be less bound by the proportions of the final image. You can always create an image of different proportions by cropping a larger one later.
Maintain Image Consistency
Website images look better if they are consistent in style and size. This also includes text lining, columns, and any other information that you add to your page.
Websites featuring photos with different dimensions look disorganized. This can make a bad impression on visitors, causing them to leave your site without really exploring it. On the other hand, a website with uniform photos and a well-planned color scheme will have a more consistent look. It’ll look more appealing to the users, spurring them to check it out further.
Long-Term Strategies for Great Images on Your Website
You have to add images to drive conversions, but too many can quickly add up, increasing your page size. You need to choose the images carefully, optimize them, and then upload them.
Wondering how? Read on.
Select the Right Image Optimization Method
You’ll find several methods to optimize your images. But as each has its pros and cons, you have to consider them all to make the right choice.
Caching
You can use the caching method to store the image files inside the browser’s cache or on a proxy server. It enables a shorter path to the images by reducing application requests, and fewer requests mean reduced loading times.
Compression
Bitmap images have compressible pixels, which lets you reduce the file size. When you compress an image, you remove redundant data, such as similar pixels in the image’s background. Compression also helps eliminate any slight differences in the pixels’ colors, making them all uniform.
Compression can be lossy or lossless. While the former removes extra data permanently, the latter allows the user to recover the data by restoring the image back to its original size.
That said, compressing an image also degrades the image quality in addition to reducing the file size. So that’s something you should keep in mind.
Resizing
Resizing involves reducing the dimensions of an image in pixels. This changes the amount of data involved, which can sometimes degrade the image, too.
Another resizing technique is called resampling, where you reduce the amount of data involved by minimizing the pixels in the image. You can also resize without the sampling, though. Here, you only change one variable: the image dimensions (length and height). Or you can also change the resolution.
You should select an image optimization method based on your needs, which gives you an image that makes your website look better.
Optimize Website Images for SEO
We’ve already discussed how your images can help you with SEO. Simply adding images by shrinking the size won’t get your results.
If you want to maximize your images’ ranking and boost your on-page SEO, you have to take two additional steps:
Step 1: Give Your Image File a Relevant Name
Choose a file name that not only describes the image but also contains the relevant keywords you’re targeting. For example, if you upload an infographic that talks about optimizing images for SEO, name it something around the lines of “optimize-blog-images–seo.png.”
Step 2: Fill Out the Alt-Attribute
The alt-attribute specifies the text that will be displayed if your image cannot load properly (alt=keyword). This gives search engines more context about what your image is about.
Similar to choosing a file name, your alt-attribute should be descriptive and target a relevant keyword.
Install and Activate an Image Optimization Plugin
With the invention of WordPress, you don’t have to do all the compression or formatting by hand—you have plugins to do all the hard work for you. These tools will automatically optimize your image files as you upload them and even optimize the images you’ve already uploaded.
Here’s a few of some of the best image optimization tools and plugins you can install on your WordPress site.
WP Smush
WP Smush can reduce the hidden information from images, which, in turn, will reduce the size without reducing quality. Users can also compress images manually, irrespective of whether the image is in JPG, GIF, and PNG format.
It scans the image before reducing them as you upload them to your site. The tool can also scan images that have already been uploaded and reduce them as well.
Bulk smushing is also possible—provided you stick to 50 1MB files only.
Imagify Image Optimizer
Imagify Image Optimizer has many things going for it. It has a bulk optimization feature that lets you choose between three different types of compression: Normal, aggressive, and ultra.
What’s more, it also has a re-store feature, which can come in handy when you’re unhappy with the image quality. You can take advantage of the one-click restore and compress to fine-tune the image to suit your needs better.
You’ll have to operate within the 25MB storage restriction as a free account holder. Otherwise, you can always signup for the premium account.
Optimole
Optimole is another excellent image optimization WordPress plugin that automatically reduces your image size without extra hassle. It’s an entirely cloud-based solution that never serves images bigger than they should. In other words, you’re assured of the perfect image size from the visitor’s viewport and browser.
All the compressed images are served via a fast CDN.
The plugin also provides lazy loading and efficient image replacement facilities, where it downgrades the image quality if the visitor has a slower internet connection. The automatic detection of the user’s browser to serve WebP—if compatible—is another plus.
