Preview lessons, content and tests

Computer Science & Programming solved. All in one platform.

1. To trial the platform and take tests, please take a few seconds to SIGN UP and SET UP FREE.

2. Searching for something specific? See our text overview of all tests. Scroll right for levels, and lists.

3. Student and Teacher User Guides |  Schemes of Work |   Real Teacher use Videos |


Join 36000+ teachers and students using TTIO.

File Formats and Properties

So you're really getting into this graphic design stuff and realise you need to know a thing or two about file formats. For instnace, when you should use a JPG instead of a PNG? Or maybe you're just trying to figure out which program opens an INDD! There are a wide variety of image formats and it would be useful for you to go through the list and research additonal ones so you are aware of their unique properties and suggested use.

Research and discuss: 

Which file format (from the ones below) would you use for the creation of transparent logos for a website?

BMP files • JPG files – for photos • PNG files – for transparency • GIF files – for animations • TIFF files – for commercial printing • PDF files

Vector

  • Includes AI, CDR, CMX (Corel Metafile Exchange Image), SVG, CGM (Computer Graphics Metafile), DXF, and WMF (Windows Metafile).

Bitmap

  • Includes GIF, JPG, PNG, TIFF, and PSD

Suggested Video

1. JPEG (or JPG) - Joint Photographic Experts Group

JPEGs might be the most common file type you run across on the web, and more than likely the kind of image that is in your company's MS Word version of its letterhead. JPEGs are known for their "lossy" compression, meaning that the quality of the image decreases as the file size decreases.

JPEG image file icon

You can use JPEGs for projects on the web, in Microsoft Office documents, or for projects that require printing at a high resolution. Paying attention to the resolution and file size with JPEGs is essential in order to produce a nice-looking project. JPG vs JPEG: There is no difference between the .jpg and .jpeg filename extensions. Regardless of how you name your file, it is still the same format and will behave the same way. The only reason that the two extensions exist for the same format is because .jpeg was shortened to .jpg to accommodate the three-character limit in early versions of Windows. While there is no such requirement today, .jpg remains the standard and default on many image software programs.

2. PNG - Portable Network Graphics

PNGs are amazing for interactive documents such as web pages but are not suitable for print. While PNGs are "lossless," meaning you can edit them and not lose quality, they are still low resolution.

PNG image file icon

The reason PNGs are used in most web projects is that you can save your image with more colors on a transparent background. This makes for a much sharper, web-quality image.

3. GIF - Graphics Interchange Format

GIFs are most common in their animated form, which are all the rage on Tumblr pages and in banner ads. It seems like every day we see pop culture GIF references from Giphy in the comments of social media posts. In their more basic form, GIFs are formed from up to 256 colors in the RGB colorspace. Due to the limited number of colors, the file size is drastically reduced.

GIF image file icon

This is a common file type for web projects where an image needs to load very quickly, as opposed to one that needs to retain a higher level of quality.  

4. TIFF - Tagged Image File

A TIF is a large raster file that doesn't lose quality. This file type is known for using "lossless compression," meaning the original image data is maintained regardless of how often you might copy, re-save, or compress the original file.

TIFF image file icon

Despite TIFF images' ability to recover their quality after manipulation, you should avoid using this file type on the web. Since it can take forever to load, it'll severely impact website performance. TIFF files are also commonly used when saving photographs for print.

5. PSD - Photoshop Document

PSDs are files that are created and saved in Adobe Photoshop, the most popular graphics editing software ever. This type of file contains "layers" that make modifying the image much easier to handle. This is also the program that generates the raster file types mentioned above.

PSD image file icon with Adobe Photoshop logo

The largest disadvantage to PSDs is that Photoshop works with raster images as opposed to vector images.

6. PDF - Portable Document Format

PDFs were invented by Adobe with the goal of capturing and reviewing rich information from any application, on any computer, with anyone, anywhere. I'd say they've been pretty successful so far.

PDF image file icon with Adobe Reader logo

If a designer saves your vector logo in PDF format, you can view it without any design editing software (as long as you have downloaded the free Acrobat Reader software), and they have the ability to use this file to make further manipulations. This is by far the best universal tool for sharing graphics.

Additional Reading

Comprehensive Resource - National Archives

www.teachyourselfpython.com