At a glance

The difference between Raster and Vector file types

When it comes to graphic design in any way, shape or form, the most important basic to learn is the difference between these two file types and knowing when to use them. Use Vector images to create clean work with perfect lines and precision, and raster images for photos, digital sketching or paintwork.


Lossy and Lossless Compression

Super important to know when it comes to maintaining the quality of an original image – make sure you understand which image file types use which type of compression and the impact that’ll have for storage, image quality and online experience.


The Basics of Resolution

Ever been unsure of what is actually meant by resolution and the role of pixels? Me too.

All you really need to know is that you measure your workspace in pixels and the size of your workspace is super important in terms of working with and exporting raster images.

Let me preface this article by saying, this is incredibly useful information to have as a foundation if you’re looking to work with visual content professionally.

HOWEVER, this is not a casual read and you WILL need caffeine to power through.

I attended a 4-hour course to learn all of the below and I found it so useful. Before hand, I never paid much attention to what file type I saved my photos or digital artwork under but now I realise exactly what an impact they can make.

You can honestly irreversibly ruin your artwork if you’re not careful.

For me the value of this information is in being able to demonstrate experties when working with clients, because if you produce content for them then they WILL expect you to know this stuff.

Being able to demonstrate specialist knowledge builds client confidence in you as a professional – something which is well worth a 15-minute read.

Let’s start off by explaining the three core digital image types: ‘Raster’, ‘Vector’ and ‘Metafile’ file formatsRasterRaster files store visual data as a series of pixel quantities and approximate locations.

No doubt that if you’ve spent time using any dedicated graphics software for anything from light photo-editing to digital painting, you’ll have worked with Raster image files.

In a raster file, the computer looks at the image and says ‘ok, that colour goes there and this colour goes here…’ many times over until each of those colour dots together form an image.

Because the information is stored like this, a raster image will look the most clear at the resolution that the image was originally created at.

What I mean by original resolution is the size of the original work space that the image was created on, which is measured in pixels.

So if the original workspace for the image was 1800 (pixels in length) x 1200 (pixels in height) when it was created; when you export/save that image as a Raster file, your computer knows exactly where every single pixel/colour lives in that exact space.

But then say after that you want to make that same image appear full sized on a workspace which is 3840 × 2160.

In this workspace you have a greater density of pixels to work with and using the raster file, your computer doesn’t have any other information to fill in those extra pixel spaces.

This means that the image looks a lot more washed out just because there are gaps or blank spaces in between each of the coloured pixels that are displaying colours.

This is something we’ve all seen before, but the same effect is demonstrated in the below image to make sure we’re still all on the same page.

raster-image-high-low-resolutions

Examples of images file types which store data as Raster information are things like;

    JPEG,
    PNG, and
    GIF.

The kinds of programs you’ll be familiar with which work with Raster data are things like Paint, Photoshop and Lightroom among many, many others.Vector headerVector images are visual data files which are saved as a series of ‘intelligent’ instructions.

By instructions I mean like the lines and shapes in your image are stored by your computer as mathematically graphed equations.

For example, a circle drawn in a vector file is not thought of as a circle by your computer, but rather it’s 2πr2 saved on a set of definite co-ordinates on a x-axis and y-axis in the workspace.

You can actually see this if you open a vector file in a text program like Notepad rather than an image program. Doing so would open the file, but instead of showing a picture, you’d see a list of instructions.

This is all probably going to sound incredibly confusing if you’ve never actually worked with a vector drawing tool before (or even if you have – I had to re-read my notes like 4 times to make sure I was clear enough to be able to write this section) but don’t worry, you don’t need to understand exactly what’s going on in the background for this to be useful for you.

All this means is that because Vector images are stored as a set of instructions and not pixel information, you can make a vector image extremely large or small with no loss of quality or sharpness.

This is because no matter what the resolution or pixel density,  your computer knows exactly where it needs to fill in pixel spaces because it has a set of instructions to follow. Pretty swish.

Examples of software which use Vector imaging include Adobe Illustrator, Coral DRAW and Inkscape. Common Vector image file types are AI, CDR and EPS.

Still with me?

Metafile header

Metafiles are files of data which save multiple types of data in one file i.e. both vector and raster information in a single file.

We didn’t cover this too much in the course but some quick research suggests that this file format isn’t particularly stable and can be prone to errors.

Converting Image File Types


So those are the three main types of image files.

Another important thing to know is that data stored under one of these file formats can be transformed into another file type.

So if you get a vector file but want to save it as a raster because you want to edit that image using a certain type of software, or upload it to a website, you can do.

The only thing you have to remember is that the data you’ve changed will start functioning under the rules of the new file type.

So for example, if you convert a vector file to a raster image then you’ll no longer be able to make that image bigger without loss of image quality.

