All the other image-manipulation tricks may be optional, but you should really resize the images on your HTML5 and CSS3 web pages. Although high-speed connections may have no trouble with a huge image, nothing makes a web page inaccessible to users with weaker connectivity faster than bloated image sizes.
To resize an image with IrfanView, perform the following steps:
Load the image into IrfanView.
You can do this by dragging the image onto the IrfanView icon, dragging into an open instance of IrfanView, or using the menus within IrfanView.
From the Image menu, choose Resize/Resample.
You can also use Ctrl+R for this step.
Determine the new image size.
A number of standard image sizes are available. 800×600 pixels will create a large image in most browsers. If you want the image smaller, you need to enter a size in the text boxes. Images embedded in web pages are often 320 pixels wide by 240 pixels tall. That's a good starting point. Anything smaller will be hard to see, and anything larger might take up too much screen space.
Preserve the aspect ratio using the provided check box.
This makes sure the ratio between height and width is maintained. Otherwise, the image may be distorted.
Save the resulting image as a new file.
When you make an image smaller, you lose data. That's perfectly fine for the version you put on the web, but you should hang on to the original large image in case you want to resize again.
Resample, rather than resize.
Resampling is a slower but more accurate technique for changing the image size. This is IrfanView's default behavior, so leave it alone. It's still quite fast on a modern computer. The default (Lanczos) filter is fine, although you can experiment with other filters to get a faster conversion, if you want.