Optimizing web graphics

[hellmind]

best google video so far, at least she shows ppl in google are still humans, thank you Amy Farrah Fowler

[NaveenAsphalt]

haha shes very happy to be on the video huh ^_^

[RWOverdijk]

I actually like the way she brings it, makes it more interesting to watch. Nice going :)

[Me04120]

This woman talking is a total goon. I'm not trying to be mean, it's just there's no way around it.

[TheSuitIsNOTBlack]

@Me04120

I think she's cute :)

[warp1round]

Supercalifragilistic :)

[Rizimar]

It's pronounced "JIFF"!

[AdduJi]

@Rizimar no it's not

[Rizimar]

@AdduJi Type "gif pronunciation" into Google and look at the first result ;)

[TheRogueMonk]

whatever i do the high quality stuff wont work because you cant get them transparent

can you help?

[thebestcindiella]

lmao such enthusiasm. she shoulda went with PNG instead of JPEG though

[sKratch1337]

@thebestcindiella No. PNG uses way to much space.

[thebestcindiella]

@sKratch1337 space over shitty quality any day.

[sKratch1337]

@thebestcindiella You're stupid, the space / quality ratio is way to low for it to be worth it, just use JPEG and put the compression rate at 10 (If you're using Photoshop.) you won't be able to see it unless you put it under a microscope. But the file size is probably going to be like 2x as small as if you used a PNG file.

[thebestcindiella]

@sKratch1337 anyone who still uses jpeg is beyond me, and like i said i could care less about the space and the capacity. yes i use photoshop but i still highly prefer PNG over jpeg any day. like i said, quality over space

[sKratch1337]

@thebestcindiella That's why your site would be unpopular, the loading times would be horrible for people with low bandwidth.

[Securityjobsbiz]

cheers for the share....

[akranigaurav]

Susie Sahim is so cute and very cool to explain the basic image optimization using photoshop. Great!

During my college days my Computer Science Teacher was not that cool and she always kept nagging me with her cut throat dead lines and bombardment of 100++ assignments. I learned very few things during my college days because of this pressure from my tutor. Luckily I somehow survived.

[Talk2Luke]

It's pronounced JIFF. ARGH. My ears are bleeding!

[akranigaurav]

@Talk2Luke You are right it is pronounced as JIFF and not GIFF. Its OK everybody makes mistakes. Thats how we all learn :)

[thebestcindiella]

@Talk2Luke no its not. its pronounced GIFF. you are .gif files .jif? NO its GIFF and thats how im going to keep pronouncing it. GIFF not JIFF what the fuck this isnt peanut butter. #fuckouttahere.

[Talk2Luke]

@thebestcindiella I can't remember the site, but two of the founding members of the format call it "JIFF". I'm sure they know.

[thebestcindiella]

@Talk2Luke no.

[thebestcindiella]

@thebestcindiella yes.

[Godon1]

Exceptionally cute, I must admit.

[styfle123]

This didn't help at all. I know these videos are supposed to be short, but I was hoping for a little more depth. What if you want to use transparency, is it better to use a gif or png? Stuff like that.

[TheFdcs]

You can also use the websnap feature under the gif settings to further refine the colors chosen by shrinking the selection down further. Even better you can manually remove colors from the gif palette by drag and dropping each color patch (from the color table section) into the trash. It may take a little longer, but you get the most optimum color palette for better compression and avoid photoshop from changing your chosen colors at the same time.

[TheFdcs]

They may have just been trying to cover the basics... but lookup different color reduction and dither (breakup flat color transition) algo's. You'll also want to look into the smart blur filter in photoshop. Used in high quality mode with a very low radius (0.6 and under) can help reduce the amount of gradations and smaller details that no one will notice, allowing for better compression. Though general rule of thumb is, gradations use jpeg, and less gradations and color use gif (pron. "jif").

[eallik]

Is she using a metronome for her speech?

[yoguide]

You'll get a better crop by using the "Trim" feature which will be pixel perfect.

[entropy669]

WTF? And what does this have to do with Google?

[simpleappz]

Thank you google.

[JaneyC]

It's pronounced "JIF" not "GIF". I know there is a G in it but it's pronounced with a J. I thought Google only hired the best and most knowledgeable people, not the ignorant!

[InsideLosAngeles]

Keep all images under 100Kb, that's my rule.

[TeeBeeNZ]

GIF.... really google? Really!?

[lonegun]

Nice little tips, thanks! More tips please!

[MyUnv]

lmao I don't know if it's right to laugh but she's really either nervous or got some kind of problem lol

[TipuIT]

This makes me smile and laugh for some reason XD

[kr3mliyn]

Same here. Her quirky enthusiasm is infectious... and cute.

[KesavaAVP]

loooooooooooool :P

[almightyvegeta87]

I cam here for some info but

huck-a-doodle-do

This is funny

[traxdata2k]

hehe nice one Susie, feeling that nervous enthusiasim! =)

[Hunnter2k3]

Another tip is always work in vector.

Don't go near transparency sliders for anything, full, semi (25/75 if you really need to) and 0 only if you do.

Too much noise in images can lead to bad compression, diagonals can also be a problem, especially if they are uneven.

Hopefully more browsers add better support for SVG, SVG is sweet.

And since it can be dynamically generated (xml-based after all), you can compress it even better than the default. (simple substitution compression, repeats, etc)

[4K4K1K0]

Most browsers support either SVG or VML, now it would be good if there was any good and scriptless fallback mechanism

[Blaher]

Vectors always aren't the best solution. Especially for complex and/or huge graphics. The amount of code required could take up more space than a bitmap in some cases.

Although SVGs are nice since you can infinitely zoom in and never get a rasterized (I think I just made that up) view.

[seandelaney1982]

I use PNG as my default. If clients provide me with JPG, GIF or even the PSD i'll still convert them to PNG for the finished image.

[pyrolowryder]

Transparency FTW

[oswright]

thank you very much...really wonderful !...oscar wright, rome

[dimage1985]

Alt + I + R (or Image > Trim) would have been a much quicker and more accurate way to crop the white space in both of them too.

I know that wasn't the point of this exercise, but I thought I'd mention it in case anyone who hasn't used Trim before reads this :)

[sayweb]

very good.

[wwwluckyro]

This advice should be basic for most web developers. Also, I think it would be more fit for the presenter not to fake everything so much. It way too visible. It's clearly not her style. I'm sure she can do better by being natural.

[buterux]

In most (if not all) cases, PNG (especially with non-Adobe optimizers) does the job much better than GIF, so its worth to mention that. Im aware that probably wasnt the point, though. Cheers!

[VirianFlux]

For people that care about transparency (like me) maybe demoing squishing a few PNG alpha-24 PNGs down to 8-bit would have been good.

In Google's case for most of their low colour logo's gif is best.

[Conceptskatemedia]

I agree I use PNG allot

[Conceptskatemedia]

Great video! Great motivation! It must be amazing working at google!

[eksimaru]

i second the motion! she reminds me of that geeky girl in the movie american pie though :)

[Jamaica1985]

Haha exactly :D

[Hunnter2k3]

Haha oh wow, she really does remind me of Allyson.