Images used on the web are split into two types – Vector or Raster. Both have benefits and drawbacks. Let’s look at how each type of image work and when to use them.
Difference between Vector and Raster images.
Vector uses paths, lines, and text to create an image. Vector images only make up a smaller portion of the web.
.svg (Scalable Vector Graphic)
.eps (Encapsulated PostScript)
.ai (Adobe Illustrator)
Raster images create detailed images using pixels. Most of the images you find on the web are Raster images.
.tiff (Tagged Image File Format)
.jpg (Joint Photographics Expert Group)
.png (Portable Network Graphic)
.gif (Graphics Interchange Format)
SVG (Scalable Vector Graphics) is a file type that allows graphics to be created and used on web pages.
SVG is written in XML language and it describes paths, lines, and text to create an image. This makes SVG images look great on small screens (mobile phones) or large high-resolution screens (4K, 5K, 8K monitors, televisions, etc).
As indicated in its name, SVG (Scalable Vector Graphics) is a Vector file type and it is one of many vector file types.
Here are some of the Vector file types commonly used.
.svg (Scalable Vector Graphic)
.eps (Encapsulated PostScript)
.ai (Adobe Illustrator)
While SVG is a Vector file type that uses paths and lines to create an image, Raster images create detailed images using pixels.
A pixel is the smallest unit on a screen. Raster images are created by putting together thousands of pixels to create a larger image.
The issue with raster images is that they have a fixed dimension (example: 4000px by 3000px). Which means you can make them smaller and maintain sharpness and clarity.
However, if you make the image larger, it will lose details and appear fuzzy. This is often referred to as a pixelated image.
While most of the images featured on websites are Raster images, both Vector and Raster images have their place. Let’s take a closer look at when to use Vector and Raster images.
The best use of Vector images is in the following applications.
While illustrations can be either raster or vector, it’s preferred to be in vector format for scalability.
Allows it to be viewed sharp on all screen sizes and resolutions.
Fonts must be scalable on all screen sizes and resolutions.
These are some of the common uses of Raster images.
Images that come out of your phones and cameras are all raster images.
Images used for print material such as magazines, postcards, catalogues, etc tend to be raster images.
GIF files consist of images strung together to create a short looping video.
Adobe Illustrator is the industry standard for creating and working with vector images. Unfortunately, this software has a steep price point of $19.99/month and might not be worth it for some people who work with software occasionally.
I personally use Affinity Designer 2 for creating all of the illustrations. I made a one-time payment of $56.99 and all I can say is that it’s an incredible software.
If you are looking to get started with this software, check out the Quick Start tutorial by Kezz Bracey. She does an EXCEPTIONAL job going through step-by-step key functions of the software and how to use it.
Alternatively, Vectornator is a free software which offers many premium features. It’s an intuitive vector graphic design software with all the key functionalities of premium software.
You can easily convert a Vector image into a Raster image (pixels). It’s simple as opening the SVG file using vector software and exporting it as a JPG or PNG.
However, converting a Raster image to Vector is more challenging. The process of converting Raster to Vector is called vectorization and it can take more time.
If the Raster image is fairly simple and you are looking to
Photography images cannot be converted into vector images that would be an accurate representation of the original image.
Simpler images such as 2D can be converted into vector images using tools like Photoshop.
WordPress by default doesn’t offer support for SVG images, but there are a couple of ways to use them on your site.
A plugin like SVG Support needs to be installed which allows the safe uploading of SVG files to your media library and using them like any other image.
Doodle Line Icons or more popular sites like Bootstrap Icons allow for the HTML code of the icon to be copied.
Once the code has been copied, insert a new Headline block in your post/page. This allows for HTML code to be placed and size, colour, and background can be adjusted accordingly.
Here are some other resources if you are looking to learn more about SVG.
A 40-part series on everything you would want to know about SVG including how to use SVG files to animate it.
A technical tutorial on SVGs and how they look under the surface. They will go through the source code of a few SVGs to cover the foundations.
A detailed breakdown of the difference between raster images and vector images.
