Raster and vectors are popular terms in graphic and web designing.
But what are these?
Raster images are made up of multiple pixels, whereas vector images are paths made using mathematical calculations.
Raster graphics, also called bitmap graphics, a type of digital image that uses tiny rectangular pixels, or picture elements, arranged in a grid formation to represent an image.
Any image taken with a digital camera or scanned into a computer is constructed using pixels. They use many different shades and colors of pixels to piece together a complete complex image, and the dimensions are measured using pixels. The quality depends on the number of pixels per inch and image dimensions.
Raster images can not be scaled up without losing definition and quality.
The advantage of raster images is the complexity and level of detail. The use of pixels means there is an endless possibility of shades and colors to play with.
These are types of raster formats that are mostly used in web projects:
- PNG (Portable Network Graphics) – very popular and often used for web projects, because the image can be on a transparent background, and you can see everything behind it. It supports more colors (up to 16 million) and produces a sharp image. PNGs before compression are usually larger, but have great browser support and can be compressed without loss of quality. PNGs cannot be scaled later up without losing quality/resolution.
- JPEG or JPG (named after the team that developed it – Joint Photographic Experts Group) are commonly used for web projects such as banners, background images, etc. JPGs can be easily compressed, have broad browser support, compatible with nearly all software. Unlike PNGs JPGs have no transparency and may lose some information once they are compressed.
- GIF (Graphic Interchange Format) – frequently seen in the form of animations. Gifs are usually pretty small and quick to upload. They do have a limited color capacity of 256 but this keeps the file size lower. In addition, they have the ability to be transparent. For animation GIF images keep all the frames and timing in one file, which helps with speed.
Vector Graphics are built using mathematically defined areas to produce shapes, lines, and curves, and are suited for elements that are more geometric in nature such as shapes and text.
Vector Graphics are infinitely scalable because the original mathematical equation is used over and over again in order to create consistent shapes whether they are being scaled up or down.
These are types of vector formats that are mostly used in web projects:
- PDF (Portable Document Format) – allow you to view the format, with no specific software from any device (although you must have the free Adobe PDF reader.) PDF’s are great for print or for situations where you need a high resolution logo. PDFs retain the vector version of your file – which means they can be scaled up and down without losing quality.
- SVG (Scalable Vector Graphics) – My absolute favorite format to use when a vectors image is required. SVGs should be used for the creation and upload of logos, icons, and illustration because they will give you much more crisp files than a PNG or a JPG on a website (you may need to use a plugin that will allow you to upload this format) SVGs have significantly smaller file sizes than some of the other options making it a fast uploading choice. If you’re adding your logo to your website and have the option to use an SVG, that would always be our first choice.
There are newer image formats created specifically for web such as: WebP, HEIF, and AVIF, and we will discuss these at a later time.
There are painters who transform the sun to a yellow spot, but there are others who with the help of their art and their intelligence, transform a yellow spot into sun. ~ Pablo Picasso
The Business of Design 💼
After a couple of years as a freelance designer, you’re going to build up quite a collection of work you’ve done for clients, and ideally, for yourself as well. If you have a bunch of old designs, it seems like a waste to let them just sit on your hard drive, doing nothing.
There’s a good chance you could be making some extra money on the side from these designs. And there’s no reason why you shouldn’t. Let’s have a look at 5 tips on how you can do just that.
Tools of the Trade 🧰
UPNG – a free image optimizer built for the web and it’s specially designed to optimize PNG files.
Online Image Resizer – a free image resizer to reduce image size online without losing quality for free. It supports the following image formats: PNG, JPG, JPEG, GIF and BMP.
Sounds of Wisdom 🔊
Great podcasts to listen to:
The Design Better Podcast – some of the most interesting guest with an array of experience in the field of designing, programming, and production etc. Hosted by Aarron Walter and Eli Woolery, these podcasts deliver you deep and guide insights from industry experts.
Whiteboard.fm – a podcast series that features interviews of designers from around the globe who share their experiences about how they started their career in the field of designing. The podcast is hosted by Mayank Khandelwal and brings forward interesting people whose experiences might benefit the design community.
Bookishly Smart 📚
This a manual for anyone who strives for originality and the first-ever, all-access trip into the nerve center of Pixar Animation—into the meetings, postmortems, and “Braintrust” sessions where some of the most successful films in history are made. It is, at heart, a book about creativity, but it is also, as Pixar co-founder and president Ed Catmull writes, “an expression of the ideas that I believe make the best in us possible.”