Image Optimization for Bloggers Part 2: Image Formats and Naming Best Practices

photooversized

Last time we looked at how to get your images files tuned up better download time and user friendliness, this time let’s take a look at which format is best for the situation, and good habits to keep you pictures easy to find and organize.

Image Formats

There are a few image formats for the Web the most common are JPEGs, PNGs and GIFs, all have their strengths and most sites will use all these to some extent. To break it down:

The BasicsGreat ForBad For
Jpeg (.jpg or .jpeg)Jpegs use a form of compression that shrinks the information in square sections ( this is also what causes the “pixelated” effect when over-compressed)Photos, or any image requires a wide range of color.Anything requiring a transparent background. Jpegs also get really noisy looking at higher compression settings
PNG – Portable Network Graphic (.png)This format uses RGB color tables to improve compression, unlike jpegs, .pngs are a lot less lossy in their compression and can support transparency.Graphics like banners buttons and the like. Can have transparent sections, making them great for logos.Nothing really, but may not have the color range of JPEG, depending on settings, may have trouble displaying on very old browsers.
GIF – Graphics Interchange Format (.gif)An older format that also uses a color table, but with less colors to limit the file size. This makes the file size really small but also makes it less versatile in how it can be used.Logos, and buttons .gifs also have transparency so image can blend over the backgrounds.
GIFs can also be animated making them the go-to format for animated banners.
Photographs, gradients anything with a wide range of color values

 

Most of the time JPEGS are the way to go for most photos on a website, they’re easy to compress and can be viewed on older browsers.

File Naming

One the best ways to save your time and stress on your site is start off with a naming convention. Grabbing the pictures straight of your phone or camera is great at first but when you have 10,000 photo’s to good through all starting with “DSC234_…” it’s can get a bit out of hand. Having a standardized method of naming allow you to organize your images with the need of subfolders.

Here’s an example of the naming conventions I use for clients:

clientname_mainpagehero-1900×300.jpg

From this I know where the image is from (likely client’s website) what it’s used for and what size it is. Having a very short description of the image as the name is also a great way to short (for example “(product name)-front-600×300.jpg”)

Aside from making easier for you to find the image, a proper descriptive file name, along with relevant alternate text and description makes images easier for search engines to find and index. Getting your site’s images optimized can take a bit of work but really its good foundation for improving both page and making your content as user (and search engine) friendly.

Comments are closed.