I would like to share some discoveries I’ve made these last days about image resizing thanks to some of the WordPress.com users questions. A picture is worth a thousand words:

Two kind of pictures to resize. Vector and Raster pics.

There are 2 kind of pictures (For a longer, explanation you could go here or here ):

• Vector Images. A vector image is made up of paths/shapes, each with a mathematical formula (vector). This formula contains the list of shapes and the border/filled color. Vector images are scalable. This means you can resize them without quality loss, just by re-applying these formulae over a different canvas/size.
• Rasterized images: Raster images contain an array of pixels. Pixel-based images represent and edit photographs and photo-like images better than vector programs because they can use an abundant number of different color pixels and they have not so ‘sharpen’ borders. BUT Rasterized formats are inherently NON-scalable. You lose quality when you resize them, no matter if you make it bigger or you downsize it. You can find a good example here, where you can see that downsizing a pic and then making it big back you’ll have a different picture from the original one.

Side Note: Rasterized image formats are typically compressed (except BMP). That means there are not only pixel-color pairs but there is missing information that is figured out. That’s why we need to guess missing points by interpolating, this to recompose the picture from incomplete information. And that increases the quality loss in image resizing.

Use case. Blurred logos in the company website

There is always a quality loose when resizing rasterized pictures. And if you are using a very ‘clear design’ with sharp borders picture, like a logo, the quality loose will be even more visible. You can also get especially bad results when scaling images with text on it (The text is clearly blurred). Ys, again, like logos. E.g. You designed a logo in Adobe Illustrator (vector), then exported it to a rasterized media type and tried to resize it using any website media editor so that you use it on your website. Expect bad results.

Alternative: well… export the picture with the exact size you’ll use. It makes sense, right? The issue is that this is not so easy with webpage responsive designs: image resizing could be automatically made to adapt the site to the browser. If you’d like to be sure, you’d need several fixed sizes depending on the screen width. And a bit of css coding to change the picture you use depending on the screen width (Ex).

I got it. How could I know if a pic is rasterized of vector?

Ok, great. How can I know if a pic is a vector or not? There is an equivalent, easier to answer question:

What are Vector and rasterized filetypes?

VECTOR: .ai, .eps, .pdf, .svg
RASTER: .jpg, .gif, .png, .tif