SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Mar 2007
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image optimisation

    I have checked the stickies but this question doesn't seem to be in there. I am interested in tutorials on optimising images specifically for web sites. I recently found a program called PngOptimizer that I can use while at work but I use the Gimp at home. I have done some tests and realised that I can use the Gimp options when saving a file to reduce the size but I have little idea what each of the options are doing.

    An example (png) :-

    original 80x60 24.9kb (default settings plus interlacing)
    first test 80x60x 10.6kb (all items unchecked except interlacing)
    second test 80x60 8.9kb (interlacing deactivated also)

    My dilemma is that I was under the impression that interlacing was good for a graphic on the web but is it worth that 1.7kb it costs. Links to the answer to this and other optimisation issues greatly appreciated.
    http://www.glasys.co.uk
    Noli Illegitimi Carborundum

  2. #2
    Non-Member
    Join Date
    Jan 2008
    Location
    Santa Barbara
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interlacing an image seems to be a holdover from the days of slower connections. The idea was that the image would "fill in" as the page and graphics loaded. With today's faster internet connections, interlacing isn't really needed. I'd avoid using it, especially if it is increasing file sizes.

    Your best bet on linux may be to install Wine emulator and Photoshop and use the save for the web feature. You can preview the PNG while you tweak the settings. Just keep tweaking until you find a nice balance between image quality and filesize.

    And as a general rule, use PNG for images that will benefit from indexed color, like logos, charts and graphs, that have solid areas of color. Use JPG for photographs or images with a lot of texture.

  3. #3
    SitePoint Addict
    Join Date
    Mar 2007
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnjreeve View Post
    Your best bet on linux may be to install Wine emulator and Photoshop and use the save for the web feature. You can preview the PNG while you tweak the settings. Just keep tweaking until you find a nice balance between image quality and filesize.
    Since posting i have read that feature of ps is not very good. Gimp gets some good sizes when I play with the settings but my real problem is that I have over 3000 to alter. I also changed the mode from rgb to indexed on the above example and the file size went down to 4.4kb all from an original size of 24.6.

    I am currently trying to use image magicks mogrify command to alter the images but having trouble getting it to work.
    http://www.glasys.co.uk
    Noli Illegitimi Carborundum

  4. #4
    Non-Member
    Join Date
    Jan 2008
    Location
    Santa Barbara
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've used imagemagick lots. Once we had to resize thousands of photos for a stock photo site we were buliding. So I get where you are coming from. If you can get away with it, try using the batch command in photoshop. Try to find a setting that will optimize all your images nicely, and then run them all through.

    If that still doesn't work, good luck with imagemagick. It is powerful, but a beast.

  5. #5
    SitePoint Addict
    Join Date
    Mar 2007
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnjreeve View Post
    I've used imagemagick lots. Once we had to resize thousands of photos for a stock photo site we were buliding. So I get where you are coming from. If you can get away with it, try using the batch command in photoshop. Try to find a setting that will optimize all your images nicely, and then run them all through.

    If that still doesn't work, good luck with imagemagick. It is powerful, but a beast.
    You are not wrong! I have ran the command
    Code:
    mogrify -channel Index *
    to try and change the mode to indexed and the file sizes dropped substantially. if I load one of them in the Gimp the image properties still show as rgb??

    any idea how to turn off the options that show up in Gimp as save resolution and save creation time? They are the last ones to strip out to get the smallest size I can.
    http://www.glasys.co.uk
    Noli Illegitimi Carborundum

  6. #6
    SitePoint Addict
    Join Date
    Mar 2007
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnjreeve View Post
    I've used imagemagick lots. Once we had to resize thousands of photos for a stock photo site we were buliding. So I get where you are coming from. If you can get away with it, try using the batch command in photoshop. Try to find a setting that will optimize all your images nicely, and then run them all through.

    If that still doesn't work, good luck with imagemagick. It is powerful, but a beast.
    I have access to cs at work so gave this a go and got some settings that brought the file size down quite a lot. However when I ran all the images through the batch command after recording the steps they were actually bigger than when I started!!

    In the end I have used
    Code:
    mogrify -channel Index *
    mogrify -colors 32 *
    mogrify -strip *
    and the sizes have come down to 5.6mb from 63mb for 3149 png images. Not bad.

    I can reduce the test image to 1.7kb from 4.4kb by selecting web optimized pallette and removing unsed colours when I change the mode to indexed. Any idea how to get mogrify to use that kind of colour map with the colormap option.
    http://www.glasys.co.uk
    Noli Illegitimi Carborundum

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    get a mac.

    Apple have a great utility that you can use to generate images from practically any format to any other and with various compression and even cropping functions.

    I use it to automatically generate jpegs from PDF's and with a tiny file size with minimal artifacts.

  8. #8
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hugh Miller, there are multiple very good applications on PC as well, many of them being free but still offering the features comparable to paid programs.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  9. #9
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tutorials are really helpful. Try to get a downloadable one.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fireworks (by Adobe) is a great program to work with PNG files, If not the absolutely best.
    They have optimization settings as well similar to the "Save for Web" as Adobe but precisely different in that it optimizes greater (Especially with PNGs).

  11. #11
    SitePoint Addict
    Join Date
    Mar 2007
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hugh Miller View Post
    get a mac.

    Apple have a great utility that you can use to generate images from practically any format to any other and with various compression and even cropping functions.

    I use it to automatically generate jpegs from PDF's and with a tiny file size with minimal artifacts.
    I don't think I need to buy a mac just for this as the Image Magick suite of tools is great and free just proving difficult to understand for someone such as me who doesn't really understand what they are doing.

    Quote Originally Posted by Relaxation View Post
    Fireworks (by Adobe) is a great program to work with PNG files, If not the absolutely best.
    They have optimization settings as well similar to the "Save for Web" as Adobe but precisely different in that it optimizes greater (Especially with PNGs).
    The Gimp has everything I need to do this on one image at a time but I need a batch method. The save for web option in cs didn't turn out to be that good. I optimized an image using it and was impressed with the file sizes it gave. Saving that file did not get the results that were stated in the program and some grew in size when I then ran it through batch.
    http://www.glasys.co.uk
    Noli Illegitimi Carborundum


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •