When we start working with a client whose “identity” has already been established (logo, business cards, letterhead, etc. have been created), we often need to request copies of their logo artwork files for use on materials we are developing. We usually receive a JPG or PNG file that was saved from their website or we are asked, “can you just grab it from my website?”
Unfortunately, most files used on websites are not of good enough quality (or resolution) to be used in print materials or in online materials where the logo would appear larger than its original size. Files for the web usually raster files often saved at the size at which they will be viewed and at a resolution of 72 dpi (dots per inch). The reason for this is to speed up the image download time and make websites load faster for viewing.
For print, files need to have what’s called an “effective resolution” of 300 dpi. This means that if you have a 9” x 9” image that is 72 dpi and you reduce it to 2” x 2” you can achieve a resolution of 324 dpi (the resolution is directly proportional to the image size). Conversely, if you have a 2” x 2” image at 300 dpi and you attempt to print it at 4” x 4”, you have reduced the resolution and thus the image quality.
In this same way, if you attempt to scale up your web-specific logo to 300 dpi for print, the image software or your web browser must guess at how to fill in the additional dot information. This usually results in images that appear blurry, “pixellated” or “rasterized.”
The best type of logo file to supply to Savoir Faire for use in a variety of online and offline materials is a vector file. These files can be scaled up or down without any loss of image quality and retain their editability, making them the most versatile type of file for whatever we can dream up.
UPDATE 06.30.2021: Many designers and developers are using SVG format for logos, shapes and icons on websites. SVG files are “scaleable vector graphics” used for two-dimensional graphics and shapes. These files do not rely on pixels to make up the image and instead rely on text-based markup to describe how an image should appear. An SVG logo file saved from a website can be opened in design software such as Adobe Illustrator and Adobe InDesign (and CorelDRAW if anyone is still using it) and ultimately be used in print applications without quality issues.
For more on raster and vector files and different file types, download “Your Logo File: Which file type should you use.”