As stated in the previous article with regards to website graphics, the topic is a two-part series. The first one covers the precise aspect of website graphics, or plainly said vectors, while this part is all about letting your creative juices flow. As the title suggests, with this blog post I target raster graphics.
Since this is a two-part series, it only makes sense that the theme continues where we left off last time. With that said, let’s talk about what raster graphics are, how, where and why you use them.
What Are Raster Graphics
When comparing raster graphics to vector graphics, there’s a crucial difference between the two; vectors use complex math and points to create an image, while rasters use actual pixels.
That all sounds nice, but what does it mean? Well, for starters, raster graphics have certain resolution limits, after which they start to lose quality and sharpness. The reason behind it is rather simple.
Unlike vector graphics, which add or subtract points with resizing, raster graphics manipulate the size of the pixels as you scale the image. The number of pixels always stays the same with rasters; they get larger or smaller depending on what you do with the image.
On the other hand, precisely the fact that raster graphics use pixels is what allows you to explore your creativity and indulge in creating contrasts, transitions, and luscious images. There are no solid color and gradient limitations as with vectors. With raster based graphics you can do anything you want.
Why Your Website Graphics Need To Be Raster
Now that we unveiled the mystery behind the way raster graphics work let’s talk about why and when you should use them on your website.
You can’t consider raster graphics as illustrations. That’s more the name for vector graphics. In my opinion, rasters are artworks. As such, it’s kind of logical that rasters should be used as that; artwork that makes your website shine. There’s no limitation where you can and can’t use raster graphics.
Honestly, you can use raster graphics as illustrations instead of vectors, but there’s something you or your illustrator should keep an eye out for. To get the best possible results when you use rasters, it’s best to have the canvas(the work area in your software of choice) match the DPI to the size of the canvas. In turn, the size of the canvas should be the same as the end application of the image.
But, note that the DPI is counter proportional to the size. Larger images are more forgiving to losing details than smaller ones, which means that the DPI count should be higher the smaller you go.
Allow me to explain; say you want to design a logo for your website, that’ll be 100 x 200 px on-site. That implies that your canvas should be set up as 100×200 and that DPI should be no less than 300 DPI if you want to have crispy clean edges. You can probably go a bit lower than 300 DPI, but you risk losing some details. You could, however, design it on a larger canvas so that it compresses the pixels over a smaller area.
One other thing that helps with maintaining quality is saving it as a PNG, preferably the Save For Web option if you use Photoshop.
The Downsides Of Raster Graphics
Raster graphics have two major drawbacks; resolution limitations and quality loss. Unfortunately, they’re not one-size fits all like vectors are. They look best when used at their nominal resolution, or smaller, whereas they decrease in quality as the resolution goes up.
The other drawback, that’s not that important in this day and age, is that they may end up fairly big since they pack a lot of data. Raster graphics are complicated and contain a lot of information in order to give you the glorious result you want.
Giving out a verdict on rasters is a hot and cold situation, they’re both upsides and downsides, it all depends on what you want to achieve. If you want pretty images for your website, like post headers or website backgrounds and such, you should use rasters.
But, if you need precise details on miniature illustrations, it’s best to stick to vectors, as rasters are just not meant for that.