What is the meaning of image optimization?
Large images slow down your web pages creating an optimal user experience. Image optimization is the process of reducing their file size, using plugins or scripts, thereby speeding up the page's loading time. Loss loss and lossless compression are two commonly used methods.
Why is image (very very) important?
There are many, many reasons why you will (and should) use images in your posts and posts:
- Photos serve as a visual stimulus to the call to action (CTA). CTA can be any task you want your visitors to perform. Popular CTA includes signing up for your newsletter, sharing your article on social media or buying your product.
- Images enhance the connection the writer seeks to establish with the reader.
- Photos transmit more through less.
Therefore, the most important thing is that we use the right images in our presentations (blog posts, unofficial reports, actual PowerPoint presentations, etc.) to leave a mark in the mind. the mind of the reader!
But wait! Problem!
Images account for about 63% of the bandwidth used by modern websites, so it's more important that they are optimized at the right rate.
A one-second delay in page load time can reduce conversion rates by 7%. View source https://www.cloudflare.com/learning/performance/more/website-performance-conversion-rates/
We have established that people have a short attention span (one of the drawbacks of modern content production rates). Even if you use the right images, if they fail to load within an acceptable time frame, the interest will be lost.
The 10 most common image optimization errors
Most websites have one problem - they use great images, but the way they serve images to visitors is poor. Big size, poor optimization, incorrect format, unnecessary large size (size), unresponsive images, and careless SEO errors are some of the most common problems that modern webs have to deal with. face to face. In today's article, we will address these issues!
1. Large size
This is a classic. Let's say you need a 150 × 150 pixel photo in your Team page. Typically, you will use the 5MP title, edit a bit and eventually upload.
Did you spot the problem? Some people directly upload actual 5MP photos! The WordPress theme will load the whole 5MP image (i.e. 5 x 10 ^ 6 pixels) and ask the browser to shrink it to the required size of 150x150px. In essence, the browser only displays 0.0045% of the original image!
Ultimately, you will be wasting both visitor and visitor bandwidth (even if you are serving images through the Content Delivery Network like Stackpath CDN ), consume more hard disk space and increase load time. No feature is what you want in your website.
Always resize (and by resizing, I mean downsizing) the image to the required size and then upload it!
You don't need fancy software to do this - there are free online tools like ImageResize.org You can use this to quickly resize and optimize your images. Just upload and edit your photo settings. When you finish downloading your optimal image to use on your site. They also offer Fast Photo Compressor if you just want to cut down on file size. Vdu: https://imageresizer.com/compress-images
Other useful tools:
- IrfanView is a great freeware to resize your images with advanced options such as optimization, watermarks and borders.
- ImageMagick is an advanced open source tool that can be used in many programming languages and operating systems. You can write your own application or simply use it via the command line.
- ImageOptim (Mac) allows you to drag entire folders and quickly optimize multiple images.
- TinyPNG is an online image compression tool with API.
2. The image format is incorrect
The format used for images plays an important role. As a general rule, use PNG for vector graphics and computer-generated images such as clip art, etc. Use JPEG for photos or images with a variety of colors.
3. Do not use JPEG format
Normally, JPEG has two types - Baseline and Progressive. Visually, both are the same. The difference lies in how they are loaded:
- Baseline JPEG has only one layer - contains the whole image. When requested, the entire image is loaded at once.
- Progressive JPEGs combine images with multiple layers. A Progressive JPEG is loaded layer by layer, gradually increasing quality, ultimately giving you a lossless look.
- All major image changers allow you to save images as Progressive JPEG.
4. Do not use Lazy Load
Lazy-Loading is a great resource-saving technique, in which images are only loaded when visitors scroll down to the view of the image. Consider an article - 15 of the most fuel-efficient cars in 2014. Naturally, this article will contain at least 15 images. And regardless of the height of the display device - screen, tablet or smartphone, you cannot fit all 15 images in the viewport. You have to scroll down to see all the pictures.
When Quick Download is enabled, images will only be loaded when the visitor is in the vicinity of the image. In other words, the image starts to load only when you scroll down to view it. However, the first few images are loaded immediately because you are already in the viewport. Lazy Loading saves bandwidth at both ends and improves loading time! You can use Lazy Loading in WordPress with the Lazyload Plugin
5. Do not use CDN
Using the Content Delivery Network (CDN) will serve images from the server closest to the visitor's location. If a visitor from India requests an image and a CDN with a POP (presence point or simply server) in Tokyo and New York, the image will be served from a server located in Tokyo.
When you have significant traffic, you should set up CDN with WordPress to reduce load time and achieve overall performance. Here, we recommend it Cloudflare. For newborn websites, we will suggest a list of free CDN services that you can try.
6. Do not declare attribute ‘alt’
The ‘alt’ attribute describes images for search engines. The text you enter in this field will be displayed to the user in case the image cannot be loaded. A lot of people tend to leave these fields blank. This is very detrimental to SEO and you lose traffic. You should always try to include your website's keywords in the image's alt tag.
7. Do not optimize images
Optimized images are 40% lighter than normal images. This improves loading time and saves bandwidth. From our list of the best WordPress image optimization plugins, we will suggest Shortpixel to optimize your image. Kraken.io is also a great online option for compressing images at a glance. We use it all the time at WPExplorer to optimize featured images before uploading them to posts and theme demos.
8. Responsive Images
Even if your site responds, that doesn't mean your image. That means the header image you use for desktop 22 screens is also provided for iPhone 5. When you upload an image, WordPress changes its size to multiple versions - Photos Small, Medium, Full Size, etc. This may be changed by the developer. A well coded theme will serve the medium sized image version of the midrange, thus saving bandwidth.
9. Photo captions
Annotations are not always necessary, although in some cases it is required - such as screenshots in the tutorial. Image annotations help readers understand the topic better, while promoting your SEO.
10. Image file name
Think of the file name from a search engine's point of view. Use the same text as you would in the image's ‘title’ tag. Also, try to include the keywords that best fit your site.
8 Image optimization plugin in WordPress
Thankfully, with WordPress, you don't need to do all the formatting or compress manually. You can use the plugin to do at least some work for you automatically. There are several plugins that will automatically optimize your image files when you upload them. They even optimize the images you have uploaded. This is a handy feature - especially if you already have a website filled with images. Below, take a look at some of the best plugins to format your images for better performance.
It is important though that you do not rely solely on plugins. For example, you should not upload 2 MB images to your WordPress media library. This can result in eating up your web storage space very quickly. The best method is to quickly resize the image in a photo editing tool, then upload it and use one of the following plugins to further reduce it.
ShortPixel Image Optimizer
ShortPixel Image Optimization is a free plugin that will compress 100 images per month and will compress many types of files including PNG, JPG, GIF, WebP and even PDF files. It will perform both image compression and loss. It will convert CMYK to RGB.
It takes your images and thumbnails into the cloud for processing and then returns them to your site to replace the original. It creates a backup of the original files so you can restore them manually if you want. It will convert library files in bulk. There is no limit on the file size.
Imagify Image Optimizer
Imagify was created by the same team that developed WP Rocket, which most of you are probably familiar with. These are WooC Commerce, NextGen Gallery and WP Retina compatible.
It also has a batch optimization feature and you can choose between three different compression levels, normal, active and extremely. It also has a restore feature, so if you're dissatisfied with the quality, you can restore and compress it with just one click to a level that better suits your needs. There is a free and premium version. You are limited to a quota of 25 MB images per month with a free account.
Removing the original image and resizing your larger image can also be done with this plugin.
Imagine also compressing images on their third party server, not yours, which is very important when it comes to performance. Imagine slowing down your WordPress site
Optimole
Optimole is an image optimization WordPress plugin that automatically reduces your image size without any work necessary for you. It has a great advantage when it comes to loading speed of your website because it is completely cloud-based and never serves images larger than necessary, or the display of perfect image sizes. for browser and visitor views.
Moreover, the plugin provides the ability to load lazy images and replace images effectively - it lowers the image quality if visitors have a slower internet connection - making it stand out from the crowd. It also automatically detects the user's browser and serves WebP if it supports it.
All images that Optimole compresses are provided via fast CDN. You can try Optimole for free or upgrade to a premium plan if you need more bandwidth and processing space.
EWWW Image Optimizer helps you make your images smaller and your site faster with less trouble getting started. There are no size limits and plenty of flexibility, you can use the default or completely customize the plugin to your liking. All IO EWWW users can use Batch Optimizer to compress their existing images or use Media Library list mode to select and select specific images to compress.
Additional directories can be scanned to ensure that all images on your site are properly optimized. EWWW IO even allows you to convert your images to next generation formats like WebP or find the best image format for images with multi-format conversion options. Image compression starts with just $ 0.003 / image.
Advanced compression API lets you take compression to a whole new level without loss of quality, unlock PDF compression and include convenient 30-day image backup. The ExactDN feature starts at $ 9 / month for automatic compression (no server-side compression required), automatic resizing and all the benefits of CDN for faster and more efficient results. Higher productivity on all device sizes.
Optimus Image Optimizer
The WordPress Optimus Image Optimizer uses lossless compression to optimize your images. Lossless means you have won. It supports WooCoomerce and many websites and has a nice batch optimization feature for people with existing large media libraries. It is also compatible with WP Retina WordPress plugin. There is a free and premium version. In the premium version you pay once a year and you can compress an unlimited number of images. If you combine it with their Cache Enabler plugin, you can also dive into the WebP image, which is a new lightweight image format from Google.
WP Smush
WP Smush has both free and premium versions. It will reduce hidden information from images to reduce size without losing quality. It will scan images and reduce them when you upload them to your site. It will also scan the images you have uploaded and reduce those images. It will batch blur up to 50 files at once. You can also smudge yourself if you like. It will blur the types of images JPEG, GIF and PNG. File size is limited to 1MB.
- It is compatible with some of the most popular media library plugins like WP All Import and WPML.
- All image optimization is done with lossless compression techniques, keeping your image quality high.
- It does not matter which folder you save your image in. Smush finds them and compresses them.
- Smush has an option to automatically set width and height for all images, so all your images are resized in identical proportions.
TinyPNG (also compressed JPGs)
TinyPNG uses TinyJPG and TinyPNG services (free accounts allow you to compress about 100 images per month) to optimize your JPG and PNG images. It will automatically compress new images and compress your existing bulk images. It will convert CMYK to RBG to save space. It will compress JPEG images up to 60% and PNG images up to 80% without losing image quality. It has no file size limit.
ImageRecycle
ImageRecyle plugin is automatic image and PDF optimizer. This plugin focuses on not only compressing images but also PDFs. A really handy feature is the ability to set a minimum file size for compression.
For example, if you have 80 KB images, you can automatically exclude them from compression. This ensures that images and files are never compressed too much. It also includes batch optimization and automatic image resizing.
Note: They have a free 15-day trial, but it's a premium service, and images are uploaded and compressed using their servers. They do not charge per month, but instead are the total number of images that are compressed, starting at $ 10 for 10,000.
Conclusion
Image SEO is extremely important for any website - old or new. People who perform image SEO right way (which can sometimes be quite mundane), will gain an organic amount of traffic (the best type of traffic) in long time.
Do you have any other ways to optimize images on WordPress? Please comment below to share with me.
CEO - Founder of Compa Marketing. Specialist with over 5 years of experience in the field of Digital Marketing, SEO / SEM in Vietnam and the world.
0 Comments