This is our complete guide to image optimization for WordPress in 2023.
In this complete guide, you’ll learn:
- What is Image optimization for WordPress
- Why is Image Optimization Important
- Best Image Types for WordPress Website
- How to Find Images for WordPress Website
- Image SEO Best Practices
- Best Image Optimization Plugins for WordPress
If you want to save time to manage your images and get more traffic from your images, you’ll love this guide.
Let’s get started.
What is Image Optimization for WordPress
Usually, image optimization for WordPress include:
- Choosing the right image file type
- Reducing the file size of your images
- Improve the page load speed
- Naming your image files correctly
- Adding alt texts to all images
However, when you manage a WordPress website, you come across quite a few other hurdles as well.
In this guide, we will cover all aspects of image optimization for WordPress.
Why is Image Optimization Important
They say “a picture is worth a thousand words”.
Here are a few other reasons why WordPress image optimization important:
- Speed up the page load speed
- Helps with website SEO
- Helps to reduce the bounce rate
- Enhance user experience and conversion
- Helps with overall website performance
Let’s get to work to optimize your website images.
Step 1. Best Image Types for WordPress Website
Before you start the search for images for your WordPress website, it is essential to know a few basic things about images.
- There are different types of images
- They are used for various purposes in website projects
- By default, most images have a large file size, which is not viable in many cases
- The most common compressed image file types are .jpg, .gif and .png
Here is a quick overview of these types of images.
Types of Website Images & Their Best Uses
Let’s have a look at the different types of website images and best way to use these images.
JPEG
JPEG stands for Joint Photographic Experts Group, which is a lossy raster format. These images have a sliding scale of compression that decreases the file size tremendously but increases the artifacts of the image.
It is an excellent option for displaying sophisticated photographs that include a lot of colors.
Best Use
You can use JPEG images on your WordPress website when you are dealing with:
Printed photos: Work at high resolution with low compression.
Online photos: For quick download, raster editing and compression.
Demo images: Great option to email clients.
Avoid using JPEG images when you are dealing with a web graphic with transparency, and when you need a layered, editable image.
PNG
PNG stands for Portable Network Graphics, is a lossless raster format.
It is the most commonly used image format online.
PNG supports transparency which makes them a fantastic option for logos and icons in particular.
There are two categories for PNG:
PNG8(8-bit): allows for alpha transparency.
PNG24(24-bit): allows for a broader range of colors.
Best Use
Use the PNG image on your WordPress website when you are dealing with:
- Transparent web graphics
- Small files
- Graphics
- Limited colors
Avoid using PNG image on your websites because its file size is usually huge.
However, if you have no other option, then always remember to compress the image before you upload it to your WordPress website.
GIF
GIF stands for Graphics Interchange Format, is a lossless raster format.
If you want to show off animated graphics on your site, then this is the best image format for you.
Best Use
Add the GIF in your WordPress website when you are dealing with:
- Animation
- Transparency
- Small size files
SVG
SVG stands for Scalable Vector Graphics. It can display raster image files. Files in SVG format use an XML-based text format to describe how the image should appear.
Benefits of SVG are:
- Scalability and responsiveness
- Programmability and interactivity
- Accessibility
- Performance
Best Use:
Use SVG format when you are dealing with:
- Plain illustrations and diagrams
- Logos and icons
- Interactivity
- Special effects
- Building interfaces and applications
- Animations
- Charts, graphs, infographics and maps
WebP
WebP image type provides superior lossless and lossy compression for images on the web.
Using WebP image type webmasters and web developers can create smaller and more vibrant images that make the web faster.
Do you know, WebP lossless images are approx, 26% smaller in size compared to PNGs.
Best Use:
Use the Webp image type when you are dealing with:
- Photographic, clear and graphical web images.
- Lossless ARGB format.
- Lossless WebP compression
Step 2. How to Find Images for WordPress Website
Our brain can interpret images much quicker than text which is why images are often used to communicate messages.
But the image needs to be relevant to communicate the right message to your audience.
Here are some best platforms where you can find images for your website.
Pixabay
Pixabay is a vibrant community full of creative images. It allows you to share copyright-free images and videos.
You are free to use these images or videos for all commercial and noncommercial purposes.
You may use Pixabay images on social media platforms too. Check out Pixabay simple license details here.
Pixabay is the best place to find PNG images and is a free tool.
Flickr
Flickr is a photo-sharing platform and also a social networking platform, where any user can upload their photos for others to see.
It is a different kind of image search engine because the pool of images comes from amateur and professional photographers sharing their work on the platform.
If you enjoy browsing and searching for beautiful photos, this is your spot.
You can get images of any type from here. You can read the flicker community guidelines by clicking here.
Unsplash
Unsplash is a photo discovery platform for free to use, high-definition photos.
The photos on Unsplash are free to use, and you can use images for:
- commercial
- personal projects
- editorial use
You can also earn money on Unsplash.
You can use Unsplash photos as part of a product you sell. Still, you cannot sell an Unsplash photographer’s picture without first updating, modifying, or otherwise incorporating new creative elements into the photos.
You can check out Unsplash image license details here.
Step 3. How to Do Image SEO
Images can bring your content to life. They also help users to make better sense of your content and connect to it. However, search engines look at your images from a different angle which is why you need to optimize them for crawlers.
An optimized image has high-quality, format, dimensions and resolutions along with keeping the file size as small possible.
Here are some key points you need to keep in mind to optimize your images for search engines:
Use Images That are Relevant & Have Context
You should add relevant images, which support the context of your content.
For instance, if you are featuring, you are selling homemade lasagna on your website, you should add images of your lasagna and not random images of lasagna off the internet.
Select the Image Type Wisely
While optimizing images for your website, it is essential to understand how to choose the right file format for your images to meet your requirements best.
There are many image types, but three are commonly used file types:
- JPEG
- PNG
- GIF
The importance and its best use is already explained above.
It’s essential to choose the image type wisely. Have a look and feel the difference.
When you upload an image to WordPress, you get too see a bunch of different options:
- Image title
- Alt text
- Image caption
- Image description
Lets say that we upload this image to WordPress.
Here is how it will go.
Image Title
This image should be named Red Ferrari instead of DSC4536.jpg.
There is an automatic URL created against every image that you upload.
The images that have a descriptive name appear in Google image search results
Improving both your search engine rankings and website traffic!
Optimize Alt Text
Search engines not only crawl the text on your web page, but they also crawl your image file names?
Make sure that keywords and the image work together because your keyword phrase should describe the image.
It is essential to optimize the alt tags when the image doesn’t load, you’ll get an image box with the alt tag present in the top left corner.
If the image fails to load for any reason, users will see what the icon is supposed to be. Use of appropriate alt tags to the images on your website can help your website achieve better rankings in the search engines by associating keywords with images.
Even Google has remarked on the value of alt text in images.
This is used to help determine the best image to return for a user’s search query.
Don’t forget; a descriptive alt text can alert users as well as crawlers precisely what is in the photo.
Image Caption
Right under the alt text, you can see there is the option of adding captions.
Captions are used to describe the images for all users.
As is it is visible on the screen unlike the alt text it is also at times used for adding the source of the image.
A caption appears right under the image like this.
Scale for Image SEO
The loading time of an image is really important for SEO and for user experience too.
The faster the loading time of the website, the easier to visit the web page and also help for quick indexing.
Huge images take more time to load, so it’s better to display the images in small sizes. Reduce the pixels of the image and scale the images.
WordPress is already helping us with this by providing the images in multiple sizes.
But it definitely doesn’t mean that image file will become optimized by this.
Use Images That are Responsive
All images of your website should work well on all devices irrespective of the different screen sizes, resolution or other such features.
Responsive images is an essential for SEO.
In WordPress, you can use srcset attribute for making the images responsive.
Use Images That Have Flexible Structure
All images of your website should work well on all devices irrespective of the different screen size, resolution or other such feature.
Images having a flexible structure is essential for SEO. In WordPress, you can use these two attributes for making the images responsive
- srcset
- size
WordPress puts all the copies of an image with different sizes in the srcset attribute except the one of the thumbnail size.
It will allow the browser to know which image sizes are available. The size attribute is there to describe to the browser how the image should behave
Reduce the Image Size
The images with larger sizes will take more time to load and also slow down the website.
Consider, a situation where a user has to wait for 10-15 seconds and images that slowly drool down. Not a good user experience. Isn’t it?
Don’t worry! you can reduce the image size:
- Compressing the image or
- Resizing it
No doubt, compression can reduce the file size, but it may affect the image data.
You can resize the image by decreasing the number of pixels which reduces it’s file size proportionally.
Reducing image size doesn’t reduce image quality, although it may lose some tiny details if they become too small.
There are many tools online available where you can reduce the image file size like ReduceImages and ImageOptimizer.
Reduce Image Dimensions
Do you know while displaying your web page a browser has to figure out many things, most importantly the layout of your web page? And this can only be done if it knows the dimensions of your images.
It’s important to know that when an image is resized, its pixel information is changed. You should reduce the image dimensions wisely.
Many tools are available online to reduce the dimensions like
Add Image Sitemap
An image sitemap is required to scan and index the images on your website correctly.
If you are not creating an image sitemap, then images will
- Not be indexed
- Will create errors in the main sitemap
- Will not be crawled.
Don’t forget Google cannot found the content downloaded via JavaScript.
If you want that your website images to be found in image search results and be crawled then you should list their location in an image sitemap.
You can submit the sitemap to Google using the Search Console.
Adding image sitemaps doesn’t mean that your images will get indexed by Google, but it is good for image SEO.
Google Webmaster Tools has many suggestions for you to format your sitemap correctly.
Add Structured Data to Your Images
Adding structured data to you images does not help you rank but it helps your images appear in search results. Here is the crux of it:
- Alt attributes are a must-have
- Images should be crawlable
- Allow image indexing
There are a few guidelines that you have to follow to appear in search results. To learn more about it, you can go through Google’s Structured Data General Guidelines.
Step 4. Best Image Optimization Plugins for WordPress
There are several image optimization plugins for WordPress.
These plugins can help you out in many ways like for image compression, image resizing, lazy load and many more.
Here are some best plugins having most of features required for image optimization.
WP Smush
WP Smush in the most popular and commonly used plugin for image optimization.
It’s all-in-one type plugin because it has lazy loading, lossless image compression, bulk smushing and many more features.
You can avail all these features in the free version of the plugin and for more, you can use its paid version as WP-Smush Pro.
In WP-Smush Pro, you can have more features like convert PNGs to JPEGs, automatically resize your images, compress images in other directories, convert images to Web and many more.
Compress JPEG & PNG Images
TinyJPEG and TinyPNG are the most popular services. Compression of JPEG and PNG integrates with them.
When you upload images in your WordPress website they automatically compress them. You can compress them individually from the media library also.
If you want to optimize more than 100 images in a month then you should have a paid account. When you upload a single image WordPress generates additional sizes to make your site responsive and that will also count to the limit.
EWWW Image Optimizer
EWWW Image Optimizer automatically optimizes your images as you upload them to your site. It can apply lossy reductions for PNG images.
The plugin is free if you use your own servers to optimize your images.
But if you can’t use the exec() function on your server then you’ll have to pay to use the EWWW I.O. API and If you opt to use the EWWW service, you’ll have to pay an additional fee.
It will save your storage space and bandwidth too.
Do you know, this plugin not only optimizes all the images that you have already uploaded but also convert your images to the best file format.
Conclusion
Don’t take the image optimization for WordPress for granted because images are usually the main reasons to slow down your website.
The unoptimized images increase the website’s bounce rate, which affects website SEO severely, and you can potentially lose future clients.
Don’t delay it. Optimize images of your website now to improve your WordPress website health.
Have you found this guide for image optimization for WordPress useful?
Feel free to share your feedback in the comments below to help us improve this guide based on your personal experience.
Source: https://wpsupportdesk.com/blog/image-optimization-for-wordpress/
