The internet as we know it first emerged in the 1990s. But the story of web-ready images starts four years before.

In the beginning: there were GIFs

Back in the days of dial-up CompuServe was the first major online service provider offering email and other services for personal home computer users. They offered image downloads, but with most people using modems that worked at a mind-blowingly slow rate of 1,200 bits per second, there were considerable limitations in what they could offer.

Steve Wilhite, worked as a computer scientist at CompuServe. He was tasked with finding a solution that would take a large image and decrease the file size. The Graphics Interchange Format, or GIF, was the result of this work. Based on the LZW algorithm, the GIF format could take a huge image and shrink it down to a small file size. Unlike the XBM file format, another type popular at the time that was limited to black and white, it would be able to capture the 8-bit 256 range of colors that was the standard.

GIFs reign as the most widely used web image format would come crashing down in the mid-90s. Computers and the internet had advanced, and the image capabilities of the GIF format could not accommodate these leaps in technology. There was also the issue of licensing. The patent holder of the LZW algorithm decided to charge those who were using GIFs in their applications. PNGs were patent-free, which helped in their widespread adoption.

The PNG format offered enhanced colors and improved image quality 

PNG stands for Portable Networks Graphics and is a raster-based file format. Unlike the meager 8-bit limitations of the GIF file type, it offers 24-bits of spectacular color. This was a huge advancement in the mid-90s. PNGs were able to offer a universe of shades and hues, with a higher resolution through lossless data compression. Today’s portable network graphics files can also work at 48-bit, and even up to 64-bit. PNGs have held on and are still a popular format found across the web.

JPEG made it possible to make huge files much smaller

Just as PNGs are still widely used, JPEGs continue to be prevalent in web publishing. The JPEG file format (also referred to as JPG), which is short for Joint Photographic Experts Group predates PNG, was launched in 1992, but its development can be traced back to 1986.

Images contain a huge amount of data. A lot of this visual information is redundant. JPGs are compressed by averaging out color information and decreasing the amount of repeated data. This type of compression is known as lossy compression.

JPGs were also a better alternative to GIFs. They could better capture complex images like photos while bringing them down to a manageable file size with better resolution than GIFs.

Image file formats: a tale of two compressions

So what’s the difference between lossless and lossy compression? Lossless compression shrinks the size of a file down while keeping intact its original appearance. Lossy offers a higher level of file size compression but at the expense of a loss in image quality.

Lossless compression

PNG is a lossless image file type, meaning that files that undergo this form of compression are almost identical to the source images. Through filtering and encoding, they effectively reassemble image data. Though PNG files have been compressed, they are still much bigger than those that utilize lossy compression.

Lossy compression

Lossy compression crunches down files by minimizing repeating data. With redundancies knocked down, there’s far less image information resulting in much smaller file sizes. The JPEG format utilizes lossy compression.

With less data to go off of images can suffer in quality. The colors in an image may be off, the finer details may be lost, and other artifacts may present themselves. This sounds bad, but the average person scrolling through a website isn’t scrutinizing every pixel they see. JPG images give an accurate enough representation that the majority of people aren’t going to notice their subtle flaws.

JPG vs PNG: Which is better?

Both of these file types have their appropriate place in web design. Whether you choose jpeg files or the png format depends on the content of the images.

How to use JPGs 

Advantages 

JPEGs are best suited for images that would otherwise be gigantic without compression. Images that have no transparent backgrounds, a lot of different colors, and details, like photographs, work best for the JPG image file type.

Disadvantages

If you want images to have transparent backgrounds, you’re out of luck with JPGs no matter what you do to them in Photoshop. You’ll have to use a PNG, which has an entire channel dedicated to transparency. JPEGs always have a flat background color.

If there are a lot of textures and other fine details a JPG has the potential to squash these pixels together. It can be tricky working with images that have background gradients and translating them into JPGs that don’t suffer from a banding of colors after they’re compressed. For complex images, you may have to experiment with different settings in getting your images to look right.

And just like making a photocopy of a photocopy of a photocopy, the more you compress the same JPEG image the worse it’s going to look.

How to use PNGs

Advantages

As mentioned earlier, PNGs can have transparent backgrounds (see image above). This makes them highly usable in different web design contexts. They’re also a better image format in reproducing vibrant colors and making sure that lines stay sharp, making PNGs the preferred format for illustrations, typography, and company logos.

PNG is an excellent file format for wireframes where there’s a lot of text and straight lines. They also work great for screenshots. This image format retains its high quality even when compressed, and works for both complicated and simple images

Illustrations, like this one created by Dmitry Mòói, and other visuals with clean lines and rich colors display the best when saved as a PNG.

Disadvantages

Since PNGs offer the best resolution, why not use them everywhere? File size is the issue. A web design chock full of PNG files, rather than just a few, will load much slower than if you use JPEGs. A page that doesn’t load fast can hurt a website’s SEO, as well as make people bounce while waiting for the images to appear. This is especially true when image file sizes are over 300 KB.

Responsive design and image optimization

A website should offer a consistent experience no matter what screen it’s being used on. Images need to scale up or down depending on the device.

Responsive design is a set of guidelines focused on creating a uniform user experience for anyone scrolling through a website. Whatever the screen size or resolution, both JPG and PNG image file types need to be optimized. 

In the past, serving differently scaled images was done through the source code by using srcset and sizes attributes. If you knew how to code, this wasn’t too big of a deal but accounted for extra time in taking care of every instance of an image. If you weren’t that skilled in HTML, this could be a frustrating process.

If you use Webflow, you don’t have to worry about keeping track of multiple versions of the same file. Behind the scenes, Webflow will compress, scale, and optimize all of the inline images automatically — making sure they’ll display correctly on any screen size. All you need to do is upload the project images and Webflow will do the rest.

Another mistake that many new designers make is including text as a part of an image. There are some instances where you may need to do this, but this should be rare. Integrating text into images can cause all sorts of weirdness when they’re compressed or need to be scaled up or down. It’s also not a good accessibility practice. As those who use screen readers will not be able to tell what is said on the image. This is why alt text is extremely important for all images on your website, something you can easily add in Webflow.

Instead of using images with text in them, use web-generated typography instead. It’s responsive and will be legible no matter what device they’re viewed on.

Keep your original files somewhere safe

Whether you're compressing your files into JPGs or PNGs, the source data of the original images is forever changed. It's important to keep your original image files separate from the files you're preparing for a web design project. You may need these in the future, and if all you have are altered versions, it's going to cause complications.

Another common mistake for newbie web designers is to have an edited image with multiple layers and to save it in a compressed file type without keeping an uncompressed version of it. Make sure to retain your files with their accompanying layers in something like a PSD so that you can go in and make changes to these layers if need be.

PNGs and JPGs both practical image file types

How fast a website loads and how the graphics and other images look depends on using the right image file formats.

It's easy to get confused on whether to save a file as a JPG or PNG. The general rule is to use JPGs for photographs, images that don’t have a transparent background, and other memory intensive files. And to choose PNGs for graphics, files with transparent backgrounds, and other images where clarity and color vibrancy are important.

Just like anything in web design there are exceptions to these rules, but these guidelines should give you a good enough understanding to use either of these image file formats with confidence.