Speed is one factor that make your website successful. The users will leave immediately if your site takes time to load.
According to the quora thread, only 1o seconds is the limit to keep the users attention focused on the dialogue. This means that if you have a website that takes forever to load your readers will leave no matter what’s inside your article.
Users will not care whether your article is important unless he/she your loyal subscribers. Also, search engines will give you a plus when your website is well-optimized.
One cause of a sluggish website is the attachment of so many images. Images are good for web pages if it is optimized. In this article, I will show you some methods that you can use to optimize the image in your webpage.
Optimize the Image using Photoshop
Optimizing the image before you upload it to your server will save you time and resources. Using Photoshop, you can easily optimize the image by saving the image for a webpage. This feature will give you the option of what quality of image you want to save, good quality equals to large file size and low quality will give you a small file size.
Setting the image quality from 60 to 70 percent will reduce the size up to 50 percent. Select which quality is best for your webpage before saving the image.
You can also resize the image if it’s too big for your page, simply by setting the width and locking the height proportion to prevent the image from distorting.
Optimizing an image in Photoshop typically involves balancing quality and file size, making the image suitable for web or other purposes while retaining the necessary visual details. Here’s a step-by-step guide to optimize images:
Step 1. Open Your Image in Photoshop
Launch Photoshop and open the image you want to optimize by going to File > Open, or simply drag the image into Photoshop.
Step 2. Resize the Image
If your image is too large for its intended use, resizing can reduce file size significantly.
- Go to Image > Image Size.
- In the dialog box, adjust the Width and Height to the dimensions you need. Make sure to keep the aspect ratio by clicking the link icon between the width and height fields.
- Choose Bicubic Sharper for reduction, which is best for downsizing images.
Step 3. Adjust Image Quality (Optional)
You can improve optimization by reducing the number of pixels.
- Image > Mode, then choose 8 Bits/Channel if it’s not already selected.
- Reducing bit depth can decrease the file size without significantly impacting the image quality.
Step 4. Compress the Image
- Use the Save for Web function to compress the image while controlling the quality.
- Go to File > Export > Save for Web (Legacy).
- A new window will pop up with various options:
- Format: Select JPEG for photographs or PNG for images that require transparency.
- Quality: Adjust the quality slider. A setting between 60-80% (High) is usually a good balance between quality and size.
- Preview: You can preview how the file size changes based on the quality and format.
Step 5. Optimize for Different Formats
- JPEG: Best for photographs or images with gradients. Adjust the compression level to reduce file size.
- PNG-24: Used for images requiring transparency. It keeps a higher file size but ensures no loss in transparency quality.
- GIF: Used for images with limited colors (like logos). You can limit the color palette to reduce file size.
Step 6. Use Image Compression Tools (Optional)
- After saving, you can use external tools like TinyPNG or JPEGmini to further compress the image without noticeable quality loss.
Step 7. Check and Compare File Sizes
- Before finalizing, compare the original and optimized versions to ensure the quality remains acceptable for your purpose. You can check the file size by right-clicking the image and selecting Properties.
By following these steps, you can efficiently optimize your image for web or digital use while retaining its visual integrity.
Optimize the Image using WordPress Plugins
If your website uses WordPress platform, there are some useful image optimizing plugins that you can easily install to help you optimize the image that are already uploaded on your server. I will share with you one plugin that I use to optimize the image in my website.
WP Smush – WP Smush is a free WordPress plugin created by WPMU DEV, this plugin strips hidden, bulky information from your images, reducing the file size without losing quality.
All you have to do is install the plugin, and after installing it in your WP dashboard, go to Media > WP Smush then click “Bulk Smush Now”.
This will optimize the image that is already in your server by 100 images, make sure to click again the “Bulk Smush Now” button after 100 images are optimized and continue until all the images are processed.
Ticking the “Auto-smush image on upload” check box will automatically optimize the image every time you upload to the server.
Now that you know how to optimize the image on your page, you can check also my previous article how to make your WordPress website load faster.