GIFs do not retain their DPI properties

TechNote 147
The information on this page applies to:
  • MathType for Windows
  • MathType for Mac

When you save a MathType equation as a "high resolution" GIF image and subsequently open the image in a graphics editor such as Windows Paint, the GIF's resolution is reported as 72 pixels per inch (ppi) or 96ppi.

The GIF image format spec does not include bit density information (pixels per inch). GIFs are saved with particular image dimensions — a number of pixels of width and height. Software (MathType included) that allows a user to specify a GIF's ppi or dpi (dots per inch) artificially creates such a resolution by increasing the image's physical size, and hence the number of pixels it contains.

Compare the two equations below, both created by MathType. We created the one on the left using all the factory default settings. For the one on the right, we changed only the Web and GIF Preferences, and set the Bitmap resolution to Other: 300.

Normal-sized GIF Same expression, but larger size
image #1: 46×41 pixels image #2: 145×129 pixels

Clearly the physical size of the 2 equations is different. The one on the left has dimensions of 46×41 pixels; the one on the right is 145×129. In fact, the difference shouldn't be surprising. You're most likely reading this page on a computer with a screen bit density of either 72 ppi (default for Mac) or 96 ppi (default for Windows). Mobile devices will likely have a different bit density, but the relative size should still be obvious. The one on the right is roughly 3 times the size of the one on the left.

Here's where the potential for confusion really starts to build: if we open both of these equations in Microsoft Paint (or any other bitmap editor), they both report a bit density of 96ppi. Wait a minute — didn't we set the "bitmap resolution" to "300dpi" in MathType? Yes, we did, but here's the true meaning of that…

Since the GIF format doesn't contain — and cannot contain — information about bit density (IOW, the number of pixels or dots per inch), the only way to "create" a high-resolution GIF is to simulate that process by creating one with larger physical dimensions. So what would happen if you were to reduce the size of image #2 to be 46×41 (i.e., the same size as image #1)? Compare:

Normal-sized GIF Large GIF reduced in size by browser
  • If you're creating content for the web: You may be looking at those and thinking there's no way you'd use the one on the right. (Actually, depending on your browser, the one on the right may look pretty good. It looks pretty good on an iPad and it looks pretty good on Chrome for Windows. Read on though…) IF your target audience will likely be printing the page rather than reading it on a screen, then the one on the right will look much better than the one on the left. (Go ahead; try it. Print this page — it's page 2 of this document — and compare the two. The one on the left probably doesn't look bad, but the one on the right should look better.) In fact, it's even possible to create 2 images, include them both in the web page, and let CSS choose which one to use, depending on whether the page will be displayed or printed. The "how-to" for that is beyond the scope of this article, but if that's what you need to do, you should be able to find an article or tutorial on the web describing how to do that.
  • If you're creating content for print or presentation: The software you're using for that (like Microsoft Word and Microsoft PowerPoint) will likely convert the GIF equation into a "vector" image when you insert it, so create the high-ppi version and scale it down. It will look great in print or on the screen. Tip: To make it easier to scale the image such that it's exactly the size you need in your destination software, we recommend a setting of 384 ppi if you're using Windows, or 360 ppi if you're using Mac. The reason for that is that you can scale it in Word (or whatever you're using) to 25% of the original if you're on Windows, or 20% of the original if you're using a Mac. No guesswork, but this assumes you've changed MathType's Size/Define settings so that you're using the same font size in MathType that you're using in the other software.


""

We hope this has been helpful. As always, please let us know if you have questions about this, or if you have additional techniques that work. We'd love to hear from you.