Whether you are converting video, editing audio or manipulating multimedia files in some way, we all quickly run in to the problem of “how to do that” and “what is the right tool for the job.” Audio, and video in particular are becoming more and more important on the web but the barriers to dealing with those media types are somewhat higher than just writing text and images.

I recently did a large video project for a client and had to do everything from converting DVD’s to web video, converting web video to DVD’s to creating audio files from video and more. I tried a number of software products and usually had to use a myriad of them to get the job done. It was tedious, time consuming and the quality wasn’t always that great. The biggest problem I was having was converting video to the right format for the web with optimal quality.

During my search for a better way I stumbled across AVS4YOU. At first I was torn because the product wasn’t free and I was working on a very tight budget. But after a number of other failures I decided to give it a try and I can tell you this software changed my multimedia life!

AVS4YOU is actually a suite of tools for audio, video, images and a few other miscellaneous things. You pay one price and get access to the entire suite. They offer an unlimited license or a 1 year license and a 30-day money back guarantee.

Note: They are running a 70% off special through March (sorry I didn’t catch that sooner in the month).

I can’t begin to tell you how much I’ve fallen in love with this software but here are 7 of the reasons why:

1. The set of tools is comprehensive, from editing audio to video conversion, authoring and more.. it’s in there
2. It has saved me more time than I can calculate
3. It is very affordable
4. I’ve found it to be very intuitive and easy to use
5. Good quality and good support
6. You can download the tools and add them on as you need them, you don’t have to download things you don’t use (no bloat on your computer).
7. Just one of these tools is worth the asking price IMO much less all of them
   

While there are many tools out there, some even free, I’ve not found anything as comprehensive, easy to use and reasonably priced as this.

In my case I use the video converter more than anything (I already have Sony Vegas for editing) but I also use the audio tools, DVD authoring, Video Recording, Ring tone creation…

AVS4YOU is great whether you are a total novice just trying to get some video on your site or are more experienced and looking to simplify your workflow.

If you are doing anything at all with multimedia files for the web (or otherwise) AVS4YOU will save you time and frustration.

Multimedia is all over the web now and video in particular is catching on but for most of us, images will are the most common form of media we’ll add to our websites.  Despite how frequently they are used one thing a lot of people don’t do is appropriately re-size images for their site or to send in email. If you know someone that keeps sending you emails with giant pictures in them, feel free to send them a link to this post.

Common mistakes include:

• Leaving the image too large which breaks the layout
• Dynamically adjusting the image size using CSS or HTML

It’s much better size your images appropriately but when you have a lot of images it can be a real pain. There are many tools out there which allow you to batch re-size images but I’m going to focus on two common and solid tools to help. In both cases we’re looking at services which also allow you to host your images on their site and share them with the web. Best of all the tools are free!

1. Flickr:

For all around photo sharing and great Search Engine Optimization (more on this later) Flickr is a great way to go. They offer the Flickr Desktop Uploader (Windows and Mac) which will allow you to upload photos to your account and automatically re-size them for upload through the tool. They have several re-size options including:

• 800 pixels (good for on screen display)
• 1280 pixels, suitable for small prints and the minimum for use as desktop wallpaper
• 1600 pixels, suitable for larger prints and more ideal for desktop wallpaper
• 2048 pixels, good for still larger prints and archiving.

Auto resizing in the Flickr desktop uploader is as easy as going to the top menu and selecting Tools > Preferences and look under Automatic Resizing. The default will be not to re-size at all.

Unfortunately you sometimes need sizes other than these for your site. In the my photo gallery on vsellis.com, my display width is set to a max size of 600 to fit in my main content area so the default Flickr sizes won’t quite work and I need to find a different option.

Note: If you look at your photostream on Flickr.com you’ll find that it will create two sizes of thumbnails for you as well.

