In this tutorial, we’re going to explain the most common image file types, and when you should use them.

Note that this is a short, non-technical article. If you want to go much deeper on the performance side of things, read these guides on how to optimize your website's images for the web.

First, a quick explanation of how image compression works.

Lossless vs Lossy – What is the Difference Between These Two Compression Types?

Lossless compression is a class of data compression algorithms that allows the original data to be perfectly reconstructed from the compressed data.

There is only so much you can compress a file before you start throwing away some of the information that file contains.

This is where "Lossy" compression comes in. Lossy in that it loses some of the information.

Lossy compression permits reconstruction only of an approximation of the original data (though usually with greatly improved compression rates).

You will see both the terms "Lossless" and "Lossy" appear below when we describe different image file formats.

What is the JPEG Format? (.jpg and .jpeg file extension)

JPEG is the most common file type for images. It’s best used for photos and other images with lots of colors.

By the way, JPEG stands for Joint Photographic Experts Group – the team that developed the standard.

JPEG files are smaller than other file types, so they’re easy to download and share.

Can JPEGs be transparent or have a transparent background?

No. Unlike GIFs, SVGs, and PNGs, JPEGs cannot have transparent backgrounds. You would need to convert your JPEG to a different file format.

Are .jpeg and .jpg are the same?

Yes – the only difference is that, traditionally, file extensions are only 3 characters long. ".jpg" is a shortened form of ".jpeg".

What is a PNG? The PNG File Format (.png file extension)

PNG is a lossless compression format for digital images. PNG was created as an improved replacement for GIF. It has become the most widely-used lossless image compression format on the web.

PNG is a file type that’s best used for images with transparency, like logos. PNG files are usually larger than JPEGs, so they’re not ideal for large images.

PNGs can have a transparent background.

What is a GIF? The GIF Image Format (.gif file extension)

The GIF format is another type of image file that is commonly used on the web. GIF files are typically smaller than other image file types, making them ideal for use on the web.

GIFs can be used for static images. But they are more commonly associated with animations – a series of images that auto-play. For example, here's a public domain GIF.

A public domain GIF of the spinning globe

This is really just a series of a dozen or so images playing in a loop.

Note that GIFs can also have a transparent background.

How do you pronounce GIF?

The creator of the GIF format, Stephen Wilhite, said that he pronounced "jif" as in "Jif" peanut butter.

Jif peanut butter. Creative Commons photo by Brian Cantoni.

This said, almost all the developers I know pronounce it "gif", as in "gift", and I think that will continue to be the most popular way to say it.

What is a TIFF? The TIFF Image Format (.tif file format)

TIFF is a file type that it's best to use for high-quality images that need to be edited. TIFF files are large, so they’re not ideal for sharing online.

You should use a TIFF when quality is more important than file size. In practice, a PNG is almost always a better option – especially when dealing with images on the web.

What is an SVG? The SVG File Format (.svg file extension)

An SVG is a Scalable Vector Graphic. This means that the graphic can be scaled to any size without losing quality.

Unlike all the other file formats we're discussing in this article, SVG files are vector files. (JPEG, PNG, GIF, and TIFF are raster files.)

This means that SVG files can be scaled to any size without losing quality, while raster files will lose quality when they are scaled up.

You can edit SVG files using vector editing software (or just manually update the coordinates and colors of the graphics). You can only edit a PNG files using raster editing software.

Here is an example SVG file from the Mozilla Developer Network. This is what SVG looks like in its native XML code form:

<svg version="1.1"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

And this simple code renders this image:

A red square with a green dot and the letters "SVG" on it.

SVG files are usually smaller than PNG files, because they only contain the data necessary to draw the image, while PNG files contain the data for the entire image.

You can also animate SVG files using a tool called SMIL. Thus, they can serve as extremely space-efficient GIF files. And if you're really adventurous, you can program SVGs.

JPEGs VS PNGs – Which Image Format is Best for the Web?

The web may look very different in the future, as we roll out more and more fiberoptic cable, and high speed satellite internet becomes more common.

But for now, my recommendation is to use JPEGs for most of your images.

If you have a company logo or a very important photo where quality is vital, PNG is a good option.

For logos, I recommend using an SVG, as it will scale infinitely, and is very compact in size.

I hope you learned a lot about Image File Types.

And I hope you've found this helpful. If you want to learn more about programming and technology, try freeCodeCamp's core coding curriculum. It's free.

Resizing images can be tricky, because when you reduce the size of an image, you are also reducing the number of pixels. The more you reduce the number of pixels, the more you reduce the quality of the image. But there are ways to resize an image without losing quality.

