When I develop a website I usually try to keep all the images used in development to a very small size. It’s important for the website to load quickly. The CSS is also structured to be easily readable and maintainable, but to load quickly.
I use GIF images for small dimension images, like icons (24×24, 32×32). GIF doesn’t offer great transparency, but it’s very small in size.
Mostly I try to use PNG for everything. PNG offers a great transparency support, but it’s much higher in size as to GIF or JPG.
JPG, on the other hand, it’s like the middle man here. It doesn’t offer transparency, but it’s size and quality are what you are looking for.
I personally choose in this manner:
- PNG for mostly everything. For background images, for images that I need transparency.
- JPG for pictures, actually. Images that aren’t used in development or in CSS, but in layout.
- GIF for small icons, dimensions like 24×24 pixels, etc.
But because using PNG will take a lot of space, I usually use smush.it!
smush.it! is a online file uploader that will optimize your images, regardless if it’s PNG/JPG/GIF. It’s best to use it at PNG files. It optimizes it up to 95%.
As you known, a PNG made in Fireworks, for example, can be easily changed anytime if it’s made from multiple images (You can select another color of a box, etc.)
Important! smush.it! will remove the ability to change the PNG after you optimize the images. It’s best to save your source files in a folder before you upload them to smush.it! for optimization.
Looking for more? See all posts on the blog.