The normal Photostream thumbnail is 240px wide or 240px tall (which may be a useful small images size on your website), and the navigation thumbnail is a cropped square at 75px x 75px (which is a good icon size for use on your site though a tiny bit big for my preference, I usually use small thumbnails which are 70px x 70px or extra-small at 55px x 55px).

2. Picasa

Picasa (download) is another great tool from Google. Free to download and they’ll host your pictures as well. The service isn’t generally as popular as Google but their desktop client is great for making managing your photos easy. You can easily upload to your Picasa Web Gallery (all you need is your Google email or id) and edit your photos including batch editing. One of the things I like better about Picasa is that when batch resizing you can choose the maximum width or height that you want to resize to rather than using the handful of defaults provided by Flickr, which is useful when you need to get to a specific size to use images on your own website.
To batch re-size in Picasa simply open Picasa and do the following:

1. Select the folder you want to re-size.
2. Select the images you want by ctrl+clicking on them or if you want them all use crtl+A (select all).
3. Go to File > Export Picture to Folder
4. Select the “Re-size to” radio button and enter the maximum size (it will constrain to a maximum width or height)
5. For image quality I usually use “Normal” it provides good image quality while making the image file size reasonable for web downloading.
6. Click Ok and Picasa will do it’s thing.

Note: You might want to check your pictures and make sure they all still look sharp and crisp (no pixelation) near the edges of object. If the quality seems to suffer a bit, go with the default quality instead of “Normal.”

Picasa will create album thumbnails which are constrained to a maximum size of 128px (again, tall or wide).
Not only do Flickr and Picasa make it easy to re-size and batch edit images you can then link to the images on their service if you want when embedding the image on your website (as long as the size is right), which means that bandwidth intensive images use their bandwidth not yours!
My personal approach is to use my online Picasa Gallery as an archive and place to store a lot of images while I put my best stuff on Flickr.

Now you have two good ways to easily re-size images that you can send through email and use on your own website completely free.

These are two common tools but there are several other online tools available as well. Here is a quick list of others you can check out:

• Smush.It (you can also get a Smush.It plugin for WordPress that will automate this for you when you upload images to your WordPress blog (self hosted WordPress, not sure about WordPress.com)
• Punypng
• Easy Image Resizer
• Web Resizer
• iResize
• Pic Resize
• Shrink Pictures
• DynamicDrive Image Optimizer (also has a great tool for creating a favicon)
• Resize Image
• Easy Cropper
• ImageOptimizer.net
• Resizr
• Picnik (full blown editor, not Photoshop by any means but free to use web service that covers the basics well).

You can see a quick review of most of these at hardgeek.org.

Was there anything I didn’t cover here that you would like to know about batch resizing images or using Flickr or Picasa? Let me know…

Sidebar, If you like to take your own images but aren’t exactly a great photographer take a look at the new book on camera basics to help you get to know your way around your camera a little better. Knowing your camera will make all the difference in getting better pictures straight out of the camera.

I don’t frequently “plug a plug-in” but I just uncovered one today that I can only classify as absolutely essential and almost life-changing if you live and breathe WordPress… “Additional Image Sizes” by Walter Vos. First off I’m embarrassed that I didn’t know about this sooner (I’ll get over it). In a nutshell this plugin allows you to add additional image sizes to the default WordPress Image sizes. While this might seem basic the implications are huge for automating image management in WordPress. 1) Because a lot of users don’t really know how or have the tools to do proper image management and 2) it can be very time consuming (and very tedious). Using this in conjunction with some of the features coming in WordPress 2.9 (hat tip to Aaron Brazel a.k.a. Technosailor for his excellent post) or in conjunction with another plugin like Get the Image from Justin Tadlock this is going to make the life of a lot of website owners/operators a lot easier.

How to Use It:

WordPress comes with 4 default image sizes:

• Thumbnail
• Medium
• Large
• Full

All of these sizes (other than full) can be set to whatever you want them to be (ex: Thumbnail is 150×150 by default but you can make it whatever you want).

