Reducing the size of images in megabytes without losing quality is a relevant issue for all website owners who want to optimize their websites. Often, it is the photos that take up a significant portion of the website's file size. And this applies not only to Joomla websites. One large photo can weigh more than a small website (without images).
In addition to images taking up a lot of space on both physical and web servers, the large size of photos affects the website loading speed. The more images on a page, the slower the site will load. The larger the file size of each image in megabytes, the more time the page will take to load.
It is not always appropriate to reduce the number of images on a page, but it is always appropriate to reduce their file size. Even if there is only one photo on the page. Such are the requirements of Google for websites.
The more optimal the file size of images on a website, the less your users will have to wait, which positively affects SEO. Website loading speed is one of the most important SEO indicators.
Below, we will go through the optimization of image file size without significant loss of quality step by step, with examples. It is necessary to optimize photos in this sequence.
Step 1. Image resolution adjustment
The most obvious measure to reduce the file size of an image is to adjust its resolution. If an image resolution is sufficient for your site, such as 1000 x 1300 pixels, there is no need to use a larger image, such as 3000 x 3900.
If you received the original photo in high resolution or downloaded it from a stock photo website, using the image on your website in its original size is considered bad practice, and Google is unlikely to appreciate it. Reduce the image resolution to the minimum necessary.
You can decrease the size of the photo proportionally and/or by cropping out unnecessary parts, such as empty areas on the sides. Below, we will show you how to do this in Adobe Photoshop (a professional graphics editor) and Paint (a free standard Windows program).
Adjusting image resolution in Photoshop while maintaining proportions
Open the image in Photoshop: File > Open... .
-
To resize, go to Image > Image Size... (Alt + Ctrl + i).
-
Specify the desired width or height values to change the resolution.
-
The link connecting the width and height fields indicates proportional resolution change (i.e., when the height changes, the width changes accordingly, and vice versa).
After adjusting the width and height parameters, click OK at the bottom of the pop-up window. Then, you can save the file.
1) To save, choose File > Save As...
2) Select the desired file type (e.g., JPEG or PNG). Then click Save (bottom right).
The photo will be saved in the specified location (e.g., on the Desktop). You can also choose a custom file name.
Changing the image resolution in Paint while maintaining proportions
Despite the obvious advantages of Photoshop, images saved in Paint (JPG / PNG) usually do not lose in quality, although they may have a larger file size. After reducing the photo size in the third step, photos saved in Paint and Photoshop become roughly equal in quality and file size. Thus, the free program Paint can be sufficient for a simple task like resizing an image (with subsequent compression - step 3).
Open Paint through the Start menu or use the search function by entering the program name. (If you can't find Paint through Start or search, type the path C:\Windows\System32\ in File Explorer and locate the file named "mspaint.exe".)
After launching Paint, open the photo for editing: File > Open, and then choose the desired image.
- Click on Resize.
- In the opened window, you can choose percentages or pixels as the parameter for resizing.
- Enter the necessary width and height parameters of the photo.
- Checking the box signifies maintaining the aspect ratio of the photo when changing the height or width.
After adjusting the parameters, click OK. To save the photo, select File > Save As. Then you can choose the saving format (JPG, PNG, and others), as well as the file name and the location where the image will be saved.
Cropping an image in Photoshop (2 methods)
Method 1: Changing the canvas size
Open the image in Photoshop: File > Open.
Go to Image > Canvas Size... (Alt + Ctrl + c).
In the opened settings window, you can set the width and height parameters (the photo will be cropped according to the entered parameters).
Choose the unit of measurement for the photo (e.g., pixels or percentages).
Select the photo cropping direction. For example, an arrow from left to right means that the area on the right will be cropped (or enlarged) when changing the width parameter.
After changing the parameters, click OK.
To undo an action in Photoshop, press Ctrl + Z.
Method 2: Deleting the selected area
You can also crop an image in Photoshop by selecting a specific area with the cursor and deleting it. This method can be useful if you are cropping based on a specific object depicted in the photo.
After opening the image, open the Layers panel by pressing F7.
Unlock the layer with the image by clicking on the lock icon:
After unlocking the layer, you can remove any area of the image using selection tools, such as "Rectangular Marques Tool" (shortcut key M).
Let's assume that we need to remove the mountain range on the right side of the photo. To do this, we select the area on the right using a dashed rectangle and press the Delete key.
As a result of deleting the selected area, there should be an empty (transparent) background in its place.
To quickly get rid of the resulting empty area, select Image > Trim... In the opened menu, the settings remain at their default (based on transparent pixels), simply confirm by clicking OK. "Trimming" will remove the transparent part, leaving only the filled area.
The image is saved through File > Save As... (detailed image saving instructions are described above).
Cropping an image in Paint
In the Paint program, you can crop an image by simply dragging the boundaries.
If you have deleted too much, undo the action by pressing Ctrl + Z.
To save the photo, use the File > Save As buttons
If needed, you can combine different ways to reduce the image resolution. Start by cropping it (removing unnecessary areas), then adjust the height or width of the image while maintaining the proportions.
Step 2. Changing the image format
Usually, photos in JPEG format weigh less than PNG or BMP formats. That's why Google considers JPEG format more optimal. However, JPEG is not always the lightest; it depends on your original image file and the saving methods. For example, a computer screen screenshot initially saved as PNG may weigh more when saved again, even if it is saved as a JPEG. You need to look at the final result. You can save the photo in JPEG and PNG formats and compare which variant has a smaller file size.
If your image has a transparent background or other transparent areas, you should save the photo in PNG format to preserve transparency.
Saving an image in JPEG format in Photoshop
-
Choose File > Save as...
-
Choose the file type JPEG (JPG).
Click Save. Next, the editor will offer parameters for saving the image.
Leave the quality at 8, as this is the optimal value that reduces the file size of the photo without significantly affecting the photo's detail. Click OK.
Saving an image in PNG format in Photoshop
You can save the image in a similar way as described above. However, instead of JPEG, select PNG. In other words, go to File > Save as, choose the file type PNG, and click Save. The parameters for saving the photo in PNG will look as follows:
Here you can select the file size from large to small and click OK. Choosing the smallest file size means that the saved file will weigh the least compared to other options. However, saving in a small size will take more time.
An alternative method of saving in PNG is Fast Export:
Open the Layers panel (F7), right-click on the image layer, and select "Quick Export as PNG" from the context menu. No saving parameters will be offered, and the image will be saved immediately. This method can be used without fear, considering that the image will be compressed later (Step 3).
Saving an image in JPEG/PNG format in Paint:
In the Paint program, saving images is quite simple. Go to File > Save As, and then choose the JPEG (JPG) or PNG format.
Compared to Photoshop, Paint does not have image quality settings when saving.
Step 3. Reducing file size without losing quality (Image compression)
Regardless of whether you saved the image in JPEG or PNG format, whether you used Photoshop, Paint, or another program, it is always worth reducing the file size of the photo. After all, even the most optimized image can be compressed.
To reduce the file size, we will use the online service https://tinypng.com/. You can simply drag and drop the photo onto the service page to instantly get a compressed photo without losing quality.
There are many similar online services that you can find by searching on Google. https://tinypng.com/ is really good at compressing images and can reduce the file size of an image by a significant amount. However, it is always important to check the quality of the photo after such processing. The limitation for each photo is 5 MB (for free usage).
If you have two versions of the image - in JPG and PNG formats, upload both versions to Tinypng and see what happens. Sometimes, a file with a larger initial size ends up with a smaller file size after compression.
During the image optimization process, it is essential to save the originals. Also, it is necessary to ensure that the image quality does not suffer a noticeable degradation.
Additionally, a slight reduction in file size can be achieved by removing image metadata. You can remove metadata when exporting in Photoshop (File > Export > Export As - a settings window will open, where the Metadata area should have the option "None" selected), or by using special programs such as Exif Pilot, Easy Exif Delete, or Exif Tag Remover.
The first three steps are the main ways to reduce the file size of an image without losing quality. You can use any of them, for example, just compress the photo (step 3). But by applying all the methods step by step, from the first to the third, you will achieve the best result.