Guide: Getting the Right Filesize

[Damjan]

I’ll cover and link to a freeware program (virus/spyware free as well) that can get your JPEGs under 30KB with virtually no loss in quality. I’ll also cover how to make sure your banner is fewer than 30KB, on any Windows machine.

Checking Filesize

First, let’s start with talking about how to check the size of your banner, and expose a problem with Photoshop. Frankly put, Photoshop sucks at making images small while preserving quality. The newer your version the worse it is. I use CS2 and it is impossible for me to get any image to be presentable under 30KB. Photoshop has a JPEG quality tool when saving, and a maximum quality JPEG is a beautiful thing. I’ll use one of my dumb creations as an example

Filesize: 76.5 KB

Filesize: 30.22 KB

Absolutely awful quality and STILL over the limit.

A problem with CS2 and CS1 (I'm not sure if this is a problem for other versions) is that Photoshop's size estimator is completely bogus. The maximum quality image was estimated at 61.74 KB while the minimum was estimated at 15.41 KB! Almost half the actual size! There are two easy methods for getting an accurate size reading. The first is to right click on the image file on your hard drive and select "Properties". The actual size of the image is listed under (*shockingly*) "Size". The second method is done in your browser. I'll cover Internet Explorer, and Firefox.

In Internet Explorer find the image you are interested in getting the size of. Right click on the image and select Properties, much as you do with your hard drive. The tricky part is that Internet Explorer lists the size in bytes. To get it into KB (kilobytes) just divide the number by 1000 (1024 for the picky). So as long as the byte count is under 30000 your banner is properly sized.

In Firefox find the image you are interested in getting the size of. Right click on the image and select properties. It is under "Size of File" and is listed in KB so just make sure it is under 30.

What can I do?

Well, the good news is that the problem lies mainly with Photoshop, not with JPEG compression. One of the best programs I've found for making your images smaller is a freeware program called IrfanView. IrfanView not only has a great lossless (meaning no loss in quality) JPEG optimizer, it also can reduce filesize drastically while losing minimum quality.

Installing IrfanView

First, go to "www.irfanview.com", then click on Download on the left. The simplest download method is the one third from the top named "Get IrfanView from CNET Download.com!". After clicking that link it will take you to www.download.com, one of the safer sources for spyware/virus free software online. Click on "Download Now" and you should be taken to a page where you will be prompted to download. Just accept the download and let it come down. It's only 0.98 MB and should come fairly quickly.

After you have downloaded IrfanView, you need to install it. Double click the icon, select your installation path (WARNING: It will NOT create an IrfanView folder unless you tell it to, so be sure you want to install in the folder you select.) and options, then click Next. Click Next again to go through the version notes. It will then bring up a file association screen. The safest option is just to click the None button and then click Next. The next screen is an advertisement for Google Desktop Search, just choose "Don't Install Google Desktop Search" and click Next. Click Next again and the installation will begin. After a short installation process, it should say "Installation successfull!" Now uncheck both "Open Irfan View FAQs help page" and "Start Irfan View". Then hit Done. There's one more step before we're ready to use it. We have to install the JPEG lossless optimizer PlugIn.

Again, go back to www.irfanview.com and click on PlugIns on the left. Select the Alternative Download Link below, and accept the download. This is a larger download at 5.43 MB.

Double click the icon, it should automatically load your installation path. Then just click Next. A window should pop up telling you "Installation successfull!" Click OK and the installer will close.

Using IrfanView

IrfanView is fantastically simple for operation. Open up IrfanView and then just simply drag your banner file onto the window. Your banner should appear in the window and look something like this:

Now the good part begins. First, we go to the Options pull-down menu. Select "JPG Lossless Operations..." now leave everything the way it is, "Optimize JPG file" should be checked.

Now, go to File and choose "Save As..." it should bring up a save window. Find where you want to save the image and then go down to the pull-down menu where it probably says: "BMP - Windows Bitmap", pull that menu down and select "JPG - JPEG Files". You should have a JPEG/GIF save options window pop up. Check "Save as progressive JPG" and drag the "Save quality" bar to 100. Then click Save. This should create an image of about 40KB that will have no loss in quality. Check your image size using one of the methods described above, here is my dumb creation again:

Filesize: 42.55 KB

It's still too big but much better now. Now just go back to the Save screen and drag the image quality bar down. This will degrade the quality of the image, but I've found that to get it under 30KB does not degrade the quality much at all. Usually this happens around 95. You just have to save, check the file size then move up or down as needed until you find the right number. El Nombre's banner required going down to 97 to get under 30 KB.

As a final thought I leave you with the maximum Photoshop-generated 76.5 KB banner next to the under-30 KB banner side-by-side to compare quality, see if you can tell which is which without checking:

That's all.

Edited December 16, 2008 by XLR8

[rockstarrem]

If you go File > Save For Web and under the "Preset:" text select PNG-8 and save it you should have no loss of quality at all. PNG owns JPEG in every way possible, not sure why you're still using JPEG.

[Damjan]

I use JPEG

[Hansui]

good guide you got there XLR8, especially for the people who loves saving in jpeg format

but honestly, like what rem said before, PNG owns JPEG...

[rockstarrem]

I use JPEG

I don't understand why though, PNG is so much better. Why use a format that diminishes quality in a lossy format?

[EvoLuTioN]

I use JPEG

I don't understand why though, PNG is so much better. Why use a format that diminishes quality in a lossy format?

I agree.

Just save it as a PNG. Why go through all the hassle of saving it in photoshop then opening it up in another software and save it again. Also 61kb is not so bad unless your on a 64kb modem? Also I've optimised quite a lot of my stuff in PS(save for web as rem mentioned) and they are quite decent to almost similar quality.

[TM™]

Yeah I agree with the two guys on top of me.

.PNG is more suitable. Keeps the image you've made on photoshop more clear, and what you make in photoshop will be what you get when it comes to uploading it on the internet. I believe .PNG is better since it also supports transparency.

[Alvas.]

@TM: Dude, Can you tell me that what do you do while saving them as .png because the transparency loads in your sig a lot more faster than mine ! Do you save it as interlaced or not ? Or how do you save the sig as a .png ?

[Chris]

No you don't need to save it as interlaced.

If you're in Photoshop, just go File -> Save for Web and choose PNG, from the presets choose PNG-8 or PNG-24 and make sure the transparency box is checked.

PNG-8 uses colour palletes like GIFs (maximum of 256 colours) and are good for creating files of small size. However, if you have a sig with lots of colours (i.e. more than 256... likely if you're using gradients and such) you should choose PNG-24 as it'll look better.

JPEGs are actually fine if you have few colours since the compression algorithm will recognise this and will be able to produce quite small file. The sig shown in the first post is a good example of when NOT to save as JPEG though, that's definitely a better option for PNG.

I don't know where you took this tutorial from since you didn't link back to it, but it's not very good IMO, and to me it just looks like a lame way of trying to advertise Irfan View. People are better of reading the replies here

[Alvas.]

Thanks Chris !