Image Sizes

[infringer]

Hey Guys,

What do you use to keep your Image sizes small? Do you have specific programs? Or do you just make sure that when creating/downloading the pictures/images that you bring them in at the lowest, but clearest resolution? Or all of the above?

I just have a website that they are wanting to go fairly graphic/image heavy, and I'm trying to figure a way to load as quick as possible.

Thanks in advance,
David

[Sardtok]

I usually use as few images as I can.
And whenever I do use them I make sure I don't have a lot of unnecessary "whitespace" or whatever you would like to call it in an image file.
I use css to place the image and turn off repeating where necessary...
I use png, so I manually remove some optional fields sometimes using a hex editor, it's a very simple format so (4 bytes length of field, 4 bytes name of field, x bytes (equal to the number represented in the first 4 bytes), 4 bytes crc checksum)...
This only saves a few bytes though...
You should check the filesize and quality of the image in different formats so save copies of it in 8bit png (alpha or no alpha depending on wether or not you need it), 24 bit png, gif, and possibly jpeg (if it is a photograph or something similar, otherwise you'd have to use a barely compressed or uncompressed jpeg, in which case png is better, btw don't use progressive jpegs they are larger in file size)...
Of course how many bytes you can/will save isn't that big a deal (unless you compare uncompressed images with compressed formats).
I recommend png, it has a good compression format and has different types of alpha transparency channels (full alpha, single color alpha, paletted alpha)...
gif isn't that bad, and if you have bought a program that has a license to encode gif files (actually it's the compression) then you are allowed to use gifs made with that program.
I don't know the exact laws, but I believe you only need a license if you want to encode gifs...

Well,
that's a whole lot of stupid things said ;) Now forget everything that I said and go make that graphics ;) hehe

[Sara]

Hi David,

Why not have the images preload? :)

[infringer]

Preloading is an option and probably will come to be my final choice. I was just wondering if there was some wonderful program out there that compressed the files or did whatever to them to make them smaller for a quicker load time that I didn't know about.

Anyway, if you know of anything it would be great. If not no big deal :)

David

[harmonic]

Adobe's "Save for Web" feature in Photoshop does wonders.

Jpeg for photos
Gif for logos

jpeg will lose quality everytime you save it, gif will stay the same. jpeg usually has smaller file sizes though.

[infringer]

"Save for Web" is what I currently use. And it does fairly well. But when you get a graphics heavy site, its really no good.

But it's going to be that way with any program you have, I was just wondering if there was a good one out there that I didn't know about.

[Simon]

Yeah I use Photoshop's "Save for Web" which works pretty well. Always with a bit of tweaking, most images come out pretty small.

You can also slice some larger images to help with download time. It can have a small increase in speed because the browser can be downloading 2 or more parts of the image simultaneously. With a modem going at it's full rate, it won't have much effect though. It's the same principle that is used by GetRight and Download Accelerator to speed up downloads - sometimes helps, sometimes doesn't. ;)

< Simon >

[theblt.com]

Originally posted by harmonic
Adobe's "Save for Web" feature in Photoshop does wonders.

Jpeg for photos
Gif for logos

jpeg will lose quality everytime you save it, gif will stay the same. jpeg usually has smaller file sizes though.

I have to disagree with that last part. JPEG seems to stay the same unless you keep intentionally lowering the quality. GIFs stay the same and are great for logos. JPEGs are great for photos. And JPEGs are usually bigger files, GIFs are smaller because they usually do not have as many colors as JPEGs. Pshops Save for Web feature may be nice. I personally use Fireworks Export Preview. You can see the image and customize the amount of compression on it. For photos, I just use JPEG and set the lowest compression amount and use a little bit of smoothing and can easily get a 150kb image to around 20-30kb without any real visible loss in quality. So yeah, the reason why GIFs are smaller than JPEGs is because GIFs can only handle around 256 colors while JPEGs can hold many many more.

[harmonic]

Originally posted by theblt.com
I have to disagree with that last part. JPEG seems to stay the same unless you keep intentionally lowering the quality. GIFs stay the same and are great for logos. JPEGs are great for photos. And JPEGs are usually bigger files, GIFs are smaller because they usually do not have as many colors as JPEGs. Pshops Save for Web feature may be nice. I personally use Fireworks Export Preview. You can see the image and customize the amount of compression on it. For photos, I just use JPEG and set the lowest compression amount and use a little bit of smoothing and can easily get a 150kb image to around 20-30kb without any real visible loss in quality. So yeah, the reason why GIFs are smaller than JPEGs is because GIFs can only handle around 256 colors while JPEGs can hold many many more.

Everytime you save a jpeg with something like adobe, it compresses it more.

GIF's are usually bigger files if you try to achieve the same quality on a big image

Also adobe's save for web lets you preview the image, and even compare what it would look like to many different levels of compression at once

[Sardtok]

Harmonic,
both GIF and JPEG have lossy compression (I have no idea what it's called, you have lossless compression, and you have uhm lossful??? hehehe)...
Anyway, Gif reduces the amount of color,
depending on how many colors there were in the old file you'll either get moire or a posterizing effect...
8 bit png is usually a better option, usually comes out smaller than gif, and has more alpha transparency options...
Also 24 bit PNG is a good option for photos,
png uses a lossless compression system,
which usually means that it can't compress as much as a lossy compression system,
like jpeg's system, which is best for photos (jpeg doesn't like edges, but works well for gradients, but it all depends on the compression ratio, you can use non-compressed jpegs for web graphics that are not photos for instance, but they don't have transparency).

[Palmer]

Found this (http://www.jpegwizard.com/)for jpegs and GifWorks (http://www.gifworks.com) does a pretty good job with, you guessed it, gifs. You start by selecting file>open and you can then upload from your computer.