Here is a step-by-step guide on how to download, install and use IrfanView to resize and save an image in a format that is optimal for the web.
Together with IrfanView we can hand in hand make the web a faster and better place!
Download the software and the plugins
Go to the page
Click on "Download" in the left side menu and download the program itself.
Now click on "PlugIns" and download ALL PlugIns as one large EXE (recommended)
Install the program
Run the first file you downloaded. You can at the time of this articles writing, just press "Next", the default options are fine and at the time of this writing, there are no spyware or addons that you have to opt-out of.
Install the plugins
We are mostly only interested in one of the plugins, but for the sake of laziness, we install the entire package.
Run the second file you downloaded.
Open the file you want to optimize
Since during installation, we went with the default alternatives, this means that image files will not automatically open with IrfanView, we have to either:
* Open IrfanView and then drag/drop a picture on the program.
* Open IrfanView and choose "File -> Open".
* Right click an image file and chose "Open With -> IrfanView".
Optional: Resize or crop the image
Most of the time, an image that you post on the internet does not have to be all that big unless you really need to preserve it's crispness.
In most cases, an image that you for example attach to a forum, or a blogpost, should be at the most 1000px wide.
On ginnunga.org, we use 846px wide article images as the maximum.
Cropping is cutting away parts of the image to make the viewable area smaller, but preserving the resolution, the cripsness of the image.
The simplest way to do this, is to just click and drag with your mouse on the image to create a selected area, then go to "Edit -> Crop Selection (CTRL+Y)"
If the image is too wide, you can resize it. You can either use the maximum pixels suggested above, or you can resize the image as a percentage of it's original style.
To resize the image, you choose "Image -> Resize/Resample Image (CTRL+R)"
Under the section called "Set new size" you either enter a new width in pixels, or you check the radio button for the seciont "Set new size as percentage of original" and adjust it to, let's say 50%.
Saving the image - The final step
Your image is now possibly both cropped and resized and it is time to save it in a format that is as efficient for the web as possible.
To do this you select "File -> Save for Web... (Plugin)".
You will now see two versions of the image:
Your original, and above that image, the filesize of the image.
A preview of how the image will look, if you save it with the current settings.
Below the images, there are three buttons with the lables
"JPEG", "GIF" and "PNG".
We recommend the following selection:
Large image (more than 100px)
Progressive (Very important)
Small or image with transparency
Color reduction: As low as you can set it, without the preview looking different to the original. Often "Optimal 128 colors palette" might work.
Interlaced: No, do not check this.