I discussed in a previous article the idea of SEOing images, optimizing them for web use. I gave several tips for making your images more recognizable by search engines, but not much information on what types of files there are. This time, I’d like to hit a little of what I did in that article, but also explain more about images and file types. I am also a graphic designer, so images are something I am constantly playing with.

Just about everyone uses images on their website, but that doesn’t mean everyone is doing it right. Images make your website look nice (when used properly), and really liven up a space away from blocky colors and text.

In general, people really like pictures and graphics on their websites. Improving the image’s quality for the web makes it even better for everyone. If you’re using the right type of image, file type, and compression, you can really optimize it for web use, making your images ten times better. No matter how pretty the image is, people will only wait so long for it to load. Knowing some information about image types will really come in handy for you, I promise.

So, here we go! Types of files with pros and cons for each:

  • .JPG (Joint Photographic Experts Group) - This here is your most popular file type. Alternate forms are .JPEG and .JPE. In conversation, we say “jay-peg”. When choosing your file type during the saving process, .JPG files are really the default. You can generally get away with using this format for any basic image. Ultimately, however, you want to use this for photos and images with a lot of detail. This format tends to smooth out some of the colors a bit, sometimes making blocks of solid color bleed together ever so slightly. .JPG format is much better at compressing lots of colors than something like a .GIF format does.

  • .GIF (Graphics Interchange Format) - Sometimes pronounced “gif” or “jif”, this guy is nicely universal in a different way than .JPG. Where .JPG is a basic default, you’ll more likely be selecting .GIF for more specific uses. .GIF files can be transparent, completely opaque, and/or animated. This is the format that most old animated graphics used to be in, where now they are in usually in flash animations. Most animations are flash now because it is a much smoother animation, and a much smaller file size. .GIF produces decently small file sizes, but not always for animations. .GIF cannot successfully compress photos like .JPG can. When saving a photo image, a lot of the time it will look pixilated and choppy. You’re going to want this format for images with chunks of color, like some cartoon characters or menu bars. Subtle transitions in colors are for .JPG, blocks of color are more for .GIF. If you decide to use .GIF for some transparent images, keep in mind it’s going to look rough around the edges if you’re not careful, so you’ll have to play with it some.
  • .PNG (Portable Network Graphics) - People usually just say the letters of this format, “P N G”. .PNG files are interesting because they produce a larger file, but are universal, almost like a .JPG/.GIF hybrid. You can’t animate with this one, but you can save photos and transparent images with it. The image is usually pretty crisp quality, but you sacrifice server speed when you use it. Also, certain versions of browsers like Internet Explorer don’t recognize transparency from a .PNG file. I don’t know why this is, but IE tends to be buggy with a lot more than just images.
  • .TIFF - “Tif” format is a really bad format to use. If saved properly it has fine representation online, but can be larger in file size. There’s also a big drawback to this format because so many users have difficulty viewing .TIFF files. You don’t want to use a file format that only some people can see, you want everyone to be able to view it.
  • .BMP - “Bitmap” file format should honestly never be used on the web. It is too large in file size. It slows websites down, and if you were to use a bitmap image on your site, you could really only use one of them on a page, so people could still view your page in a decent amount of time. You don’t want to lose people because your images slow your website down. You want images to benefit a site, not bog it down. However, bitmap files are actually pretty clear images. You cannot compress them, they’re nearly in a raw state, and did I mention big?

There are other file types out there, like: .PSD (Photoshop Document) and .AI (Adobe Illustrator File), but these files are extremely large (sometimes megabytes large) and unable to view on a webpage. These are your source files. No one will see these files except you and/or the designer. It is from these files that you create the file types listed above.

In Photoshop and Illustrator, there are “Save for web” options (under File in the menu) for compressing the images. You can change a lot of their settings, and you can view different variations of the images. There’s a 1-up, 2-up and 4-up, and we’re not talking about Mario Brothers. In these, you can see previews of the same image with different quality degradations to see what it looks like, and lists the file size. You then click on the image you like the best, and click save and you’re on your way. File size requirements really depend on the dimensions of your image. If it is a larger image, you’re honestly going to want to keep it under 80kb. Even this is really too large. If you have a small thumbnail someone is clicking on to see a larger version of the image, they know it’s going to take a little more time to load, so it’s acceptable to allow the larger image go over 100kb, where the smaller one might be 15kb. You’re going to have to use your best judgment on how many images there are on a page and at what size they are. Keep in mind that the more images you have on one page, the smaller you want each file size to be.

I hope that all of this has been helpful to you. It’s always been nice to me to find bits of information to help me along in my endeavors, and hope that this is beneficial to you just the same. Remember, optimizing shouldn’t stop with SEO.