How to Resize an Image with Adobe Photoshop Without Losing Quality

One way to do this is to use a program like Photoshop. With Photoshop, you can resize an image without losing quality by using the "Image Size" dialog box.

To open the "Image Size" dialog box, open an image in Photoshop, click on the "Image" menu dropdown, then click on "Image Size":

In the "Image Size" dialog box, you can change the width and height of the image. You can also change the resolution. The resolution is the number of pixels per inch. The higher the resolution, the more pixels there are in the image, and the better the quality.

First, make sure that the "Resample Image" checkbox is unchecked:

This checkbox tells Photoshop to change the number of pixels in the image. When you uncheck this box, Photoshop will not change the number of pixels, and the quality and file size of the image will not be reduced.

Next, select a unit of measurement to use to resize the image. Click on the dropdown to the right of either "Width" or "Height" to open a dropdown.

Inches is selected by default because Photoshop is used to produce a lot of print media. Note that, since the "Resample" checkbox is unchecked, you cannot select pixels from the units of measurement dropdown:

After selecting a unit of measurement, change either the width or height of the image, and the other dimension will automatically update.

Finally, click the "OK" button to resize the image:

But there are times when losing a little bit of quality is okay, like if you're resizing and image for a website. In that case, the reduced image file size is good because images will load much faster.

In this case, make sure the "Resample" checkbox is checked. Then you can select pixels as a unit of measurement and resize the image as described above.

How to Resize an Image Using Microsoft Paint Without Losing Quality

Another way to resize an image without losing quality is to use a program like Microsoft Paint. With Paint, you can resize an image without losing quality by using the "Resize and Skew" dialog box.

To open the "Resize and Skew" dialog box, open an image, and in the "Image" section of the toolbar, click the "Resize and Skew" button:

In the "Resize and Skew" dialog box, you can change the width and height of the image. You can also change the horizontal and vertical stretch. The horizontal and vertical stretch determine how much the image is stretched.

In the "Resize and Skew" dialog box, select either "Percentage" or "Pixels" as a unit of measurement, and make sure the chain icon between "Horizontal" and "Vertical" is connected. That will lock the aspect ratio of your image so it doesn't get distorted:

Microsoft Paint's "Resize and Skew" dialog box

Then change either the horizontal or vertical dimension of the image, and the other one will automatically update.

Finally, click the "OK" button to resize the image.

How to Resize an Image With GIMP Without Losing Quality

You can also try using a program like GIMP. GIMP is a free program that you can download from the internet. With GIMP, you can resize an image without losing quality by using the "Scale Image" dialog box.

To open the "Scale Image" dialog box, open an image in GIMP, click on the "Image" menu dropdown, then click on "Scale Image":

In the "Scale Image" dialog box, select a unit of measurement from the dropdown box. "px", or pixels, is selected by default.

And make sure the chain icon between "Width" and "Height" is connected. That will lock the aspect ratio of your image so it doesn't get distorted:

Then change either the horizontal or vertical dimension of the image, and the other one will automatically update.

Also, in the "Interpolation" dropdown, select either "Cubic" or "Sinc (lanczos3)".

Finally, click the "OK" button to resize the image.

How to Resize an Image in Your Browser Using a Service

If you don't have access to Photoshop, Microsoft Paint, or GIMP, you can use an online service like PicResize. Search for PicResize in your browser. Then you can upload an image and then choose the size you want. PicResize will resize the image without losing quality.

A screenshot of PicResize

There are many other programs that you can use to resize an image without losing quality. These are just a few of the most popular programs.

I hope you've found this helpful. If you want to learn more about programming and technology, try freeCodeCamp's core coding curriculum. It's free.

In this article we'll discuss what HEIC is, how it's different from the JPG format, why Apple uses it, how to convert from HEIC to JPG, and more.

What is the HEIC file format?

Well, first of all, .heic is the file extension that appears on HEIF files/images. HEIF stands for High Efficiency Image Format, and it was adopted by Apple in 2017.

As you might be able to guess from its name, photos stored in this way are "more efficient". That is, they're smaller while still maintaining their quality.

HEIF isn't actually a format, per se. Rather, it's a container in which the photo is stored that uses advanced compression techniques to squish that photo down into about half the size of a JPG.

A quick note, in case you're wondering: HEIF is the standard, and HEIC is the format name Apple gave it :) So I'll refer to it as HEIC in this article for simplicity's sake.

The differences between HEIC and JPG

There are several important differences between HEIC files and JPG files. You might be more familiar with JPG, because it's been around longer and everyone (on any device) can use and view them easily.