Converting images from Vector to Raster files is much easier to do with minimal loss of information, whereas converting Raster to Vector files can be slightly more difficult.

Doing so incorporates a process known as ‘Image Tracing’, I would be lying if I said I could explain this properly and in all honesty would just be paraphrasing the Wiki article on it.

Instead of doing that, I’ll just link the article here if you want to learn more about how it’s done.

Now that’s a good foundation of information to build on, but the bit that’s probably useful for you to know is the different sub-file types and how using these can impact your work.

File Compression Types


When you are working from your core image and you save to another format, there are two types of compression to bear in mind when deciding what format to save your image as;lossy and lossless.jpeg

Lossy | This format compresses a file size through dumping information which it considers unnecessary.

An example of this type of file is a JPEG – each time you save something as a JPEG, you lose more and more information. You can pretty much make an image unrecognisable by doing this repeatedly.

Lossless | This format compresses a file size without losing information (i.e. quality isn’t compromised).

An example of this type of file is ZIP.

If you ever aren’t sure, or just want to keep up with a best practice approach, you should always keep a high quality original source file at your disposal.

If you ever compromise the quality of your image by mistake, doing this means you have a backup.

Another rule of thumb is to work from the programs source file type until you have completed your work on your image, only after you’ve finished should you start saving your image through compressed mediums.

Different types of image files


JPEG headerA JPEG (or Joint Photographic Experts Group, if you were curious) is likely the most widely known image file type.

As previously mentioned, JPEG uses a lossy compression algorithm which means that it will remove data from a file in order to compress it to a more manageable size.

JPEG files achieve a smaller file size by compressing the image in a way that retains detail which matters most, while discarding details deemed to be less visually impactful.

Because of this, JPEGs are the most common file types for displaying visuals on the internet – since pictures can be compressed to a fraction of their original ‘full’ size with little obvious change made to the quality of the picture. Smaller image sizes displayed on a webpage mean that they load faster on a browser when a visitor heads to your website.

JPEG files are able to store and manage up to 7.2 million different colours making them extremely proficient at displaying visual information with great quality.

However, they are generally much better suited to displaying photographs rather than painted images.

The reason for this is because photographs more typically have smoother transitions between colours.

In painted, sketched or line images, there are more likely to be sharp contrasts in colour between adjacent pixels, and these stark variations would become subject to a more pronounced loss in quality after JPEG compression takes place.PNG HeaderThis is an updated image file type of the GIF and was created as a solution to the limited 256-only colour palette of the GIF file.

In the mid-90’s, monitors that were able to display many, many more different colours simultaneously become much more common and so a new file-type solution was required.

The most notable difference between PNG and GIF files is the inclusion of Truecolour colour palettes which make PNG files much more suitable for displaying more complex visual information.

Another significant difference is that rather than being a lossy file type, PNG is a lossless file which means that no data is lost when you save an image as a PNG file.

Comparing PNG with JEPG


JPEG format can produce a smaller file than PNG for photographic (and photo-like) images, since JPEG uses a lossy encoding method specifically designed for photographic image data (which is typically characterised by soft, low-contrast transitions).

Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize with negligible gains in quality.

In comparison, when storing images that contain text, line art, or graphics – images with sharp transitions and large areas of solid color – the PNG format can compress image data more than a JPEG can.

Additionally, PNG is lossless, while JPEG produces noticeable losses in clarity around high-contrast areas.

So where an image contains both sharp transitions and photographic parts, it can be a little tricky to decide which file type to go for.

If you’re struggling to choose, best practice would be to try saving your image to both and take a look at;

  • Image quality around areas where colour changes sharply,
  • The size of the resulting file.

Another factor to consider in this scenario should be JPEG’s lossy compression which also suffers from generation loss.

This is where repeatedly decoding and re-encoding an image to save it again means that information is lost each time, which means that the image loses quality.

Generational loss doesn’t happen with repeated viewing, copying of an image or anything like that, it’s only where the file is edited and saved over again (and again).

PNG has the benefit of being lossless, making it more suitable for saving images which might need further editing later on without compromising the quality of the image.

There is also the option that an image can be stored losslessly and converted to JPEG format later if only for distribution, so that there is no generation loss.GIF HeaderNot typically as popular today in the same way as in the past for displaying still images because of the limited colour palette of the file type – 256 colours in a single image only compared with 7.2 million colours in a JPEG file.

The reason for this is that when GIFs were first created in the 80’s, it didn’t seem relevant to include more colours since monitors which could display more than that many colours at the same time were not affordable for most people.

Image types which are better suited for GIF formatting are those with big blocks of same-type colours i.e. things like diagrams, icons on websites like share buttons or simple logos but not photographs or any other colour-heavy images.