Since a lot of my sites or sites I’ve built also need a smaller size (postage stamp if you will) I have historically had to create that small image I can now automate the process thanks to the “Additional Image Sizes” plugin by creating a new size. In my case I called it “micro” and set it to a square aspect ratio, commonly 75×75, 70×70 or 55×55.

Now, along with the other image sizes WordPress will automatically create an image of the right size for my use. No more manually creating the smaller image. Of course you are not limited to how many you can create but in most sites 5 image sizes is about all I need (WordPress was falling just short by 1 out of the box).

Note: if you create a square image size (ex: 70×70) WordPress will shrink your uploaded image down to that size and then crop it to that exact aspect ratio, so if you start off with a rectangle image and end up with a square you might not get it cropped exactly as you would like. Just some thing to keep in mind (I can live with this) but if you’re doing logos, etc… it might chop off something you don’t want it to.

I love pictures and as an avid photographer and all-around web guy I’ve loving seeing the incredible images people capture, though it matters little if your awesome pictures can’t be found. On the web as elsewhere, pictures help to tell the story, as well as visually break up your writing making it easier on the reader, particularly when reading on the web. Pictures are also good for your web traffic and can help people find their way to your site if you use them well. While it can be a little time consuming, using images (and doing some of the things I’m going to mention below) is very worthwhile.

Also, if you your’re an amateur and want to take better pictures right out of the gate, take a look at Photography Nuts & Bolts (a camera basics ebook). It’s a great introduction and will get you much more familiar with your camera and taking better pictures.

In short, we’ll discuss four things you should do if you use images on your website and want to use them to drive more traffic:

• Naming Images
• Web Image “Metadata”
• Image Hosting Services
• Image Optimization

Naming Images

Naming images sounds like a really basic “tip” and it is, or would be, if it weren’t for the fact that many (if not most) people never bother.  By default, most digital cameras will name images something logical to a computer like IMG387370.jpg, which is all fine and good if you’re a computer, but humans looking for a picture of a Mastiff (for example) aren’t going to search on “IMG387370″ they’ll search for “Mastiff” or whatever they are looking for. The important thing to remember is that image names do get indexed by search engines and people do a lot of image searching on the web.  Not only should you choose relevant names which are descriptive of what is in the picture but it is also a good practice to use dashes or hyphens “-” in between the words. Hyphens are generally regarded as “white-space” characters by search engines so if your image is of Cinderella’s Castle in the Magic Kingdom you might actually name the image cinderellas-castle-magic-kingdom.jpg. (FYI, not using hyphens can be problematic for reasons outside the scope of this post but my recommendation is to always use hyphens so you’re covered). Good names mean findable images.

Web Image Meta-Data

For purposes of this discussion we’re talking about one thing, alt tags. It’s always a good practice for your images to have alt attributes in the image tag which are also descriptive of what is in the picture and often is the same as the title. Note: hyphens aren’t necessary here since this isn’t a file, just an attribute that describes the image. Alt tags are important because it allows people on various browsers or with images turned off to know that there should be an image there and, if you were appropriately descriptive, what the subject of the image is. The text is also searchable and provides an additional opportunity for you to provide keyword rich text about your subject. Most of the time your CMS should allow you to add a title in the interface when you upload an image but even if you have to do it manually make sure you do. If you aren’t familiar with html your image tag would look like <img src=”/pathtoimage/image-name.jpg” alt=”image name or description” />.

Image Hosting Services

