i'll make you RICH!! well..less poor LESSON 1
 

OK here goes...i thought i crank out a usefull post after all the "i'd hit britney with my ars sig" threads day in day out.

What do i have for you..a lesson in bandwidth saving..or image optimization for that matter.
For all of you posting galleries or for all noobs why freshly cranked out a site in photoshop it's to to optimize..

When you cut you images try to seperate single (low color) parts/text with images containing loads of colors (persons)

The low color parts are best to be saved as gif files and the high color parts as jpg's. Low color gifs are smaller in size and look much sharper than over optimized jpegs wich tend to become blurry.

I have a few samples wich i would like to show first
http://www.madskills.nu/gfy/trailer.jpg
This is a random (let's pretend shall we) image from a gallery
saved and optimized as a jpg file

6.1 kb in size

http://www.madskills.nu/gfy/trailer.gif
The gif version at 6.8kb / 128 colors

http://www.madskills.nu/gfy/trailer32.gif
Gif version at 4.4kb / 32 colors

You saved 2.2 kb right therewith a single image in a few seconds
There's almost no quality loss by converting it to 32 colors

Next :

http://www.madskills.nu/gfy/a1.jpg
jpg / 7.7kb

Here's an image that's optimized as a jpg. The top part is text,
bottom image only. Let's cut in in 2

http://www.madskills.nu/gfy/b1.gif
Top part - Gif / 3.7kb

http://www.madskills.nu/gfy/b2.jpg
bottom part - jpg / 1.9kb
Total saved 2.1kb

This sounds like bullshit..saving a few kb..but if you own a tgp and you can optimize your logo byt cutting it in a few pieces or optimize your gallery and save 15kb/20kb it will save you a few bucks

Let's do the match

Let's say we get 100k traffic at the front pages of our tgp/galleries and we can save a total of 30kb on the normal graphics. I'm not even talking about optimizing thumbs, large images and stripping down 44khz stereo sound to 22khz mono
(15% save right there)

100.000 x 30kb / 1024 (to mb) / 1024 (to gig) = 2.8gig

times 30 = 84gig

times $0,50 overusage = $42 bucks for 10 minutes work

Saving money is earning money...it might be a small amount to most of you but i've seen design i could hammer down a whopping 40% in size..

Before i forget..macromedia fireworks is a great tool for optimzing images since you have a great preview tool in wich you can follow the process. It might not be the cheapest but try the trial and see if you like it.

It's not a batch thumb optimizer (can be used for it though) but it's far more advanced.

Hope this post was at least a bit usefull..till next time if i can find a good topic that is :thumbsup

thats amazing

Very good advice, thank you!

you're welcome..quite a lot of typos =]] sorry for that

Noted. Thanks!

np, I had no problem at all following it! I have been meaning to get some opto done on my site for a while now. I think this may be tonight's task.

at least 1 soul saved..:Graucho

if you have any questions just post them here

:1orglaugh :1orglaugh :1orglaugh

good tip :thumbsup

Good post:thumbsup

No matter how long I've been in the biz, or how much I think I know, I love to see people posting informative or tutorial threads.

Excellent post, optimization is certainly something worth taking a few extra minutes on.

:thumbsup :thumbsup

why is it that gifs are better for "text" images?

Nice advice..thanks!

Thats a good piece of advice. Not only does it save bandwidth it will help your page load faster.

Rock out Thanks!

How come we don't have a Rock Out Smile here on GFY?

jpg tends to blend/blur colors when you optimize them a tad too much...

when you do this too text based images they get ugly...gifs are limited to 256 colors, however, if you need 256 colors you're almost always bettr off converting it to gif


Text images are mostly low color pics when cut right, that's why gif is the best..low size, much sharper since gifs don't get blurry

There must be a better explanation for it but just try and test for yourlself

Download the fireworks trial at macromedia and give it a shot

Angelie, your sig is the perfect example..yours is 46.8kb at the moment

http://www.madskills.nu/gfy/BikiniBanner.jpg

this one is 21kb

i forgot to mention that indeed...faster loading pages likely result in more sales since less surfers leave your page before it's fully loaded

Excellent advice, and great post. :thumbsup

:1orglaugh :1orglaugh :1orglaugh :thumbsup

:1orglaugh :1orglaugh



There are suprisingly a lot of people that don't optimize...

Creative, have you read this thread yet? Please post "OK".

Awesome tutorial, thanks!

That's one of the most basic parts of design but I'm sure alot of webmasters haven't even thought about it. Good lookin out for the average webmaster. Image size should be thought of as an expense :thumbsup

no, the amazing part was the fact that a useful thread was still somewhere near the top when I found it.

Bump.

Really great info in this thread. I knew about the jpg & gif differences and slicing images up, but that was good advice about slicing the text/graphics parts from the photo parts and how much bw you can save using jpg/gif combos. I'm gonna try to remember to do that.

noooooooooooo
useful posts on GFY might set a precedent
I'd much rather have AOL chatroom flunkies asking about pussy
;-)


Good post and something I always ntry to do when designing.
Good design is more than just making pretty pictures in Photoshop......

Good post

I dont optimize near as much as I used to these days. Bandwidth keeps getting cheaper and surfers keep getting faster connections. At some point its just not profitable to spend the time itself doing this unless you can batch it. :2 cents:

very good post

Good advice! :thumbsup

I'll give this guy a short but sweet plug... I wish I had enough work to hire him full time, he's my new favorite designer. He's built several galleries for Skin Traffic and they are just fantastic. His video optimizing is quite good, too.

good advice... I had just started saving alot of things as gifs, your right there is barely any quality loss but the file size sure is alot better

I am shure many guys here will fallow that exellent advice,very good :thumbsup

here is my little tip

use two-pass encoding when doing wmv files, the compression gets better.

That will come in handy! Thanks!

oh fuck no

1) open photoshop
2) 900 x 800
3) make the hugest, 31337 banner with tons of hack codes and intrusion scriptz encoded into image
4) save it as a high quality .jpg
5) open a gif animator and make the same exact frame play 1,000 times to M4X1M1Z3 F1L3 S1Z3!
6) Sell professional 31337 banner for $8.00

http://creativestudios.port5.com/lol/300k.GIF

Thanks Sly :thumbsup You now you can always hit me up when you need something

One more bump for the early batch

its amazing mike