Proper image optimization is one of the most important SEO factors and that is why it is very important to pay special attention to this element. The main reason for that lies in the fact that the website has certain “rules” and requires that all elements on it, and primarily images, be optimized in a way that does not burden the Internet flow and its performance.
When we talk about image optimization, we primarily mean their compression, as well as the choice of the correct format and resolution so that they are suitable for uploading to the site.
What Seems to Be the Problem?
When it comes to image size, ideally they should not exceed 150 kilobytes, but if the site requires an extremely high-resolution display, then it is perfectly fine for their size to be between 200 and 300 kilobytes.
It is very important to distinguish between two types of image resolution on the site itself: the first refers to the resolution of the source (it is the resolution of the image you uploaded), and the second to the resolution of the image displayed on the site. All images on the website should be optimized so that their size (source) corresponds to their role (display). In a specific example, the image displayed on the site in a resolution of, say, 900 x 400px should not originally be much larger (for example, 2000 x 1500px). Ideally, these two types of resolutions should completely coincide.
In practice, it often happens that the marketer gets too big an image to upload to the site, which is faced with two options: to upload the image as it is or to prepare and optimize it beforehand. If you chose the first, easier option, there would be a very serious risk of additional and unnecessary load on HTTP requests and the flow itself, which would ultimately slow down the loading of the site, which is unacceptable, especially when it comes to SEO.
In terms of format, websites mainly use JPG, which is exploited for all those images that have a certain background and require a slightly richer display when it comes to colors, and PNG, which is used for images that require a transparent background. Which format you choose largely depends on what you show in the image itself, and within this text, we will show an example of image compression in both JPG and PNG formats. The basic rule you can follow is that if the image does not contain any background (as is often the case with logos, for example), you should primarily opt for PNG, while in other cases you can use both formats.
So, the performance of your website, SEO, and consequently the levels of audience engagement can all be significantly impacted by the size of your images. But did you realize that your email marketing follows the same exact rules? A large image in an email campaign can do far more harm than good if you send it to your readers. The email will take a long time to open and load, and you risk losing the interest of your readers before they get a chance to read the content. Resizing features are included in some platforms that aid in creating newsletter templates, like VerticalResponse. This one has the option to modify the image size by opening it in the “Library” and using Pixlr. This is, of course, if you do not want to do it externally via the tools we are just about to mention.
Yes, there are many different tools you can use to optimize your images, and which one you choose depends on the specific needs you have. Below we will mention a few tools that can be extremely useful when it comes to the process of optimizing images.
Image Optimization via Online Editor
If you need to quickly modify images and customize them for posting on the site, you can use several online tools that are very easy and simple to use. Some of them give you the possibility of simple compression, while with others you have a slightly higher degree of control.
All the tools listed below are very convenient if you work alone and if you want to optimize images quickly and efficiently.
TinyPNG
One of the most popular methods for compressing photos on the Internet is called TinyPNG. It enables you to pick and then compress several photographs that you want to optimize (you may load up to 20 at once). Although it is called TinyPNG, you may also compress JPEG-formatted images using this program.
The photographs are substantially smaller (in kilobytes) once the compression is finished, but what is most crucial is that the quality of the images is roughly the same as before the lowering. Even though just a few megabytes of space can be saved on the site if you need to optimize multiple photos, it is crucial for the long run of the site’s functionality.
Simply click the “Download all” option after the image compression is finished, and the pictures will be stored to your PC. We advise you to use this tool frequently, particularly when you have to do a task fast because the entire process of changing the image size takes no longer than two minutes.
JPEG Optimizer
Although JPEG Optimizer is generally used to edit photos in JPEG format, it is quite akin to the TinyPNG utility. It also has many helpful choices and is quite simple to use.
The first step is to select the photograph you want to optimize. The compression ratio calculation comes next. The size of the image will decrease as you choose a lower percentage, but you should be aware that if you do so, the image’s quality may suffer significantly. We advise against going much lower than the compression ratio of 65% that this program automatically selects.
The program will alter your image’s height (aspect ratio) depending on the third option, which is to choose the width you wish your image to have. Your image will begin to be treated when you click the “Optimize photo” button, and once it has finished, you may save it to your computer.
Squoosh
Squoosh is a fantastic additional tool that we shall discuss in this section of the article. When you first visit the website, you are given the choice to choose the image you wish to optimize. You can also choose to enhance SVG elements. A new window where you can make numerous changes appears once you select the desired image. This tool’s ability to let you view both the actual image and the image you are presently refining is really helpful.
You can first alter the image’s size and resolution by selecting the “Resize” option from the options provided here. Then you may choose the picture quality you require, and in the “Advanced” settings menu, you can also test by adjusting the image’s color and sharpness. Once you are satisfied with your choices, just hit the blue pointer in the bottom right to save the changed image.
Image Optimization via Photoshop
The online editors listed above are very useful in all those situations when you are in a hurry and when you need to quickly and easily modify images. On the other hand, if you want to have a greater degree of control and use additional image optimization options, it is recommended to use Photoshop.
Those who work in a team can turn for help to designers who already have experience in using this tool. Even though you might not be handling this aspect of the project on your own, it is crucial to familiarize yourself with the fundamental tools Photoshop provides for quick image optimization so that you can monitor and manage the process.
From personal work experience, we can confirm that ignorance can cost you dearly and that sometimes some people on your team will try to convince you that they need more time to do a job that really only takes a few minutes. It is for this reason that below we will list the most basic options that you can use to quickly and easily optimize images in this powerful design tool.
Crop Option
Consider what is actually necessary to observe on a photo before posting it online or if it contains any unnecessary elements. This is crucial because an image’s size is frequently impacted by a lot of features. Therefore, you must first look at the image you need to upload to the website and identify any elements that can be cut off. Cutting the unnecessary elements is advised whenever possible, but this technique will not always be achievable because there will be occasions when it will be absolutely crucial to examine all the details.
Use the straightforward “Crop” in Photoshop to swiftly crop an image, allowing you to choose the size necessary to eliminate all extraneous elements. The icon for this choice can be found in the main Photoshop menu on the left side of the window.
Image Size
After cropping the image, consider if its resolution is adequate and whether the size of its source matches the image’s display on the website. As was already indicated in the text’s opening, it frequently happens that the image’s source differs significantly from how it appears on the website, necessitating further resolution adjustment.
You can utilize Photoshop’s “Image size” option to modify the resolution of the image to meet the requirements of the website. You can alter the image’s resolution in a new window that opens once you click on the appropriate option in the top navigation menu. Ensure the connection in between width and height selections is enabled since in this scenario, entering only the specified width will be sufficient, as Photoshop will calculate and adapt the height automatically. The size of the image will be greatly reduced and more appropriate for posting on the site by altering the resolution.
How to Optimize Images with a Combination of Editors?
As a brief summary of this text, we will list all the steps expert webmasters take before they post an image on their sites, which we recommend using for all.
- Step 1 : At the very beginning, you should first look at the image that should be found on the site and determine if there is room for its crop. If you notice unnecessary parts, go into Photoshop and select the “Crop” option.
- Step 2 : After cropping the image, in most cases, you should adjust its resolution, as the images as a source are often larger than they are displayed on the site. Do this using the “Image Size” option, and for the purposes of properly optimized sites, experts choose an image size of a maximum of 1000 pixels (which is about 100px larger than the display itself). The reason for the slightly higher original resolution is the frequent need of the user to zoom the image itself if it contains somewhat smaller, and less visible elements.
- Step 3 : When you process the image in Photoshop, use the online editor TinyPNG with which you can further compress its size. If the image is large, repeat the process in TinyPNG twice to make sure it is minimized.
- Step 4 : Upload an optimized image to the site.
As you may have noticed, there are several different ways to optimize an image and prepare it for a site. There are really many online tools that can help you in this venture, and this text lists some of the most reliable and those that we can personally confirm are effective ones.
If you want to have a greater degree of control and do more things at the same time, you can use Photoshop, but if you do not have this tool or do not know how to use it, do not worry, all listed online editors here will allow you to modify and optimize images.
Author Bio
Mahendra Bajiya has always been interested in marketing and has built a successful career around it.
He is particularly focused on content marketing right now. If you want to get in touch you can find him on LinkedIn.