As a rule, I’ve usually told people to host their own images. If your images sit on your site you get the “credit’ or SEO juice from having them there. Image and content searches that people perform will bring them to your site as a result. While it’s still fine to host your own images it’s not the only alternative. At WordCamp Dallas 2009, Chris Silver Smith shared this breakdown comparing image services. Based on my experience (before WordCamp and after) I would concur with Chris’ top choice of image hosting services, Flickr. I use Flickr for the images you can see in the sidebar of this site in conjunction with the Tantan Flickr Plugin (and a little customization which I need to finish) I have it completely embedded in my site. The advantages are that I use Flickr’s bandwidth to serve up my images and I get link credit back from the Flickr site (a very reputable site in the mind of the search engines). Even if someone only finds my images on Flickr, I  have links in the description back to my site and it still drives traffic to me. To be honest, I’m not sure if it works as well with the other image hosting services though from my experience it has not. (I’m not saying it doesn’t work at all, just not as well in my experience). I also routinely host images on Picasa as a repository but get almost no traffic from there. Flickr seems to be the choice of the broader internet audience and the search engines (interestingly even with Google though Flickr is owned by Yahoo). There are a number of other good image sharing services so feel free to use more than one but I would definitely include Flickr in the arsenal. BTW. for some other good tips on this see the 10 Extreme Social Media Hacks by Giovanni Galluci presentation from WordCamp Dallas.

Image Optimization

Just a word on image optimization since I recently wrote a post on optimizing your images for the web. It’s a really good idea to find a way to shrink your files down for use on the web. It will save a ton of bandwidth and provide a better, faster user experience. If you want it to be used as a desktop wallpaper or otherwise want a big/high-resolution version up there then do so with the images that need it but most of your pictures don’t need to be massive, full resolution images. Read the post on optimizing images for the web for ideas on how to manage image resizing and optimization.

If you give your images descriptive titles, use alt tags, take advantage of Flickr and appropriately optimize your images you can use pictures to drive traffic as well as tell your story.

Interestingly as I’m writing this Dallas is playing the New York and of course we have all heard about the massive new dome with giantjumbo tron that was built for the Cowboys. I went to a preseason game and snapped a few pics while there and put them up on Flickr (which are also of course embedded into my site) . Up to the time the game started I was having an average traffic Sunday. Once the game started and people were seeing the inside of the dome they were apparently also surfing the web for pictures of it because my traffic spiked and has made today my second biggest traffic day ever. Go Go SEO!!!

First, why should you care about understanding DPI & Resolution? In short, if you are going to print something (particularly of quality) and are every tasked with optimizing images for the web it’s important to know just a few basics about how images work on the web. More importantly, if you are ever going to hire someone to develop collateral (a brochure, flyer, …) for you, they’ll likely have requirements you won’t necessarily understand and not everyone is good at explaining them. So what follows is a very simple explanation of what you need to know to make the whole process a little easier.

First of all, it begins with a good picture, no matter what the source. I use iStockPhoto.com for stock and take a lot of my own pics. If you are looking for resources to help you improve your own pictures even just basic ones shot with a point and shoot camera take a look at Photo Nuts & Bolts.

A few definitions to start with:

DPI: Dot’s per inch. The number of dots or pixels in a single inch. The more dot’s the higher the quality of the picture (more resolution, more sharpness and detail,… )

Resolution: The easiest way I can explain resolution is to say that more resolution means an image displays more detail (or is capable of displaying more detail). Higher DPI means higher resolution.

Print: 300dpi is standard, sometimes 150 is acceptable but never lower, may go higher for some situations.

Web: 72dpi, always.

Ok, so how do you apply this new found insight?

If you are sending someone images to use for print (again, that brochure you are having made) and they tell you the images are “too small” odds are the resolution wasn’t high enough. The image might look great and huge on your computer but is actually really small when printed out. To add to the confusion, your monitor resolution will also determine how big the picture appears to you when viewing it on your computer. The same sized monitor set to 800×600 while show an 800 wide by 600 tall image as a full screen image. On a monitor that is 1600×1200 the image will only take up 1/4 the screen.You might have thought it would take up half but it’s actually going to be 1/2 as wide and 1/2 as tall (so 1/2 times 1/2 = 1/4). Long story short, the image will look much smaller on that screen but the image itself is still the same size. Since print displays at 300dpi the image looks still that much smaller.

