How to re-size filesize without losing quality?

Okay, so I'm using photoshop CS3 to do most of my design work, but they always come out as a large png file.

These two for example:

http://www.codforums.com/imgs/CODFBO2BG.png (334.66 KB)

http://www.everythinghalo.com/imgs/everythinghalo4.png (237.86 KB)

Yes, I know they're png files. It's intended, for the transparency.

 

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.

 

This is smaller in size. (83kb) down from 240kb. But I saved it as PNG8 (Optimized), not PNG24.

 

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.

 

This is how you match background colour.

 

I created this quick as another you can try on that http://www.everythinghalo.com

 

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:


97.9 KB:



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 ...").

 

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

 

run already optimised PNG files from photoshop through irfanview PNGOUT plugin with save transparent colour to shave off another 4kb

 

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.

 

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.



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.

 

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

69kb


50kb

 

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.

 

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

 

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

 

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.

 

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

 

Download the JPG logo I added in post 12 using his background pattern, that image is 39kb and same quality and the PNG ones.