Forum Moderators: not2easy
Here is an example of a logo I made for that client...
1.66 KB
159x300
5 colors
Bandwidth is still an issue for many webmasters. Download speed on dialup is still an issue for HALF of internet users (don't hold me to 50% though).
While validity, markup syntax, and information structure are extremely import aspects of web design so to are graphics. Especially this day and age where we'll be dealing with IE 6's hell until what, 2022 until it drops to under 1% maybe? CSS options (if a designer even KNOWS what CSS is) just can't cut it these days if you want a pretty site.
I'm no hardcore graphics person myself but I know how to deal with bandwidth/download time issues on my own work.
The main two image formats that are by what I consider universally standard are GIF and JPG. I would like to see universal support for alpha PNG (more then one channel of course) but until someone makes some spyware for IE that installs Firefox it's not going to happen for another 20 years.
JPG and GIF formats both have benefits and drawbacks.
JPG
+ Supports True Color
- Blocky Compression
GIF
+ Extremely low file size (low res OR low color)
+ Supports transparency
- Extremely low color support
There are a few other key things to consider. For example the resolution/colors of an image will determine which format is best to achieve our goals.
Our goals again are to produce a high or modestly acceptable quality image that loads as quickly as possible.
The program we'll be using to mess around with some very common images we see daily (for some of us at least) will be Photoshop. I've used 7 & 8 of late and I'm sure 6 also supports the method we'll be using. If you don't have it I'm sure Adobe has a trial that is stashed away some place. Either way you'll need Photoshop to do this (unless someone can specifically follow this up with very similar tools).
There are different types of images as far as their content so I will go over the common types of images we come across.
Let us start with a corporate logo...
Generally a professional will edit a logo in Illustrator due to the need for vector graphics.
A vector based graphic is an image based on points instead of pixels. If you have a square for example you can change the properties of a point to bend it. If you resize a vector graphic it will never reduce it's quality unlike a bitmap based image that can not have it's size increased without stretching the image (and thus reducing it's quality). An example of some extreme vector graphics work would be a popular soda whose logo would be used on a billboard on the side of a highway or a blimp and also have the need to reduce the image size to something for say a web banner.
Anyway we start in Illustrator with our logo. I'm not a graphics expert but for those who are using their own work or some sample please make sure you are using a low color count (no swatches/gradients, etc).
Export your vector graphic as a PSD photoshop file. Remember RGB (not CMYK), 72 DPI, keep layers if you have layers, and under no circumstance do not anti-alias the image!
Important! Switch to Photoshop and click on all tools in the tools window. Make sure you uncheck "anti-aliased" for all your tools. If you're not sure what I'm talking about, uncheck "tools" in the Windows menu at the top and then check it again. Then click on each tool and at the top of the screen you'll see various options change as you go through each.
Open the file in Photoshop, resize as needed and choose File menu --> Save for web.
Even if your image is large, as long as it does not have many base colors and is not anti-aliased you will be able to save this image as a very small file size like I did with the logo I'm talking about at the top of my post.
SAVE FOR WEB
(options)
Starting from top left to bottom right. Ignore the presets (use unnamed). Use GIF format. Set lossy to 0 (though you may find it oh so cool if that is your taste). For this type of image leave the next option to PERCEPTUAL. For colors, count your colors! You have the background color (white which you may use for transparency), blue, green, and red perhaps. So change the number to 4 if this be the case. Next choose NO DITHER. If your site's BG color is the same as the base color of your image then put a check for transparency. NONE (matte). NO transparency dither. Not interlaced. Web Snap 0%.
Save your image and see how large the file is. If you did this correctly it should only be 1-3KB in size (assuming you didn't save it as a massive resolution, 300x200 would be a large size for example).
Now go ahead and visit google and copy their image in to Photoshop. Without doing anything but directly going to SAVE FOR WEB you can the image has a total of 239 colors (says towards the middle of this screen below the mini-tool icons). Therefor google's image is NOT optimized (as far as we are concerned). Firefox says their image is 8.36 KB but we know we can do better then that! Just think of the bandwidth Google could save by optimizing this image alone!
This image has four main colors, blue, red, yellow, green. It also has a gray(ish) backdrop.
At a more in-depth look there are various shades and tints of the main colors.
What I notice first off however are the large number of white colors. When you look at the image how many white colors can you pick out? Unless you're some super freaky person I'd imagine you just see white in general. Let us work on removing the unnesscary variations of white.
Now this is where we get a little tricky. While we could for example click on the bottom left color and hold shift and click on the bottom right color -- drag them to the little trash icon and do away with them we then loose white and the image turns greyish. Not exactly what we want now is it?
When we have to be picky at what we get rid of it's helpful that Photoshop provides us methods to preview changes before we make them permanent.
The tools below the colors come in very handy.
The first icon will change the selected color to be transparent and show the transparency matte behind the image where that color would otherwise appear. If you find the correct color you'll see some "dirt" around the letters, especially below the second (lowercase) g.
Moving the mouse over the color you have set to transparent will show it's hexadecimal(?) html/css value. Other colors will show R= B= G= values (RGB).
The next tool is the shift tool. This is useful for removing a color temporarily to see how the image will look withOUT that color. Find some colors and shift them...notice you won't see much change as this image has too many colors concentrated in small areas at this time. If you reduce the colors (say to 8) you'll see how this tool becomes handy. If you have set it to 8 reset it to 256 (or 239) for the moment.
When you find a color you just CAN'T do without you'll want to use the next tool, lock. Locking a color will do a couple useful things. If you reduce colors by the dropdown and it keeps removing a color you want then if you lock it Photoshop will be forced to remove a different color. This method is VERY effective in ensuring the colors you want remain (being locked) while unlocked colors you are unsure of disappear if you hit the down key while in the drop down number menu.
Keep in mind however if you lock 8 colors and set the image to 4 the drop down number menu will override your locked colors!
I won't go too much more in-depth with the Google image but go ahead and play with it if you're a real stickler for fine detail even if you have a good challenge like this logo!
WebmasterWorld's logo (do I dare the wrath of Brett? heh) is has 63 colors and is 2997 bytes in size. WW's logo presents less of a challenge as it's well constructed to start with. It has 8 base colors. Let's try and see what we can do with it.
Go ahead and lock the deep purple on the left, the sharp yellow on the bottom, the green on the top right, the aqua on the bottom left. It seems that colors are always appear here in a predictable manner but I'm using PS8 and so that pattern may be different across versions. If the positions of these colors makes no sense to someone else sing PS8 please post.
Another reason why I choose this image is because you'll be able to shift colors and see decide if you would like to remove it or lock it. With this image you just can't reduce the colors by the drop down number menu if you want quality. The way I perceive the quality of this image, you, Brett, whoever ... it will vary but the idea is that we're all optimizing versus not (in general, not saying this image is not optimized).
Images that you will come to adhore if you warm up to this method are small images with hundreds of thousands of colors. This typically as an advertisement banner would be bad because it might represent a lack of a solid symbol. Nike's symbol would for example be easy to optimize versus a field of flowers would have you returning the image to the advertiser if you're a crank about such things (I can be cranky about that myself if it gets out of hand).
Other types of images you can practice on would be images of people. Skin colors/tones change with lighting and shading and thus if you are going to attempt this on an image (say 120 wide by 150 high) you'll notice differences between types of images. Is the person thankfully in front of a white wall or are they in front of a shining lake with 800,000 variations of the color blue?
There are all types of images, and everyone is going to have their own preferences. To me web design is an in-depth subject that demands a large amount of attention and detail to achieve my goals successfully. I hope this method/thread helps others as it has helped me to serve others on as a professional level as possible.
Very informative ... I've never givin color much thought as an optimization tool for web images. Thanks!
-- Zak
I rarely go to such extremes for optimisation except for logos but this has given much to think about.
One thing; you mention that gif's offer extremely low file size- this is true but I think it is worth adding that you can sometimes get better compression on images optimised from a vector using png.
. If you are happy with using PNGs - in my experience only Opera 5 has difficulty with the 256-colour indexed versions - take a look at PNGCrush on Sourceforge; a command line PNG optimizer.
a gif picture (like from a digital camera) will most likely be bigger than the jpg version. gifs are better for things like icons, but are worse for files that have gradients
so: for fotos and gradients i use jpg. everything else gif
