Images that contain type make frequent appearances on websites and blogs, ebooks, smart phones, emails, and other digital media. Whether you are a print designer, a business owner with a website, a corporate marketing person, or just someone who has a blog, knowing how to create and supply images for uploading is critical. Even web masters, programmers, and creative directors (who rarely get that involved in a website’s production) need to stay current on what kind of image to upload to appear sharp and crisp on today’s array of devices, specifically retina displays and other hi-res technology. I have seen too many web sites and other digital media with inappropriate low-res images, which are poor quality, hard to read, as well as amateurish.
Prior to the availability of high-res monitors, smartphones, e-readers, and the like, the standard “deliverable” for digital images, has been a GIF, JPG, or PNG at 72 ppi (pixels per inch) resolution at the exact, required dimensions in pixels. In spite of this, and even before today’s higher-res devices, it is easy to find websites and other digital media with fuzzy, hard-to-read logos and other images with type. Some have clearly been enlarged from a smaller image supplied by a client.
With the development of so many hi-res devices and monitors, there is an opportunity for viewers to see crisper, sharper images, which is especially beneficial for those containing type – especially small type.
But you also don’t want to repeatedly use images that are too large because they will cause your web pages to load slowly, frustrating your viewers (or causing them to leave). Web pages that load slower are also penalized by appearing lower in Google search rankings. So you have to try to strike a balance between the quality that your audience expects, and the time it takes to deliver that quality over the internet.
Which format to use?
Each file format has different characteristics and rendering capabilities, but many of their differences are subtle in certain kinds of images. Even so, it is a good idea to know the differences when making images for digital media. Although the focus of this article is on images with type, text can appear with photos, illustrations, or any other kind of graphic, so the format needs to work with everything.
GIF (Graphics Interchange Format): Maximum 256 predetermined colors, good for flat images with solid colors, and when you want to keep the file size small. Largely replaced by PNG.
JPG, or JPEG (Joint Photographic Experts Group): Millions of colors, good for images with photographs and gradients.
PNG-8 (Portable Network Graphics): Maximum 256 colors, similar to GIFs.
PNG-24: Unlimited colors, also reproduces transparency. PNGs are beginning to replace GIFs and JPGs.
SVG (Scalable Vector Graphics): Vector format, not bitmap as all of the above. This advanced format requires more backend work to use as it needs to be coded and embedded into the HTML. Stay away from this unless you are working with an experienced web programmer. More info on SVG images can be found here.
Some clients or environments require a specific format and maximum size. If this is the case, go ahead and create what is asked for. But if it is up to you, play around and use whichever gives you the best results.
Here is a sampling of how different formats and sizes can affect the quality of an image, including the sharpness of the edges and the smoothness of the color blends. All images were created at 72 resolution, or ppi (pixels per inch).
How to convert images
If your primary concern is quality and not search engine rankings (or bandwidth cost) I suggest making the image at least 2x the final desired size in pixels (if possible based on the size of the original). This will allow those with hi-res displays to see the image much sharper, which is particularly important for type. For instance, I received an email for the CA Typography Competition with a graphic that is 1200 pixels wide.
Here’s another example.
Dos and Don’ts
- Try to strike a balance between the quality your audience expects, and the costs of larger file sizes in terms of bandwidth and search engine rankings.
- Never make an image smaller than the largest size you might need. In other words, always prepare for the largest possible size and highest resolution.
- Never enlarge an existing web image.
- If an image with small, detailed type will be clickable, go even larger.
- Never use a low-res image for print. (I have seen dozens of print ads using the low-res images from their web site and such.)
Keep in mind that many designers, web programmers, and anyone who has a blog or manages their own site might not be aware that they should be making or supplying all images to accommodate hi-res devices. For the best final outcome, it makes sense for all people involved in the process be aware of this, and as such, be informed of the guidelines above.Tags