Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Location
    UK, England
    Posts
    268
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Optimizing my images for the web

    I have created images for my webpage, they seem to be fairly big for what they are. As a result that are taking ages to load, how can I reduce the file size without it having an impact on the quality of the image?

  • #2
    Regular Coder
    Join Date
    May 2006
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    With Photoshop:
    File + Save for web + reduce Quality or Colors

    Without Photoshop (Online Image Optimizer):
    http://tools.dynamicdrive.com/imageoptimizer/

  • #3
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts
    1) Before you even save your file, make sure your resolution is 72 dpi

    2) Set your color space to RGB (not CMYK or LAB). Indexed color is okay, too.

    3) Get rid of layers, masks, and alpha channels.

    4) Crop the art so that you are only using the portion of the image that you need. Don't resize it in the HTML file.

    5) Then save as otaku149 suggested -- AND -- decide whether you need a JPEG or GIF or PNG file format. JPEG and PNG are good for photographs; GIF or PNG are good for line art or cartoon-style art that doesn't have many colors.
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com

  • #4
    Regular Coder
    Join Date
    Apr 2006
    Location
    UK, England
    Posts
    268
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Im currently using Fireworks to optimize my images. It reduces a 40Kb to around 1-3Kb. Im saving all my graphics in PNG format too.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    There are different considerations to make when optimizing graphics for the web. PNG can be quite large if you have large graphics (in terms of dimensions) and depending on the color depth (8/24/32 bit) and alpha transparency. I usually try to use 8 bit PNG if it has less than 256 colors (or is still looking reasonably good with an adaptive palette) or GIF if that would be a smaller file size. If there are more than 256 colors I'm checking how it would look as JPEG with a different quality (always having on eye on the file size). Sometimes PNG 24 is smaller at better quality and sometimes it is not.
    With large graphics it might be better to save them as JPEG.

    But if your 40KB graphic is reduced to 1-3KB then this is a pretty good optimization... or am I wrong here? Do you mean it just reduces it by 1-3 KB, meaning from 40KB to 37KB?

  • #6
    Regular Coder
    Join Date
    Apr 2006
    Location
    UK, England
    Posts
    268
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It reduces from 40Kb all the way down to a total size of 1-3Kb. Majority of my images are PNG 8, using the adaptative palette, the images hardly change in terms of qualty. Im sure if i use GIF format the images may reduce further, but it may have an impact on the quality.

    I like the way fireworks chooses the most appropiate PNG type automatically after analysing the colours in the image. Though, Im sure this feature is available on other graphic software, such as photohop.

    Im going to run the page on the web server and see how it loads.

  • #7
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts
    With file sizes in the 1-3K range, it doesn't sound like they should be taking along time to load. Have you included file sizes in your HTML? Perhaps the delay is the browser doing size calculations...
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com


  •  

    Posting Permissions

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