Working with Digital Files

Image File Formats for Web 

Why is file storage important?

When working in creative digital industries, it important to have an understanding of handling digital files in order to successfully store, access and share work for a particular project. 

The need to stay organised is important when working in personal capacity (for example, as a freelancer), but even more so when working in a team. Successful storage and retrieval of documents can help the smooth running of businesses and organisations. 

How file-sharing systems work

File-sharing systems such as Google Drive, DropBox and OneDrive are online systems for sharing files electronically. They are cloud-based storage solutions, which means that data stored can be accessed at any time and in any place. In order to share in this way, the recipient needs to be provided with a link to the file or folder, or to have access to a shared portion of the online storage space. 

Data on Google Drive and DropBox is stored on servers in the United States, and data in OneDrive for UK clients is stored on servers in Durham, London and Cardiff. There are also other European servers, and this may make OneDrive a more secure solution for European clients as the data has to pass through fewer points between server and user. 

With older methods of file storage, such as USB memory stick, CD or email attachments, it can be hard to know if you are looking at the most recent version of a file, especially if it has been worked on collaboratively. With cloud-based storage, different team members can update the same document. 

One disadvantage of using cloud-based storage is that it can slow down your own computer as other users in your team or organisation upload or edit large files. This is because all changes made by other users are synced to your computer. 

Best practice in file storage

A graphic representation of hierarchical file storage

Clear architecture

It is a good idea to set up folders and subfolders in a logical way, with folders that can be deleted after a certain period of time all grouped together. Folder naming needs to be clear and relevant within a hierarchical system, i.e. a parent folder with subfolders. This can make the structure clear to both you and other people you may be working with.

An example of hierarchical file storage in column view

It is also preferable to store files meant for external clients in a separate folder to internal documents so that clients don't accidentally see or open files not meant for them. 

Regular back-ups

Whether through bugs, connectivity issues or human error, data stored in the cloud can be lost or deleted. Make back-ups of important work offline or in a back-up folder on the cloud. 

Consistent naming conventions

Consistency in file names can help all stakeholders quickly locate the data that they need. 

Poor file naming can lead to problems further down the line

File Naming

File names need to be clear and relevant. Companies can benefit from having a FNC (file-naming convention) in place. This can follow any format that makes sense in that industry, for example, Project title > Author name > Version number. 'd' often indicates that the version is a draft.

It is best practice to avoid spaces and replace them with underscores as some software systems can have difficulty in recognising them in file names. Other than underscore, no other special characters are recommended for use in file names, because some characters may be read as part of the HTML coding if you are trying to insert a file into a website. 

The downside of this system is that it can make file names quite long. An alternative to using underscore is to use 'camel case' (capitals), i.e. ProjectAuthorDateV001, rather than Project_Author_Date_V00. This might avoid the need for the user to expand their window to view the full file name, and makes file names quite easy to read for human users. 

Example file formats

Here are some file formats used to support graphic and text content for the web:

Rasterized images vs. Vector images

Rasterized images are made up of pixels, whereas vector images are made of paths. This means that no matter how much you zoom in on a vector image, lines will never become pixelated. The lines, or paths, needed to create a vector image make it an easier format to for simple images (such as logos), rather than complex images (such as photos). 

Here are some common file formats:

JPeG 

Joint Photographic (Experts) Group is a file format suitable for artwork and photos. A JPG has lossy compression (i.e. it loses quality every time you open, edit and save the image). However, saving an image as a JPG keeps the file size low so is the widest used file format for the web as it is quicker to download & upload images. 

PNG

Portable Network Graphics have lossless compression, but saving an image as a PNG reduces the file size by a number of colours. PNGs are effective for logos, icons or simple images that only use a few colours. PNGs support 256 colours per channel, and they also support transparency. 

PDF

A Portable Document Format is suitable for documents made of a mixture of text and images. PDFs maintain the formatting, showing everything as you intended it to be. PDFs also embed fonts, so that the receiver doesn't have to have the font installed that you used in order to read your documents. A file can be set as 'read-only' if you don't want the receiver to edit the PDF. You can also set security, e.g. a password to open. PDFs are cross-platform and widely used. 

GIF 

Graphics Interchange Format files have lossless compression and support transparency.  Saving an image as a GIF reduces the number of colours in order to reduce file size. GIFs support animation. 

HEIF

High Efficiency Image File format could take over from JPG. This file type is starting to be used by Apple and Canon. HEIF also support animation and require much less storage space than GIF. HEIFF are also more efficient than JPG but are not yet widely used. 

JPEG and HEIF image showing smaller HEIF file size

SVG

Scalable Vector Graphic format saves the vector information in the file. Lines are transformed into mathematical points which are easily scaled up or down by the computer. This saves the editability of an image from e.g. Illustrator. Printing a huge logo for the side of a building? SVG is the file format to choose. 

A lowercase 'e' in vector and raster graphics