A picture is worth a thousand words — and, for nonprofits, it could also be worth a thousand donations. In addition to making your organization’s visual content useful, you’ll also want to ensure that it’s visually-compelling to inspire action from your audiences and contribute to an overall positive user experience. Digital images make things a bit more challenging, and there are some graphic design ins and outs to know as you put together your own images using Creative Cloud or Canva for Nonprofits. Here are 6 common questions about image optimization for nonprofits — plus our answers.
1. What’s the difference between a .JPG and a .PNG?
The tl;dr: JPEGs compromise quality for a smaller file size; PNGs compromise file size for higher quality.
Both JPEGs (or JPG) and PNGs are ways of classifying image files. The main difference between the two is how they’re stored: JPEG (or JPG) compresses your image data by sectioning your photo into small blocks of pixels (short for picture elements). This type of compression makes the file size smaller and can give you more space on your computer. But it can also lower the quality of your image depending on how much you choose to compress it. That fuzzy effect you sometimes see on images — especially those with text? That’s JPG compression in action.
On the other hand, a .PNG uses lossless compression, a method of storage that compresses the data of your image without harming the quality of your photo. Another advantage to .PNG is that you can save files with a transparent background. This is useful if you want your image to blend in with the background of a different image.
2. When should I use them?
For an infographic or image with text on them, save it as a PNG
For a photograph without text overlays, save it as a JPG
3. I’ve heard of pixels, but also kilobytes. How do I actually measure a digital image?
Yep, there are a few different ways of measuring the size of a digital image and a few different terms to know in the lexicon when it comes to image optimization. The basic formula for measuring an image is: Number of pixels by the number of bytes per pixel.
The resolution of an image is equal to the pixel-area of an image (the image width times height, measured in units called pixels). Bytes (or kilobytes) are the depth of each pixel — how complex each individual pixel is to make up the image.
4. So… what size should my images be?
Generally, between bytes and pixels, the goal is to find a happy medium. Image resolution depends on where your images will live and what they’ll be used for.
On your website, header images should be 750 pixels wide and 200 pixels tall. Background images should be 1920 pixels by 1080 pixels or smaller.
For images that will be embedded within an article as a thumbnail, a file size of 200 pixels by 200 pixels is recommended. For updated recommended image sizes for social media, check out this awesome article from Sprout Social.
5. Shouldn’t I just keep my images as large as possible?
Short answer? No. Images that are over 100 kilobytes (kb) can slow down your site speed, and have an adverse effect on the technical SEO health for your site. One of the main things that affects file size for your images is the resolution of your images.
6. How do I optimize my images?
One way to optimize your images is to make sure they are SEO friendly.
Find an image size that is, if possible, under 100 kilobytes (and at most under 300 kilobytes for larger, full-page images) without compromising the quality of your image.
From there, you should rename your photos with keywords that are to the content of the image (which, ideally, will link to the content of your page). As Google search becomes more image-driven, having images with file names and alt text that clarify to their robots what the image is about will be helpful for landing on the coveted front page of search engine results. Using titles and alt attributes will also help with accessibility for those who can’t see the images you’re creating.
7. How do I resize my images/graphics?
If you don’t have access to image editing programs like Photoshop, you can use one of the many free tools online like resizeimage.net. Be mindful of image quality when you’re resizing because the images can become pixelated or blurry if they’re not resized properly. Also make sure you’re saving images with text as PNGs to preserve that resolution.
If you want to go deeper into design, Canva has a great free course on creating graphic content, and we’ve also written a complete guide on how to use Canva for nonprofits.