Slash Coding

  • Android Development
  • CSS
  • Subscribe
  • About Us
  • Contact Us
You are here: Home / Web Development / How to Optimize Images for a Website

How to Optimize Images for a Website

By Aneesh Bhatnagar

Lately, I have been talking a lot about optimizing your website’s loading time. The main reason behind that is that Google and other search engines like websites that load fast, even the customer or the reader would like to visit a website that loads pretty quickly. Thus, it was essential to talk about optimizing your website loading time. After my last post on 5 tips to increase website loading time, one of the readers sent me an email asking me to describe a way to optimize images for his website without losing quality at all.

Then I decided to write this article to share with everyone, on how to optimize images on your blog or website to decrease the size of the page and have better loading time. Before we get started, let me tell you that no matter whatever way you choose, you will definitely lose some quality of the image, unless you are a real expert!

There are two ways that I would suggest you to use in order to optimize your images for your website. These ways are :

  • Make your image the exact dimensions as required.
  • Decrease the quality of the image by using an Advanced Image Optimizing software.

Reduce image to Exact Size

Reduce Size

The first point, i.e. to make your image the exact dimensions as required is the one I started doing about a week back. Earlier, when I used to post screenshots, I would upload them as it is, but since last week, I started to crop them into the dimension that I actually display on my blog posts. This helped me decrease the webpage size and ultimately optimize the loading time. To do this, you can make use of any available Photo editing software, like Adobe Photoshop, Gimp, Coral Draw etc. All you have to do it, crop the image in the dimension that you want to display to your viewers.

Use an Image Optimizing Software

Light Image Resizer

The other way, that I have been using for over a year now is to use an advanced image optimizing tool, which decrease the size of my images considerably. Sometimes, when I have the images already to post on a blog, like the exact dimensions, I can still decrease the size of the image by optimizing it by using the Light Image Resizer. I have compiled a step by step guide for using this application down below. Currently, the software is available for free, and there is a pro version as well. If you like the software, you can support the developer by purchasing the Pro version.

Optimizing Images using Light Image Resizer

First of all, download the application from the official website and install it. Then, run it. It would show you a pop-up window to make you buy the application, but after waiting for some time, you can continue using the application as a free user.

Light Image Resizer Trial

Next, click on Files or Folder, depending upon the number of files you want to compress. And then select the appropriate files.

Browse for Images

After that click on Next, and then from the drop-down menu on the top, choose Original Resolution.

Choose Original Resolution as the profile

Then, make changes to the Quality value. Change it to 80%. Now just click on Process.

Decrease Quality of Image

Wait for some time. Let the software do it’s job. When it’s done, it will show you a box like this, which will indicate the total space that it saved for you. In my case, it saved me 79% space. Though I did this tutorial at 80%, you can do it at 90% and still save a lot of space. Now if you compare all the original and the copy image, you will hardly feel any difference.

Total Space Saved

Well, that’s all. This was a simple tutorial on how you can optimize your images for using on your website. If you wish, you can combine the two methods and achieve even higher results for your website. Do share your experience with us in the comments section below. I hope this post helped you optimize your website loading time in a great way. Don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter.

Did you enjoy this article?
Subscribe to our email alerts when we post something new so you don't miss out.

About Aneesh Bhatnagar

Aneesh Bhatnagar is a freelance web developer, who specializes in front-end website development with HTML5, CSS3 and jQuery. He believes in transforming the entire web into a Responsive Web. He also specializes in use of Bootstrap framework to get websites up and running.

Search Slash Coding

Follow Us

RSS Feeds Facebook Twitter Follow Google+

Categories

  • Android Development
  • C++
  • Developer Tips
  • Slash Coding
  • Web Development
    • CSS
    • JavaScript
    • jQuery
    • PHP

Recently Published

  • Moving Ahead from Front End and Android Development
  • How to Export a Project from Android Studio
  • What is jQuery? Let’s Answer this Common Question today!
  • Mobile App Prototyping : Pixate Studio
  • How to Create a Countdown Timer using jQuery

Subscribe to Email Alerts

Eager to learn more from Slash Coding?
Sign up for daily email updates when anything new comes up. Get it straight in your inbox.

Follow Us on Social Media

RSS Feeds Facebook Twitter Follow Google+

Copyright © 2025 · Slash Coding · Powered by the Genesis Framework
Sitemap | Privacy Policy | About | Contact

×
Get Notified of the new Tutorials when they are posted!
Never miss any article update from Slash Coding. Subscribe to email alerts today!