This tutorial will explain how you can save an image for web. With smaller size, without losing quality. All hints work in any image editing program since options are the same for the image types. But I'll be more specific for Gimp and Photoshop.
Save the images smaller for internet makes the pages load faster and help a lot the page loading time.
For all images I post on the web I do this process. Unless it's for a wallpaper or to be printed. But generally I let those big quality images in a Zip and just give a preview with web saved images.==Example==
Check my example to see how much I saved:
Image saved with default settings, JPG Quality set to 100 (Gimp)JPG 472KB
and PNG 184KB
Image now saved for webJPG170KB
and PNG 83KB
As you can see I reduced an image from 472KB to 83KB, and you can't really notice differences. So let's show how I've done it:==The Process==
I'll explain the process for Gimp and Photoshop.Photoshop
PS is very simple. Hit Ctrl+Shift+Alt+S, or go to File->Save for Web, and a dialog will open which automates the process. But there are some notes for better results with smaller files:
The dialog have some tabs in top left, choose 2-Up, because it will help you compare the original image with a preview of the output file.
In bottom left of the preview shows the size of the output image.
Always first try with PNG-8, if the colors don't look good, choose PNG-24. Remember to always keep Interlaced
If you choose JPEG, change Quality
, generally values between 60 and 80 will output a file with smaller size with less quality loss. And try toggling Progressive
on/off. You can also try set some Blur
The PNG produce the smallest file with the best quality, but it depends the image you're saving. For Simutrans in-game screens it works perfectly. All you need to do is test.
Go to Image -> Mode -> Indexed...
In the dialog box that will show, choose Generate optimum palette
and make sure Max color # is 256, and let everything else off
If the image looks the same continue, if not, Undo and go to The JPG
Now go to save your image, when some options appear, you can let checked Save Resolution
and Save creation time
, you won't see enough difference in file size. Compression level can be kept at 9
Some images won't look good with the PNG process, so we need to move to JPG. They are bigger and have more perceptible quality loss. Anyway it's better than keeping a 500Kb image.
Nothing special is needed for JPG, just go save your image. When the options dialog show, Firstly choose Show preview in image window
. This will let you check the how the output file will look like and also show the estimated file size.
until the image have a satisfactory quality.
Click on Advanced Options
, some option will show up. Try toggling Progressive
on/off, generally it reduce size.
Also try adding very few Smoothing
. It also reduce size, but gives a blur in the image, I don't like using, but if you think the quality is good, add it.==Thanks==
I hope this helps you save your images to load faster around the web without having bad quality images.
I've posted here because it seems the place where it is most desired for people to know this.
NOTICE: Even you not noticing any differences among the smaller images, they have worst quality. If the file is bigger it obviously have more quality. But as you could see our eyes can't notice them, so why keep it bigger?