How to re-size filesize without losing quality?

Discussion in 'Skinning, Design and Graphics' started by Carlos, Nov 9, 2012.

  1. Carlos

    Carlos Regular Member

    Joined:
    Apr 20, 2003
    Messages:
    751
    Likes Received:
    251
    Location:
    California
    Brandon likes this.
  2. CM30

    CM30 Regular Member

    Joined:
    Jul 1, 2012
    Messages:
    901
    Likes Received:
    500
    Have you tried a PNG optimisation tool? I'm not sure if they lower the quality too much, but there hasn't been a noticeable quality drop in any images I've used these tools on.

    Here's one that might work, but it doesn't seem to work well on Windows 7:

    http://pnggauntlet.com/

    You can also download PNG Out from here:

    http://advsys.net/ken/utils.htm#pngout

    Then copy the command prompt from Windows to the folder with the program.

    And then open the command prompt, type in 'pngout.exe [your image filename.png] (replace it with your image name and location) and it'll compress it with a bunch of different algorithms. For example, I sent through a picture which was 13.4KB, and it ended up as 8.3KB with no noticeable differences.
     
    Brandon and Dan Hutter like this.
  3. GTB

    GTB Regular Member

    Joined:
    Jun 30, 2009
    Messages:
    1,792
    Likes Received:
    270
    This is smaller in size. (83kb) down from 240kb. But I saved it as PNG8 (Optimized), not PNG24.

    everythinghalo4.png
     
    Carlos likes this.
  4. GTB

    GTB Regular Member

    Joined:
    Jun 30, 2009
    Messages:
    1,792
    Likes Received:
    270
    Not sure how well this one will work, but again used PNG8 optimized and choose same background colour as used on your site around the logo their "1C1C1C". 110kb, not small but much smaller than original. Because the image is rough edged originally in PNG24, this one might not work well as PNG8.

    CODFBO2BG.png
     
    Carlos likes this.
  5. GTB

    GTB Regular Member

    Joined:
    Jun 30, 2009
    Messages:
    1,792
    Likes Received:
    270
    This is how you match background colour.

    Snap1.png
     
    Brandon likes this.
  6. GTB

    GTB Regular Member

    Joined:
    Jun 30, 2009
    Messages:
    1,792
    Likes Received:
    270
    Carlos likes this.
  7. Cerberus

    Cerberus Admin Talk Staff

    Joined:
    May 3, 2009
    Messages:
    1,031
    Likes Received:
    500
    The quick and dirty way would be to open in http://www.irfanview.com/ And then you can resize the image via pixel size.. It will auto pick the correct ratio to keep the quality.. I mean it is the lazy way.. But it works :)

    ai.imgur.com_Y2BXZ.png

    Though, you will have to play with the settings to keep it transparent.. Or save it to a different original format I believe
     
    Brandon likes this.
  8. Monster

    Monster Admin Talk Staff

    Joined:
    Apr 24, 2004
    Messages:
    515
    Likes Received:
    82
    Location:
    Germany
    Check out The GIMP, it has many functions for image optimization, format conversion etc. -- I always use it for that kind of stuff.

    p.s.: For instance, you can use it to change the palette to 256 colors, and then export it as a GIF file. (GIF also supports transparency)

    p.p.s.: Here's 256-color GIF versions:

    120.8 KB:

    CODFBO2BG.gif
    97.9 KB:

    everythinghalo4.gif

    In The GIMP, I selected "Image -> Mode -> Indexed ..." and chose optimum palette (255 colors) and Floyd-Steinberg dithering with reduced color bleeding, and then did "File -> Save As ... " and chose GIF as file extension. (on some recent versions, you have to use "File -> Export ...").
     
    Brandon likes this.
  9. eva2000

    eva2000 Regular Member

    Joined:
    May 22, 2012
    Messages:
    138
    Likes Received:
    107
    Location:
    Brisbane, Australia
    Photoshop should have save for web menu option select PNG8 and then on same page there is option to resize dimensions before saving PNG file attached are examples
     

    Attached Files:

    Carlos and Brandon like this.
  10. eva2000

    eva2000 Regular Member

    Joined:
    May 22, 2012
    Messages:
    138
    Likes Received:
    107
    Location:
    Brisbane, Australia
    run already optimised PNG files from photoshop through irfanview PNGOUT plugin with save transparent colour to shave off another 4kb
     

    Attached Files:

    Carlos and Brandon like this.
  11. GTB

    GTB Regular Member

    Joined:
    Jun 30, 2009
    Messages:
    1,792
    Likes Received:
    270
    That's what I do, save for web and leave it as optimized tab selected (not original) tab. Even though you'll get some colour bleed using PNG8 into transparent areas from parts of the image in them, like the head in this case. What you can do, once saved, open the PNG8 image again and use Erase Tool to delete colour bleed from transparent area before re-saving again as PNG8 to remove all that a second time around. But when opening PNG8 image, switch it from Index to RGB image mode for working in.

    I used an online PNG compression site and got it down from 83 to 74kb last.

    You can see a dark outline around the head area, but that colour was matched to blend in with his sites background "#222222" using Matte option. Faded edge together making it less rough as well using blur tool.

    everythinghalo4.png
     
    Carlos likes this.
  12. GTB

    GTB Regular Member

    Joined:
    Jun 30, 2009
    Messages:
    1,792
    Likes Received:
    270
    Another option, use JPG instead of PNG. I created this by screen capturing your background pattern behind the transparent area. This is 39kb, and can even get it down further to 20kb using medium setting for JPG. But loss of quality may be too much.

    1.jpg

    This was the background screen captured from your site to fill transparent area in with, just a case of slotting it into transparent area in PNG24.

    background.png
     

    Attached Files:

    • 1.zip
      File size:
      35.9 KB
      Views:
      299
    Carlos likes this.
  13. eva2000

    eva2000 Regular Member

    Joined:
    May 22, 2012
    Messages:
    138
    Likes Received:
    107
    Location:
    Brisbane, Australia
    This attached image is same as above just inlined it see not much bleed into transparent area when you select the right saved transparency colour to match background.

    I'm no graphic designer, but for page speed optimisations, i deal with alot of image crunching for sizes and trust me the only persons who really notice such minor imperfections are the site owner/designer.. most visitors and members aren't going to pay attention

    I've been rate limited by my ISP down to 64Kbps download speeds before, I trust me a visitor will notice more slow loading page more so than such minor imperfections. There's huge difference between 240KB and 55-70KB :)

    I also assume Carlos mentioned resize filesize that he meant dimensions too ? width and depth ? That would erode away so of the minor imperfections.

    55kb[​IMG]

    69kb
    [​IMG]

    50kb[​IMG]
     
    Carlos likes this.
  14. GTB

    GTB Regular Member

    Joined:
    Jun 30, 2009
    Messages:
    1,792
    Likes Received:
    270
    You got it down in file-size, but you need to keep in mind that his sites background colour behind that transparent area is "#222222" (or there about). You've got white matte used in them images, that's why you can't see it hardly against this forum colour page background. I just downloaded the middle one and added an extra layer behind your banner and coloured it #22222. This is now how your image would look on his site because you stayed with white matte not matching his site dark background colour used behind transparent logo area.

    demo.png
     
    Carlos likes this.
  15. eva2000

    eva2000 Regular Member

    Joined:
    May 22, 2012
    Messages:
    138
    Likes Received:
    107
    Location:
    Brisbane, Australia
    yeah that's what i mean by saving image transparency colour to match his background.. once you do that it should blend in with his background
     
  16. GTB

    GTB Regular Member

    Joined:
    Jun 30, 2009
    Messages:
    1,792
    Likes Received:
    270
    Snap2.png
     

    Attached Files:

  17. eva2000

    eva2000 Regular Member

    Joined:
    May 22, 2012
    Messages:
    138
    Likes Received:
    107
    Location:
    Brisbane, Australia
    or the easier thing to do if he has psd file is to move the entire body and head further down in the image so it doesn't stick out heh

    loosing the entire top black part would also reduce file size considerably if the head and body is tucked within the rest of the image
     
  18. GTB

    GTB Regular Member

    Joined:
    Jun 30, 2009
    Messages:
    1,792
    Likes Received:
    270
    Personally, I'd use JPG and get it down to about 30-35kb. Above 40kb is high for any logo really. I did that in post 12 and kept his same background used in it.
     
  19. eva2000

    eva2000 Regular Member

    Joined:
    May 22, 2012
    Messages:
    138
    Likes Received:
    107
    Location:
    Brisbane, Australia
    yeah i tried jpg and using irfanview 95% quality is only 51kb, 90% like 42kb, so not much loss considering the site name text on top of the left side of the logo hides or masks the most detailed part of the logo
     
  20. GTB

    GTB Regular Member

    Joined:
    Jun 30, 2009
    Messages:
    1,792
    Likes Received:
    270
    Download the JPG logo I added in post 12 using his background pattern, that image is 39kb and same quality and the PNG ones.
     

Share This Page