So let's break down the main differences between these two formats:

Operating system support for HEIC vs JPG

One of the limiting factors of HEIC is that it's only natively supported by Apple's operating system (iOS 11 and higher, and MacOS High Sierra and higher).

But don't worry – even though your iPhone takes photos in HEIC, if you have iOS 11 or MacOS Sierra and higher you can easily convert these photos to JPG (more on that below).

That way you can share them with whomever you want without worrying if your buddy will be able to open them on their Android phone, for example.

If you're a Windows or Android user, you can't simply open a HEIF should you find yourself in possession of one. You'll need to download an extension or program to help you deal with it.

Size and quality of HEIC vs JPG photos

Another main difference is the size of the photos, as mentioned above. HEIC photos are extra compressed, basically, so that they end up being about half the size of their JPG counterparts.

Also, despite that extra compression, HEIC photos still maintain their quality (and will actually be higher quality than a JPG of the same size). So you can actually get a better, higher resolution HEIF photo that's the same size as a not-so-high-quality JPG. Pretty neat.

Compatibility of HEIC vs JPG

As you now already know, you can't just casually open a HEIC file if you don't have a Mac or iPhone. That's one of it's major downsides, and the reason Apple's OS converts HEIC photos to JPG when you download them or go to share them.

JPG files, on the other hand, are compatible with all operating systems and browsers. So you can open a JPG anywhere.

Until the rest of the world adopts the HEIC format, you'll have to convert to JPG if you want an easy photo opening/viewing experience.

Format details

There are a couple other interesting differences between HEIC and JPG.

First of all, HEIC photos have 16-bit "deep color", whereas JPG only have 8-bit. So your HEIC photos can capture all those beautiful sunset nuances a lot better than JPG.

Second, HEIC files can store multiple images or bursts or live photos (in a single file), whereas JPG can only store one image per file. This gives HEIC more flexibility and allows it to store more types of photos (and more than one photo per file).

How to convert HEIC to JPG on your Mac

If your Mac is running High Sierra or later, you can convert HEIC images to JPG right in your photo Preview App.

Note: if you haven't updated your OS, you'll need to use an online converter.

But back to our process - here's how to convert those images in a few simple steps.

Step 1: Select the photo you want to convert to JPG

First you need to open Finder and get to your HEIC photos. I just searched for "heic" in the search bar, but if you have a folder where you keep them you can go there.

