Compress images to a small file-size

[ Studied  ...calculating..., 6 thanks ]

                                                                   

    This goes out there for website administrators, for all you people who are building websites, but are not so... professionals as they would like to be ; Yes, this is for all your "Sunday builders", who are just beginners (like me), and could use some hints in how to make their website more accessible.

 

    A webpage time of loading depends very much on the loading time of the files used in that webpage. As smaller those files, logically, as little time used to load them.

 

    I am not saying that this are the best applications to make small-sized files, but these are the ones used by me, and I compressed my image files with them to excellent results.

 

    The first advice is to always resample your images to a maximum resolution used in your page. For example, if you have a picture that will be displayed in a maximum resolution of 800x600 pixels, there is no point in having on your server that image in an 2000x1800 pixels resolution, now is there ? You can resample them with "I_view", as I will show you further on this page.

 

    Here I will tell you about two applications I am using successfully, but, unfortunately, they can be used only for ".jpg" and ".png" file types. The compression ratio may not seem a big one, but if you'll consider how many kilobytes you can save by compressing all the images...well... there is something...

 

    The programs that I am using are "I_view32" and "pngout", applications that can be downloaded from the "Freeware" area of this website.

 

    Next I will show you how to use these applications to successfully get a nice-sized outcome image files.

 

    First, let's start with "I_view". To demonstrate how it works, I will use 2 ".jpg" files, "JpgExample_1.jpg" and "JpgExample_2.jpg", both the same resolution, downloaded from the net, where "JpgExample_1.jpg" is as downloaded, while "JpgExample_2.jpg" is the same as first, but re-saved through "I_view".

 

 

 

 

JpgExample_1.jpg

JpgExample_2.jpg

 

 

 

    As you can see, at a first glance, the two pictures are identical, same resolution, same quality. Well..., not quite... If you right-click over the pictures and select "Properties", you'll find out that "JpgExample_1.jpg" has a filesize of 217001 bytes (211 KB), while "JpgExample_2.jpg" has a filesize of 43616 bytes (42.5 KB). A difference of 168.5 KB (or we can say that "JpgExample_2.jpg" is only 20.14% of "JpgExample_1.jpg").

   

    Ok, now let's me show you how can you achieve this. There are a few steps to follow, with an extra step if your picture is not the desired size.

 

STEP 1:

 

Open your image in "I_view"

 

(Example)

STEP 2: --- Skip this step if your image has already the desired resolution ! ---

 

From the Menu, select "Image" and then select "Resample"

 

(Example)

STEP 3: --- Skip this step if your image has already the desired resolution ! ---

 

Adjust the resolution to be the desired one, and then click "OK".

 

(Example)

STEP 4:

 

Save the image, preferably with the same name, overwriting the original one. 

 

(Example)

 

    I know what you're thinking: "How come that even if I didn't make any changes to the picture, the file-size changed ?". The thing is that when you save an image with the  "I_view", some vodoo magic happens, and... but the result is all that matters.

 

   

 

 

 

    And now let's move on to the ".png" files. If your image file has no transparent bits, I advise you to save them as ".jpg" files, as the file-size will be much much smaller. You can do this with "I_view".

 

    If your file has some transparent bits, "I_view" is not recommended to be used to compress them, as the transparent parts will be transformed in white color bits. In change we'll be using a little application called "pngout".

 

    In this case I will use two ".png" files, "PngExample_1.png" and "PngExample_2.png". Both files have the same resolution and the same quality, the only difference being that "PngExample_2.png" was obtained by "processing" "PngExample_1.png" through "pngout".

 

 

 

 

 

PngExample_1.png

PngExample_2.png

 

 

 

    As you can see, at a first glance, the two images are identical, same resolution, same quality. Well..., not quite... If you right-click over the images and select "Properties", you'll find out that "PngExample_1.png" has a filesize of 57164 bytes (55.8 KB), while "JpgExample_2.jpg" has a filesize of 53076 bytes (51.8 KB). A difference of 4 KB, which is a big difference, considering the small size of the image.

 

    There are 2 ways of achieving this, both including, of course, "pngout". But no matter which method you are using, be sure that "pngout.exe" (and maybe "pngoutbat.bat")  is (are) in the same directory as your image file !

 

 

Method 1:

 

    This method implies the direct use of "pngout.exe" with DOS commands.

 

 

STEP 1:

 

Open a command prompt. (By selecting "cmd" from the "Start menu")

 

(Example)

STEP 2:

 

Using the "cd" DOS command, go to your image's directory.

 

>cd..

>cd..

>cd [directory]

>cd [your_Image_directory]

 

(Example)

STEP 3:

 

Type the next command:

 

>pngout [your_file].png [your_out_file].png

 

where [yourfile] is the name of your desired file, and [your_out_file] is the name of the output file.

 

(Example)

STEP 4: --- Optional ---

 

Rename the new file, giving it the same name as the original one.

 

 

Method 2:

 

    A faster method, using the "pngoutbat.bat" file, created by me and included in the download:

 

 

STEP 1:

 

Open the "pngoutbat.bat" file with a text editor, replace "myfile.png" with the name of your file and save the changes.

 

(Example)

STEP 2:

 

Run the "pngoutbat.bat" file (double-click it).

STEP 3:

 

Rename the "outfile.png" file.

 

 

    Again, if you need the two applications, you can download them following this link !

 

 

  Congratulation ! You can now optimize some of your files for web use ! If there is something you didn't understand or anything else, just leave a comment !