Graphics are an important component to any website. While the copy on your site is also very important, it usually plays a supporting role to imagery. Whether you’re selling products, teaching a skill, sharing a blog, or anything else online, website graphics are necessary.
Not only do users typically prefer images over text, but our brains only need a fraction of a second to interpret an image, while text requires significantly more time and brain power to comprehend. Plus, images draw attention, evoke emotion, and optimized images can really boost SEO.
Image Formats
Even if you are hiring a web developer to do the heavy lifting, you’ll still need a basic understanding of the ideal image size for websites, the types of images used in website design, and which to choose when. Here are the most common types of graphic files used when building a website.
JPEG
The JPEG format, which was developed by and named after the Joint Photography Experts Group in 1992, is the most widely used form of website graphic across the globe. JPEG files are capable of storing millions of colors and were designed to remove erroneous details as a means of reducing file size. To do this, the JPEG algorithm looks at blocks of the image, determines variations in colors, decides which of those variations are least important, and discards them.
Benefits of Using JPEGs
Smaller File Size
JPEGs can be easily compressed, yielding smaller file size, and they tend to produce user friendly images. This is because smaller file size improves load times on your website, and speedy load times improve both user experience and SEO.
Color Options
The ability of JPEGs to display a full spectrum of naturally occurring colors can be a huge bonus.
Drawbacks of Using JPEGs
Lossy Compression
You can’t get back those colors that were discarded during compression. They’re gone forever. If the level of compression is too high, or there is frequent editing while preparing images for website use, you’ll likely notice a significant decrease in image quality. This will be visible not just in the image’s coloring, but in the precision of contours within it.
No Transparency
JPEGs do not support transparency, so background color must be considered when using JPEGs as website images.
Ideal Use
Because JPEGS can display such a variety of colors, they can easily represent the way images are seen in real life and are great for website graphics with soft contrast transitions. JPEG files usually make ideal photos for website design, assuming they don’t need to be edited often.
GIF
The graphics interchange format (GIF) was developed by CompuServe in 1987. It is a palette-based graphic that has the ability to represent up to 256 colors and can support multiple images in one file.
Benefits of Using GIFs
Transparency
A step up from the JPEG, GIF pixels can either be opaque or transparent. This makes transparent backgrounds possible, which is a huge plus for use on websites.
Animation
Although the GIF wasn’t necessarily created with the intention of using it for animation as we do today, it does have the ability to store multiple images in one file. This allows for small animation sequences. With the addition of a little extra code, the animation can play on a continuous loop.
Quick Load Time
The relatively small file size of a GIF lends itself to quick load times, which is beneficial for website graphics.
Drawbacks of Using GIFs
Lack of Color Options
Two hundred fifty-six colors might sound like a lot, but compared to the millions we see in person every day, it isn’t much at all.
Quality
Even optimized GIF files can’t compete with other file types in terms of creating the best image resolution for web use.
Ideal Use
One of a GIF’s biggest drawbacks is what makes it perfect for smaller illustrations such as buttons, banners, charts, and small text. There usually isn’t a need for millions of colors in these website graphics. GIF files are ideal here because of their small size and ability to produce images with transparent backgrounds.
PNG
Portable networks graphic, or PNG, files were created to improve upon the limitations of the GIF format. They use a two-stage compression process that involves filtering prior to compression. This allows for a decompressed file with the same amount of detail as the original.
For a while, PNG images weren’t among the best web graphics because they didn’t work with most web browsers. In recent years, however, scripts have been updated and mainstream browsers can now read PNG image files.
Benefits of Using PNGs
Lossless Compression
This may be the biggest draw to the PNG file. It can be compressed and decompressed without losing data. Therefore, edited versions will maintain the same quality as the original image.
Color Options
Like JPEGs, PNGs support millions of colors. This creates crisp, clean lines and allows for realistic imagery.
Transparency
In an improvement over the either 100% opaque or 100% transparent pixels available in GIF files, the PNG format uses alpha blending, which allows for various levels of transparency in different pixels. The result is the retention of the crisp, clean lines and a transparent background.
Drawbacks of Using PNGs
Larger File Type
The lossless compression method does come with a larger file size, which can increase load time and bog down processers.
Compatibility
There are still a few image editing programs that don’t work with PNG files, or if they do, aren’t terribly efficient.
Ideal Use
When it comes to web design, images requiring crisp lines and transparent backgrounds, such as logos, are best delivered via PNG files. This format is also ideal for website graphics with rapid transitions between colors such as screen shots or illustrations.
Imagine Your Images on a Hungry Media Site
Our experienced team of web designers and developers know exactly what it takes to make a website successful. Whether you’re building a site from scratch, updating your image (or image files), or want to build the next hot app, Hungry Media can help. A dedicated design team will work with you to determine the best website graphics and image types to use in any scenario. Give us a call or contact us here to get started. We can’t wait to hear from you.
contributed by Melissa Lucas, senior staff writer
