As a web developer, I often assume that my clients know how to get their images to me; however, I know it is confusing with so many different file formats. In this post I will offer some answers and guide you through some of these common problem areas and help further reduce the language barrier between the web developer and the client.

Best Formats for the Web

To start us off, let’s talk about what image formats work best for the web. Almost all images across the Internet are one of the following file formats: .gif, .jpg, .jpeg, or .png. There are advantages and disadvantages to each one of these file formats. One of the well known web development resource sites, SitePoint© has a fantastic article about the differences between .gif, .jpg, and .png file. I highly recommend reading this article as it explains the optimal format to use based on what your image is.

Graphics Interchange Format (GIF)

If your image has a lot of large areas of the same color, then a GIF file is the best image format to use. A GIF image supports 256 colors. Most simple logos usually end up being a GIF format or a PNG format on the web. GIFs allow for transparency and usually work best when they are placed on elements that have backgrounds that are made of one color. This image format also allows for simple animated images. Animated GIFs were very popular in the 90s but are not used often in modern web development. GIFs can be used for just about any image but work best for anything that isn’t a photograph. They are most effective for simple graphics that don’t have a lot of detail and for graphics that require simple transparency.

Joint Photographic Experts Group (JPEG or JPG)

A JPG is almost exclusively used if your image is a photograph of something or someone. Most digital cameras automatically save images as a JPG. There is no difference between a JPEG and a JPG, JPEG was just shortened down to JPG to make things easier, more uniform and less bloated. The JPG image format supports 16.7 million colors and this is the main reason why it works well for photographs.

Portable Network Graphics (PNG)

PNGs are the newest of the image file formats. They were made to replace GIFs because they have more flexibility and support 16.7 million colors like a JPG. Full transparency is supported with PNGs, meaning that you don’t need to worry about having an element with a solid background color behind it. PNGs are usually a larger file size than both GIFs and JPGs but are very useful for their full transparency support. PNGs are great with gradients and offer very small file sizes in comparison to what a GIF or JPG would be of the same image.

Trust the Experts

I recommend sending your web developer an image in JPG format or PNG format. A web developer can then save the file as the optimal image format for the web. If you have a logo, please try and send us the logo from the creator of the logo. Logos work best if they are transparent. We’d be more than happy to talk to your logo designer for you and get the files we need.

The Best Resolution is the Only Resolution

Next, let’s look into one of the other common problems I’ve encountered with images. I often receive images that have small dimensions and are impossible for me to use. It’s always better to send a large image and have a web developer shrink the image down to what it needs to be. When you start with a small image and try to blow it up you will get a very unclear and pixilated image. I recommend sending the image at no less than 1200 pixels wide (for landscape images) or 1200 pixels tall (for portrait images). The larger the dimensions of the image, the more flexibility we have with editing it and the better the image will look after editing.

Sending Images

Finally, I want to talk about getting your photograph from your computer to your web developer. Saving your photos in a Word document or a PDF is something I highly discourage. It takes a lot more effort to use these images. When you want to send your developer an image, please send them the actual image file (.gif, .jpeg, .jpg, or .png) via email. You may send more than one image at a time but please try to keep the total attached file size below 10MB to ensure that we get it. Feel free to send us multiple emails if you have more images than this. If you have 25 or more images, it would be best to send it to use via CD or a USB Flash Drive.

In Conclusion…

Images are a great asset to your website. Without them, the World Wide Web would be pretty boring. I hope this article was helpful to you. If you have questions or comments, feel free to leave a comment below.