Here are a couple of quick examples to show you the difference, no matter what your monitor resolution, it’s all relative!

The first example below has  a lot of detail and is at 300dpi (even though the web is 72dpi this works for example purposes)

The second example is at 72dpi but scaled up to the same size so you can see the difference in detail. The actual image would be about 1/4 the size when you go from 300dpi to 72dpi, but at the same height and width is where you can actually see the difference.

300dpi example

72dpi example

Hopefully this has helped you get a little clearer on the differences between DPI, resolution and why if you have someone do something for you in print there will be different requirements than for the web. It’s also why that digital camera with higher megapixels takes better pictures than one with lower, it gives you more resolution to capture more detail.

Another important note about monitors, even though 72dpi is standard for the web monitors have slightly different resolutions depending how you have the monitor set and how big the monitor is. For example, a 19″ monitor set to 1024×768 will show 70ppi (pixels per inch, monitors use pixels which are square not round but pixels and dots for the sake of this conversation are otherwise analogous). By comparison a 19″ monitor set to 1280×1024 will have a resolution of 87ppx which means you fit more on the screen and get more detail.

Side bar: image files with higher resolution (dpi) will also have a bigger file size because they contain more data. Start with the biggest images you can but when putting images on the web they should be set to 72dpi, it’ll save you a ton of bandwidth and they’ll load faster. Yes they’ll be smaller than the original but should in most cases be plenty big because of monitor resolution (ppi) sizes.

Ok, one last thing, don’t confuse “image size” with “file size.” Image size refers to the dimensions of the image (pixels, dots, width, height, …), file size is how many kilobytes or megabytes the image is.
Any more questions on DPI, PPI, Resolution? Ask in the comments and we’ll try to clarify.

Do or Do Not really is the question when it comes to using a Flash intro on your blog. In my opinion, 99% of the time the answer is “Do Not.” There are a number of reasons for this which I’ll get into shortly but to begin with I generally look at flash intro pages in the same light I see “spinners” on wheels. Flashy, yes, but also costly, unnecessary, distracting, without purpose and quite frankly, silly looking. Yes, your flash intro is probably little more than “bling” for your website. Some sites, and very few, call for a flash intro. If your business is “flash” and “bling” then it might make sense for you. Some sites that come to mind where it works are chanel.com, mgmgrand.com (click on “Enter Maximum Vegas”) but for most sites the flash intro really doesn’t make sense.

Reasons not to do a flash intro:

1. Once someone has watched it once or twice they aren’t interested anymore, it’s just taking up time before the get to what they came looking for. If you absolutely insist on having a flash intro, make sure there is a way to skip it but you are better off ditching it to begin with.
2. Flash is not easily, if at all, searchable which means that page isn’t getting indexed by the search engines in any meaningful way potentially loosing valuable search engine optimization. So all that work you put into crafting your text, tag line, … is wasted.
3. In most cases, your home page is your most valuable page in terms of messaging and getting people into your site. It’s URL is important, content is important, organization and layout are established and using a flash intro throws all of that out the door. You’ve just wasted your most important page in the name of “bling.” It’s like putting a Civic engine in a Ferrari so you can afford the spinners on the wheels… to which most will respond, “what in the world were you thinking?”
4. Increased file size on the homepage. Part of what search engines will rank your site on is how quickly it loads. Having a huge flash file is bad for you, especially when it includes music…
5. Generally, the flash intro serves no purpose. You’re wasting time, money, bandwidth and searchability.

In all fairness, I’m not trying to say never use flash. I love some of the things I’ve seen done with it. Consider using it in your header or for navigation, but I would say use it sparingly and make sure it has a purpose. If the use of flash can help portray your company objectives better than a static page then include a flash component. In some industries such as gaming, visitors will expect to see some Flash on your site. In such cases, Flash can really serve as elegant way to project a message but even in many of those cases, a Flash INTRO may not always be the best answer.