Next, select the photo(s) you want to convert, and right click on it (two-finger click on your laptop's trackpad). That will bring up a little menu like you see below:

Right click on the image you want to convert

Step 2: Open the photo with the Preview App

You'll select "Open with" (the second option for me) and then the default, "Preview" as you see in the image above.

Once you make those selections, it'll take you to the photo in the Preview App.

Step 3: Select and export the photo

Next, you need to choose "Edit" from Preview's menu bar, and then "Select All".

Edit, then Select All

You'll see a little moving dashed line around the outside of the photo - this tells you your "select all" action worked.

Now, go back up to Preview's menu bar and select "File" and then "Export", like this:

You'll need to export your image - which then gives you the option to change formats.

Step 4: Convert from HEIC to JPG format

Once you select "Export", you'll see the following box pop up:

Just change from HEIC to JPG and save and you're set!

You'll see that the "Format" is currently set to HEIC. Just click on HEIC and a little dropdown will show you all the other formats you can choose from (like in the image above).

Just select "JPG" instead and hit "Save". Then your photo will be converted into JPG! And you can confidently share away.

Just a quick note: you can also update where you want the photo saved. You can see in the image above that I have Desktop selected, but feel free to save to whatever location you like.

What if you want to turn HEIC off?

So what if you don't want to deal with these steps and just want your phone to take JPG photos instead of HEIC?

You can do that by following these steps:

1. Go to your iPhone's settings, and scroll down until you see "Camera" – select it
2. You'll see various settings, with "Formats" at the top – select it
3. You'll see two options, "High Efficiency" and "Most Compatible". It's likely set to "High Efficiency" by default (HEIC) so just change that to "Most Compatible" and that'll change it to JPG.

And voilà, the photos you now take will be in JPG format.

Great question Dion! I will answer it, and not just because you’re my new boss, but because it’s a good question. (but also because you’re my new boss.)

I want to set something clear here though : we’re not really comparing Apples-to-Apples, so let’s define some technologies first.

How Mario Works

So let’s talk about how the original Super Mario game worked, from an asset perspective.

The original NES console was only designed to output images that were 256 wide by 240 high; meaning that the final image that needed to be displayed to the screen was 180kb in size.

Besides that, the NES only had 2kb of RAM. A cartridge itself could could hold 8k to 1mb of game data. So, there was no way to fit the entire game’s contents into main memory. Basically, a subset of the 1MB cartridge data must be loaded into the 2kb RAM and used to render the 180kb screen. How does one achieve that?

SpriteSheets.

Sprite sheets contain small tiles of graphics, that are re-used over and over again. For example, below is a remake of the original super mario sprite sheet:

It’s not the exact original sprite sheet, but you can get a sense of the small blocks of data that can be use over-and-over again.

Each small 16x16 pixel square represents a “tile” and artists would string these together to create the actual levels. The levels themselves, just became a giant 2D array of indexes into the sprite sheet. (I talk about this in a lot more detail in Lesson 3 of my HTML5 Game Development course @ Udacity, or in my book HTML5 Game Development Insights.) Tack on some Run-Length-Encoding, or some basic LZ77, and you get a fairly compact format for levels.

Behold, that level that you parents could never complete.

So with concepts like tile-sheets and sprite-sheets, we can use a small set of images to create large scenes & worlds. This is generally how most games work. Even 3D games will have a set of common textures that are applied multiple times and places throughout the game itself.

Now let’s talk about generic image compression.

How Images are compressed

Here’s the “not fair” part of this comparison. Generic image compression algorithms have no domain knowledge about the pixels inside of them. JPG, PNG, WebP have all been designed for photos and not so much game screens. The result is that for a given 16x16 pixel block, these algorithms assume it’s unique among the image; Besides some color quantization, there’s no real logic added to determine if another 16x16 block could be an exact duplicate of the current one. This generally means there’s a lower-bound on how a given block of data is compressed.

For example, JPG breaks a given image into 8x8 pixel blocks, converts the RGB color space into the YCbCr version, and then applies Discrete cosine transform on them. It’s only after this step, does a lossless encoder come along, and see if it can match up common duplicate groups using DPCM, or RLE.

A block-view of how JPG image compression works.

So, the only place where two blocks might get compacted into 1 block, is if their post-DCTd version is identical, and RLE can make stride recommendations. This doesn’t happen that often.

Despite its other flaws, PNG is much better in this regard. PNG compression is entirely lossless, (so your image quality is high, but your compression savings are low), and based on the DEFLATE codec, which pairs LZSS along with Arithmetic Compression. The result is that long runs of similar pixels can end up being cut down to a much smaller size. This is why an image with a very uniform background will always be smaller as a PNG instead of a JPG.

The below image is a 5.9kb PNG file, while the JPG image is 106kb

Since this image has lots of duplicate pixels (the blue sky background) compressors like PNG do a better job than their block-based JPG counterparts.

Apples vs. Dragonfruit

My point here is that it’s kinda unfair to compare game content to a single image on the internet.

From the game side, you start with a small set of re-usable tiles, and index them to build up your larger image, we can do this, because we know how the game is going to be made. On the other side, JPG/PNG/WebP just tries to compress the data it can find in local blocks, without any real desire to match repeated content. Image compression is clearly at a disadvantage here, since they don’t have prior knowledge of their data space, they can’t really make any expectations about it.

I mean, consider The Demo Scene which is super big on this sort of thing. They can cram 30minutes of an entire 3d shooter into 64kb because they understand and know so much more about their data.

_A much better comparison. The .[kkrieger](https://en.wikipedia.org/wiki/.kkrieger" rel="noopener" target="blank" title=") demo fit 30 minutes of a 3D shooter gameplay, with physics, sound, textures, and AI into 64kb of data. Seems like a massive amount of gain for just 24kb more than the original Mario.

It just goes to show, with the right amount of foreknowledge about your data, you can do great things with compression.

Looking forward.

Obviously, we’ve grown up since the 256x240 displays of the NES days. The phone in my pocket has 1,920 x 1,080 display pixels @ it’s 5.2” size, giving it ~423 pixels per inch density. To compare that in the same number of pixels that’s ~33 super-mario screens, or rather, 8MB of pixel data. I don’t think anyone’s surprised that screen resolutions are increasing, but it also comes with the need for more data.

This is something I’ve been harping on for a while now. While we get bigger displays, the content channels need to up their resolution outputs in order to still look good on our higher-density setups (otherwise, we get scaling blurryness..). This of course, causes our video game packages to grow in size, our web-pages to grow in size, and even our youtube streaming videos to grow in size. Basically, we’re sending more data to smaller devices simply due to screen resolution. Which, for the next 2 billion folks in emerging markets, on 2G connections, is like the worst idea ever.

But I digress. That’s a different post.