Images which contain fuller colour palettes (i.e. more than 256 unique colours), when saved as GIF files, result in blotchier images. The reason for this is because GIF files have to compensate additional colours by adjusting them to a closest approximate colour within an image to be compatible.

The way compression works functionally with GIF files is that the lower the number of different colours used, the smaller the size of the file after compression.

The benefit of this is that simple images like a Facebook share button with like 3 colours on it can be tiny and downloaded RAPIDLY by a browser.

GIF files also utilise interlacing techniques when uploaded on to a website. What this means is that images load progressively on a webpage rather than all at once.

So basically, on a slow loading website, an image will start out as blurry and then grows sharper as more data loads rather than not appearing at all until the image is fully loaded.

The reason for this is that this was a more popular file type to upload on earlier iterations of the internet and this feature was more useful on slower browsers – but as browsers have grown more proficient and advanced, they are able to cope with larger and more complicated image sizes.TIFF HeaderListen, I’m not going to lie to you and tell you I fully understand this one and honestly if anyone reads this article and fancies commenting to let me know what the deal is with TIFF files in plainer English than I’ve found online then please PLEASE do.

From what I understand, this file type has a size restriction of 4GB. It supports true colour images (i.e. it can handle information on 56M different types of images) making it brilliant for colour-rich images and is typically much, much bigger than standard JPEG images due to the amount of information which can be stored inside it.

This also means that it can contain extremely high quality images which, combined with it being lossless makes it the ideal home for ongoing design projects where you’ll need to keep editing and saving your work.

Things to bear in mind though;

  • These files can get to be 100MB+ in size fairly easily so you might need to consider storage if you have multiple images you’re working on at a time.
  • Because these are so big, you’ll need to consider how you’ll share these images if that’s your intention. Because of the size, you can’t just chuck a TIFF file on an email because it might be too big, likewise, images that get to that size can’t readily be uploaded onto a website since that would cause the page to load incredibly, in-cred-ib-ly sl-ow-ly.

As with the PNG file though, you can always have your original image saved as a TIFF file before saving a copy as a JPEG or PNG to distribute out further – options!SVG Header.jpegCredit to www.lifewire.com for their brilliant article on all of this.

A file with the SVG file extension is a Scalable Vector Graphics file and being such, an SVG file can be scaled to different sizes without losing quality. A lot of website graphics are built in the SVG format, so they can be resized to fit different designs later on, making them more sustainable.

SVG extensions also use lossless compression meaning that information isn’t lost when you save an image as an SVG. If an SVG file is compressed with GZIP compression, the new file will end with an .SVGZ file extension and can be anywhere between 50% and 80% smaller in size.

How to Open an SVG File


The easiest and quickest way to open an SVG file to view it (not to edit it) with a modern web browser like Chrome, Firefox, Edge, or Internet Explorer – nearly all of them should provide some sort of rendering support for the SVG format.

This means you can open online SVG files without having to download them first.

If you do already have an SVG file on your computer, the web browser can also be used as an offline SVG viewer. Open those SVG files through the web browser’s Open option (the Ctrl+O keyboard shortcut).

SVG files can be created through Adobe Illustrator, so you can of course use that program to open the file. Other premium design software which can support SVG files are Adobe Photoshop, Photoshop Elements, InDesign, Adobe Animate, Microsoft Visio, CorelDRAW, Corel PaintShop Pro, and CADSoftTools ABViewer.

If you are looking for free software which can be used with SVG file extentions, check out Inkscape and GIMP, but you must download them in order to open the SVG file. Picozu is also free and supports the SVG format too, but you can open the file online without downloading anything.

How to Convert an SVG File


If you want to convert an SVG file into a Raster image, deciding how to go about should depend on the size of the original file.

If your SVG file is pretty small, you can convert it to a Raster file type quite easily online using websites like Zamzar (looks a bit spammy but works brilliantly). They can convert .SVG files to PNG, PDF, TIFF, GIF, JPEG and more so it’s brilliant – even better it works without you having to download any apps to your PC, it can either email converted images to your inbox or let you download them straight from the webpage.

On the other hand, if you have a larger SVG file or if you’d rather not use third party websites, most dedicated design software will let you save and convert the file straight on the interface.


So there you have it! Some fun reading for budding young graphic designers – I’ve only covered the basics and there are many, many more file types to look at if you’re hungry for more.

Although honestly, I would just be impressed if someone made it to the end of this article and is actually reading this section….h-hello..? …anyone still there..?


If you enjoyed this article, then why not sign up to get my latest posts delivered straight to your inbox? Just type your email into the box at the bottom of the page .

I post content new issues once every sometimes, so adding your email means that you’re being both super supportive (yay!) and avoiding the need to check the website for new content.

Fin.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.