Did you know that optimizing your images before uploading to WordPress can have a huge impact on your website speed?
When they first start a blog, many newbies just upload images without making sure they are optimized for the web. These big image files slow down your website.
You can fix this by using best practices for image optimization as part of your normal blogging routine.
In this article, we’ll show you how to optimize images for web performance without sacrificing quality. We will also tell you about WordPress plugins that automatically optimize images and make your life easier.
What Is Image Optimization?
Image optimization is the process of saving and sending images in the smallest file size possible without losing quality.
Image optimization is the process of reducing the file size of an image without significantly degrading its quality. This is done by removing unnecessary data from the image file, such as metadata and unnecessary color information. Image optimization can be performed manually using image editing software, or automatically using specialized tools and online services.
Even though it sounds hard, the process is actually quite simple these days. You can use one of the many plugins and tools for optimizing images to automatically reduce the size of images by up to 80% without losing any of their quality.
First, let’s look at how image files are stored and how optimization works.
How are pictures kept?
A picture is made up of squares of color called pixels. The image’s overall color scheme is made up of the colors in each pixel.
For instance, the image below has 736 pixels. Each pixel has three colors: red, green, and blue. So, this picture has 2,316 colors:
Now, when your web browser gets an image, it sets up an image buffer, writes each pixel of the image into the buffer, and then draws each line of pixels from the buffer to create the final image on the screen.
A unit called a “byte” stores each pixel. So, if each pixel is made up of three colors and each color is defined by four bits (which gives 16 million options), the whole image is made up of 64 KB (64,000 bytes) of colors.
This is why JPEG and PNG are still in the year 2022 the most common formats for storing images.
The JPEG (Joint Photographic Experts Group) format is “lossy,” which means that it loses some information when it compresses the file to make it smaller.
The PNG (Portable Network Graphics) format is a lossless format, which means that it doesn’t lose any information when it compresses images. This helps images keep their full quality.
So, when we optimize images, we lose some information on purpose in JPEGs so that we can reduce the file size without losing too much of the image quality. When people request these compressed images in the future, your web browser will recreate them and show them on the screen.
Here’s an example of an optimized vs unoptimized image:
As you can see, when optimized properly, the same image can be up to 80% smaller than the original without any loss in quality. In this example, the image is 52% smaller.
How Does Image Optimization Work?
Image optimization works by removing unnecessary data from an image file, such as metadata and unnecessary color information, without significantly degrading its visual quality. This can be done manually using image editing software, such as Adobe Photoshop or GIMP, or automatically using specialized tools and online services.
In simple terms, image optimization works by using compression technology.
Compression for images can be ‘lossy’ or ‘lossless’.
Lossless compression reduces the overall file size with absolutely no loss of image quality. With lossy compression, there may be a minor loss in quality, but ideally, it won’t be noticeable to your visitors.
What Does It Mean to Optimize Images?
You may have received a recommendation to optimize images from your WordPress hosting support or a speed test tool and wonder what you need to do.
You will need to reduce the file size of your images by optimizing them for the web. We’ll show you how to do that step-by-step.
What Are the Benefits of Image Optimization?
While there are many benefits to optimizing your images, here are the top ones that you should know:
- Faster website speed
- Improved SEO rankings
- Higher overall conversion rate for sales and leads
- Less storage and bandwidth (which can reduce hosting and CDN costs)
- Faster website backups (which can reduce the cost of backup storage)
Images are the second heaviest item on a web page after video. According to the HTTP archive, images make up 21% of an average webpage’s total weight.
Since we know fast websites rank higher in search engines (SEO) and have better conversions, image optimization is something that every business website must do if they want to succeed online.
Now you might be wondering how big a difference image optimization can really make.
According to a Strangeloop study, a one-second delay in website load time can cost you 7% of sales, 11% fewer pageviews, and a 16% decrease in customer satisfaction.
If these aren’t enough reasons to speed up your website, then you should know that search engines like Google also give preferential SEO treatment to faster-loading websites.
This means that by optimizing your images for the web, you can both improve website speed and boost WordPress SEO rankings. Last argument: Optimized Images take up less storage space on your server meaning faster backups.
How to Save and Optimize Images for Web Performance
The key to successful image optimization for web performance is to find the perfect balance between the lowest file size and acceptable image quality.
The three things that play a massive role in image optimization are:
- Image file format (JPEG vs PNG vs GIF vs WebP)
- Compression (higher compression = smaller file size)
- Image dimensions (height and width)
By choosing the right combination of the three, you can reduce your image size by up to 80%.
Let’s take a look at each of these in more detail.
1. Image File Format
For most website owners, the only four image file formats that really matter are JPEG, PNG, GIF and WebP. Choosing the right file type plays an important role in image optimization.
To keep things simple, you want to use JPEGs or WebP for photos or images with lots of colors, PNGs for simple images or when you need transparent images, and GIFs for animated images only.
For those who don’t know the difference between each file type, the PNG image format is uncompressed which means it is a higher-quality image. The downside is that file sizes are much larger.
On the other hand, JPEG is a compressed file format for images that slightly reduces image quality in order to provide a significantly smaller file size.
Whereas GIF only uses 256 colors along with lossless compression which makes it the best choice for animated images.
WebP is an image format developed by Google in 2010 that uses a lossy and lossless compression algorithm to reduce the file size of images without significantly degrading their visual quality. It was designed to be an alternative to the popular JPEG and PNG formats, offering similar or better image quality at a smaller file size. In general, WebP images are smaller than JPEG and PNG images of similar quality. This speeds them up and make them quite efficient to use on the web.
WebP is supported by many modern web browsers, including Google Chrome, Mozilla Firefox, and Opera. It is also supported by a growing number of image editing software, including Adobe Photoshop, GIMP, and Pixelmator.
On our website we use all four image formats based on the type of image.
2. Compression
The next thing is image compression, which plays a huge role in image optimization.
There are different types and levels of image compression available. The settings for each will vary depending on the image optimizer tool you use.
Most image editing tools like Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo, and others come with built-in image compression features.
You can also save images normally and then use a web tool like TinyPNG or JPEGmini for easier image compression.
Although they require some manual effort, these two methods allow you to compress images before uploading them to WordPress, and this is what we do on Commander-SEO.
There are also several popular WordPress plugins like Optimole and EWWW Image Optimizer that can automatically compress images when you first upload them. This is convenient, and many beginners and even large corporations prefer to use these image optimization plugins.
We will share more about using WordPress plugins later in the article.
3. Image Dimensions
When you import a photo from your phone or a digital camera, it has a very high-resolution and large file dimensions (height and width).
These photos have a resolution of 300 DPI and dimensions starting from 2000 pixels and more. While high-quality photos are well-suited for print or desktop publishing, their large size makes them unsuitable for websites.
Reducing the image dimensions to something more reasonable can significantly decrease image file size. You can simply resize images using image editing software on your computer.
For example, we optimized a photo with a resolution of 300 DPI and image dimensions of 4900×3200 pixels. The original file size was 1.8 MB.
We chose the JPEG format for higher compression and changed the dimensions to 1200×795 pixels. The file size was reduced to just 101 KB. That’s 94% smaller than the original file size.
Now you know the most important factors in image optimization. Let us take a look at various image optimization tools for website owners.
Best Image Optimization Tools and Programs
Most image editing software comes with image optimization and compression settings.
There are several powerful free image optimization tools that you can use to optimize images for the web (with just a few clicks).
We recommend using these tools to optimize images before you upload them to WordPress.
This helps you save disk space on your WordPress hosting account, and it guarantees the fastest image with the best quality.
Adobe Photoshop
Adobe Photoshop is a premium image editing application that lets you export images with a smaller file size for the web.
Using the export dialog, you can choose an image file format (JPG, PNG, GIF) that gives you the smallest file size.
You can also reduce image quality, colors, and other options to further decrease file size.
If you export your image, you can reduce the Quality Score for the JPG compression and see if the output still fits your needs.
As an Alternative, you can make use of the specific command called “Save For Web”. It optimizes the image file for displaying online. This is important as the regular “Save” command can end up creating file sizes 2-3 times larger than the “Save For Web” command. In the “Save For Web” box, we need to make a few selections.
GIMP
GIMP is a free and open-source alternative to Adobe Photoshop. It can be used to optimize your images for the web. The downside is that it is not as easy to use as some other solutions on this list.
First, you need to open your image in GIMP and then select the File » Export As… option. This will bring up the Export Image dialog box where you can give your file a new name. Next, you need to click the ‘Export’ button.
You will now see the image export options. For JPEG files, you can use the ‘Quality’ slider to select the compression level and reduce file size.
Finally, you should click on the ‘Export’ button to save the optimized image file.
Pixelmator
Pixelmator is a popular image editing software for Mac and iOS devices. It is known for its user-friendly interface and powerful editing tools, which make it a popular choice for professional and amateur photographers, graphic designers, and other creative professionals.
Pixelmator has many tools for editing images, such as tools for changing colors and tones, retouching and fixing images, and adding filters and effects. It has a variety of tutorials and other tools to help users learn how to use the software and improve their skills.
TinyPNG
TinyPNG is a free web app that uses a smart lossy compression technique to reduce the size of your PNG and JPEG files. All you have to do is go to their website and upload your images using simple drag and drop.
They will compress the image and give you a download link.
They also have an extension for Adobe Photoshop which is what we use as part of our image editing process because it lets you access TinyPNG from inside Photoshop.
For developers, they have an API to convert images automatically, and for beginners, they have a WordPress plugin that will do it for you. More on this later.
Kraken.io
Kraken.io is another online image optimizer that you can use. Like TinyPNG, it’s free (with a premium option) and lets you compress images in bulk.
However, it offers more compression options than TinyPNG: For example, you can choose from three optimization modes, including lossy and lossless. With lossy compression, you can make your image file significantly smaller by removing large amounts of data from your image. Meanwhile, lossless compression reduces your file size without removing any data from the image. Therefore, this method is ideal for high-quality images.
JPEGmini
JPEGmini is an excellent image optimizer. It uses a lossless compression technology that significantly reduces the size of images without affecting their perceptual quality. You can also compare the quality of your original image and the compressed image.
ImageOptim
ImageOptim is a Mac utility that allows you to compress images without losing any quality by finding the best compression parameters and removing unnecessary color profiles. It uses any compression method you want (JPEG, PNG, GIF, SVG, etc.) and combine multiple images into a single image if you like.
Best Image Optimization Plugins for WordPress
We believe that the best way to optimize your images is by doing it before uploading them to WordPress. However, if you run a multi-author site or need an automated solution, then you can try a WordPress image compression plugin.
Here is our list of the best WordPress image compression plugins:
- Optimole, a popular plugin by the team behind ThemeIsle
- EWWW Image Optimizer
- JPEG, PNG & WebP Image Compression, a plugin by the TinyPNG team mentioned above
- Imagify, a plugin by the popular WP Rocket team
- ShortPixel Image Optimizer
- Smush – an excellent Image Optimizer Plugin
- reSmush.it
These WordPress image optimization plugins will help you speed up your website by compressing your images very efficiently.
Final Thoughts and Best Practices for Image Optimization
If you’re not saving images optimized for your WordPress site, then you need to start doing so now. It will make a huge difference in your site speed and page load times, and your users will thank you for it.
Faster websites are great for SEO, and you will likely see an increase in your search engine rankings.
Outside of image optimization, the two things that will speed up your website are using a WordPress caching plugin and using a WordPress CDN like Cloudflare for example.
Alternatively, you can use a managed WordPress hosting company. They often offer both caching and CDN as part of the platform.
We hope this article helped you learn how to optimize your images on WordPress. You may also want to see our guide on how to improve your WordPress security and how to check your website performance via Google Performance Insights.
Frequently Asked Questions
The easiest and most efficient way to optimize JPEG images for web is to use a file compression tool. These tools do much of the heavy lifting for you by using advanced algorithms to identify and remove unnecessary data. This can dramatically reduce the size of your images with minimal impact on quality.
Use lower resolution
The size of a JPEG image is determined by the combination of its width and height. The size of these values determines the size of the file itself, so to reduce the size of your images, you should try reducing the resolution.
The resolution of an image is measured in pixels per inch (ppi). The standard resolution for modern digital photos is 300 ppi, which results in a file that is 12 times larger than it would be if it was saved at 72 ppi.
If you save images at a lower resolution, they will be smaller without losing much (if any) detail. To optimize a JPEG for web, you should lower the image’s resolution to the lowest acceptable, reduce the image’s color levels (this will decrease file size), and reduce the image’s pixel density (usually, this is not a factor in reducing file size).
Remember, when optimizing images, you should always keep the same level of quality in mind. Lowering the resolution may result in a less sharp image, for instance, but if you don’t need that level of sharpness, it doesn’t make sense to carry the extra weight of unneeded data.
The most important picture size is 2500 pixels for most websites to extend fullscreen across all browsers. Any larger images could be removed or blurred by needing to fill the browser width. Smaller images will show pixelated and low quality.
Your image will fill the browser width without losing quality when displayed at 100%. Sites like Twitter, Instagram, and others recommend this size as their own profile picture size. Besides, this size works perfectly for desktop and laptop screens at high resolutions.
TinyPNG is an online tool that utilizes lost compression techniques for the reduction of file size. It just needs dragging and dropping your image onto their website and uploading them with a single click. This compression process gives you a download URL.
Besides TinyPNG, there are many other tools to optimize images online. Some of these include:
-
ImageOptimizer – free online service, you can resize, compress and optimize your image files
-
ImageKit – A web-based tool that reduces image sizes by up to 70%.
-
Image Optim – An online tool that optimizes jpeg and png images for the web.
There are several steps you can take to optimize images and ensure that your website loads quickly:
-
Use images that are the appropriate size and dimensions for their intended location on the website. Resizing images using HTML or CSS can slow down the page load time.
-
Compress your images to reduce their file size without sacrificing quality. There are many tools available online that can help you compress images without losing visual quality.
-
Use the correct image file format for the type of image you are using. For example, JPEG is a good format for photographs, while PNG is better for graphics with transparent backgrounds.
-
Consider using lazy loading, which delays the loading of images until they are visible on the user’s screen. This can help reduce the amount of data that needs to be loaded initially, speeding up the overall page load time.
-
Use a caching plugin or service to store copies of your images on the user’s device, so they don’t have to be downloaded every time the page is accessed.
By following these steps, you can optimize your images and improve the overall performance of your website.
SEO (Search Engine Optimization) includes image optimization because it can help a website rank higher in search engine results. By optimizing the images on a website, businesses and people can improve its speed and performance, which can help it rank higher in search engine results.
When a user does a search on a search engine, the search engine crawls the web to find relevant and high-quality websites to show in the search results. As part of this process, the search engine also looks at the images on a website and considers their size, quality, and relevance when deciding how to rank the website.
If the images on a website aren’t optimized, they can make it take longer to load, which can hurt the website’s position in search engine results. Large, high-resolution images can take longer to load, which can make a website feel slow and unresponsive to users. This can make people leave the site and look for one that is faster and easier to use.
On the other hand, if the images on a website are optimized, they can help the website run faster and better. Images that have been optimized are smaller and of higher quality, which can help a website load faster and give the user a better experience. This can help the website rank higher in search engine results, making it more likely that people will find it and visit it.
Image optimization is a critical part of SEO because it can help a website rank higher in search engine results. By optimizing the images on a website, businesses and people can speed up and improve the performance of their website. This can help their ranking and bring more people to their website.
Our other Blog posts
Top 10 Mistakes Small Business Owners Make When Using SEO
Know Which Common SEO Mistakes to Avoid to Grow Your Local Business In spite of the importance of search engine
6 Top Places to Hire WordPress Developers
Sometimes you need the help of a WordPress Professional. As WordPress is so widely used, there is no shortage of