Author Topic: [Tutorial] Saving images for web (Smaller with same quality)  (Read 9049 times)

0 Members and 1 Guest are viewing this topic.

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2593
  • Total likes: 289
  • Helpful: 89
  • D'oh
    • by An_dz
  • Languages: PT, EN, (it, de)
[Tutorial] Saving images for web (Smaller with same quality)
« on: April 19, 2012, 02:09:33 AM »
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.
Imagine the situation where you post 10 images with 500kb, this whole page will have 5Mb not including the HTML, CSS, javascript and other resources the page might have. And if you're already using your bandwidth for other stuffs this could take long time even with broadband connection, imagine with dial-up users.

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 web
JPG170KB 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 off.

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 level.

Gimp
The PNG
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.

The JPG
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.
Change Quality 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?
« Last Edit: March 07, 2016, 04:17:23 AM by An_dz »

Offline prissi

  • Developer
  • Administrator
  • *
  • Posts: 8764
  • Total likes: 307
  • Helpful: 229
  • Languages: De,EN,JP
Re: [Tutorial] Saving images for web (Smaller with same quality)
« Reply #1 on: April 19, 2012, 08:16:15 AM »
For this forum, with its 64 kB limit I recommend IrfanView, which can save JPG with exatly 63.66 kB. If those are too ugly, you need to downsize them.

Offline kierongreen

Re: [Tutorial] Saving images for web (Smaller with same quality)
« Reply #2 on: April 19, 2012, 12:30:51 PM »
For pakBritain jpgs usually work out smaller than pngs.

Offline Vonjo

Re: [Tutorial] Saving images for web (Smaller with same quality)
« Reply #3 on: April 19, 2012, 12:50:05 PM »
If you want to share the image for online use, and don't have PS or Gimp, there are a lot of online tools available:
http://www.google.com/?q=reduce+image+size+online
http://www.bing.com/?q=reduce+image+size+online

If you want to do that for a lot of files quickly, you can use Imagemagick Convert and Mogrify.

Offline ӔO

  • Devotee
  • *
  • Posts: 2345
  • Total likes: 2
  • Helpful: 66
  • Hopefully helpful
  • Languages: en, jp
Re: [Tutorial] Saving images for web (Smaller with same quality)
« Reply #4 on: April 19, 2012, 02:50:14 PM »
For just cropping to a certain size,  faststone works well.
It has more image editing tools, but they are pretty basic.

I use it for the screenshot contest images.
My Sketchup open project sources
various projects rolled up: http://dl.dropbox.com/u/17111233/Roll_up.rar

Colour safe chart: