www.webdeveloper.com
Results 1 to 6 of 6

Thread: Making page size smaller

  1. #1
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779

    Making page size smaller

    Hi,

    As is, my portfolio relies somewhat heavily on transparent png images. They're created as 24-bit pngs with Photoshop, and because of this, the file sizes are HUGE. A few of the images are around 300k.

    That's WAY too big, right?
    Does anyone know anything I can do about this? I can't seem to find any compression options when working with PNG24 files. I've tried PNG8, but the transparency is terrible.

    Any ideas are appreciated.
    Thanks a lot!

    The site is danmathisen.com

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Maybe try some or all of the following:

    1) Make sure you first select the "Save for web" option.

    2) With PNG8 you can select 2,3,8,16,32,64,128 or 256 colours.
    Select the fewest colours possible to get an acceptable quality image.

    3) Reduce the amount of dithering to the point where the image quality is still acceptable.

    4) Replace the trasparent backgrounds with a solid colour (preferably the same as the backround on the web page) and use jpg compression to reduce the image size and save the images.

    5) As a last resort, reduce the width and height of the image in PS to a still acceptable size.

    Also if you have any sort of rollover effect or animations using the images on your web page, consider preloading the images using javascript if they are not already preloaded.

  3. #3
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    This is the exact advice I needed. Thanks a lot! I'll play around with it and see what I can do.

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    no problem .

    Unless you really need transparency in your web images, I would recommend using jpg instead of png for web images. GIF format (max 256 colours) also supports transparency but imo are more suitable for tiny images like clipart, small icons or images with very few colours.

    Hopefully you can get yout png files down to an acceptable size.

  5. #5
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    Thanks.

    This is my first time working with a few things on the web - transparency and jQuery, so maybe I'm getting too excited and over-doing it.

    I've managed to make a few adjustments* and converted a few of the graphics from PNG24 to PNG8. I also modified the background texture image so that it's smaller and now repeats seemlessly. That helped a lot.

    *I made the top "danmathisen" banner thing PNG8, reducing it from 40kb to 10kb, by killing the fading shadow and making it a solid color so that it doesn't need the alpha channel. I think I'll do the same for the slider thing on the home page. I was also able to bring the top banner down from 128 to 32 colors, reducing the file size even more.

    Thanks again for your help... it's all starting to work out.

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    I'm glad you're sorting it out

    Unfortunately adding layer styles, special effects etc to images in Photoshop or whatever, whilst making them look great on the screen, slideshows, paper print etc, they can become huge in size very quickly.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles