Where can I learn about standards for web graphics and video?

May 12, 2009 12:05 PM

Where can I learn about standards for web graphics and video?

I need to get up to speed on "best practices" for creating graphics and video for use on the web.

I work for a website that produces a lot of media content including a daily mp3 and video podcast. Ostensibly, I'm the systems administrator but lately I find the focus of my job moving into helping produce graphics and video for the site.

I would be okay with this, but I don't really know what I'm doing and no else here really does either, so there's no one to ask when questions arise. I'm okay with learning on my own but I haven't been able to find a decent authoritative resource.

What file sizes should I be shooting for? What are the pros and cons of different graphic file formats? What resolution should things be at?

How do you learn this stuff? Is there a book or website anyone can recommend that can point me in the right direction?

Thanks

posted by word_virus to technology (3 comments total)

There isn't one. At least not that I know of. Podcasting has been pretty much completely independent on the production side of things, so people do all sorts of different stuff.

The audio standard is obviously mp3. Bit rate is pretty much determined by content and your audience. Just voice can be surprisingly low bitrate without sounding bad, but music requires a lot more.

As for video, I think .h264 is pretty standard. iPods use it, so that's the biggest chunk of your podcats audience, and even Microsoft gave in and made the Zunes play .h264s as well (otherwise the video podcast section would be useless in the Zune software) As for resoultion, again, content, and audience. Some people are willing to download half a gig of video every week. Lots aren't.

That's just my general knowledge for being a podcast producer/consumer.
posted by toekneebullard at 12:24 PM on May 12

Targetting the iPod isn't a bad idea - that suggests codecs, resolutions & bitrates for video. For audio, 128kbps mp3 is great, unless you're doing music, perhaps.

As a note, mpeg4 produces larger files than h.264 but is easier for older computers to play.
posted by Pronoiac at 2:03 PM on May 12

A lot of this is a question of tradeoffs, not of there being one correct answer -- higher resolution files means greater quality but also greater bandwidth and storage expenses, etc. So the answer is really going to depend on your organization's (and users') needs; you're not going to find a book or website that can tell you the answer.

One thing to consider, if you're producing a lot of content, is whether it has any potential for reuse in the future. If so, you'll want to keep versions of everything in storage in higher resolution than what you put up on your website today, against the expectation that over time bandwidth costs will drop and users will expect higher quality files.

What are the pros and cons of different graphic file formats?

This part can be answered pretty simply:

GIF is for images with relatively few colors, and large areas of the same color -- charts and graphs, not photos.
JPEG is best for photographs. The degree of compression can be controlled pretty closely, again with the bandwidth vs quality tradeoff.
PNG can be used for anything, but tends to have slightly larger file sizes than JPEG. Its primary advantage over the other formats is that it supports alpha transparency (GIF only allows single-bit transparency, and JPEG none at all.)

On the web, those three are pretty much all you'll use. Conversion to any of those formats should be done only as the last step in your workflow: you don't want to be reopening, editing, and resaving a JPEG multiple times because the compression will get more and more obvious each time. So any images which have any potential for reuse you should be storing in the non-lossy format of your choice, preserving as much detail as possible. Vector-based images in particular should be archived in a vector format such as EPS or .ai, since that allows you to produce versions in any size needed later on. (Don't let the only copy of your company logo be an overcompressed 72-pixel jpeg somewhere on your website. For example.)

What resolution should things be at?

The answer to this depends on what you mean by the question. Resolution in terms of dots-per-inch or pixels-per-inch is effectively meaningless unless you're doing print work; a 600x600px image will display exactly the same in a web page if you save it as 72ppi as if you save it as 300ppi. Online, the number of pixels is all that matters.

As for resolution in terms of the number of pixels, the answer is "as much as possible" for longterm storage of still images -- see above re dropping bandwidth costs and rising user expectations (and monitor sizes). For still images you'd be crazy to store them in anything smaller than full-res straight-from-the-camera RAW format. Video is another story, since storing a lot of HD-quality DV files gets expensive, so here you're back in cost-versus-quality trade-off land. There are squillions of different video formats, and of different compression codecs within those formats; I have at best a layman's understanding of them so won't attempt to suggest one over another.

(If you don't care about longterm storage at all, but are just asking what size your disposable podcasts ought to be broadcast at, you could do worse than just doing as others do.)

How do you learn this stuff?

Typically, by being a designer. There's a reason it's a career rather than something anyone can do in their spare time. Your company might consider hiring one, rather than using a sysadmin to do the job.

(Think of it this way: "hey, I'm a graphic designer, but lately I've been doing a lot of system administration work -- what book or website will tell me everything I need to know?" wouldn't have an answer, either.)
posted by ook at 9:19 AM on May 13