The difference between JPG + PNG — and other design questions

We’ve all heard the phrase “content is king.” When it comes to spreading awareness for your organization’s cause or even creating posts for social media, you have to make sure your content is created in a way that is both valuable and aesthetically pleasing to the user. This means making sure the visual aspects of your content, such as graphics and images, are optimized for the best user experience. There are tons of factors to consider, so we pulled together a list of the most commonly asked questions (and answers!) about images and graphics that you should keep in mind when creating graphic content.

Image & Graphic FAQ

What is the difference between .JPG & .PNG?

.JPEG (aka .JPG) is a filetype developed by the Joint Photographic Experts Group that compresses image data by reducing sections of images to blocks of pixels. It was developed for storing large photo files in small capacities, and not for photo editing. Portable Network Graphic (aka .PNG ) is a filetype that utilizes lossless compression techniques which helps preserve image quality. .PNG is a great filetype for internet graphics because it supports transparency in browsers, allowing the image to lay on top of or blend in with any background.

Make sure the visual aspects of your content, such as graphics and images, are optimized for the best user experience.Click To Tweet

When should I use them?

  • If you are creating your own graphic, like an infographic or a text post, save it as a .PNG
  • If you are using a photograph without text overlays, save it as a .JPG
  • If you are using text overlays on a photograph, save it as a .PNG

 

What size should my images be?

Image size depends on where your images will live. 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 and article or similar form of content, 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.

 

Why is the file size of an image important?

An image’s file size determines how long it will take to load on your webpage. If the file is too big it will take longer to load, making the user experience unpleasant. If your page is slow, users will likely leave before it fully loads. Load time also affects your SEO ranking: It is one of the factors search engines like Google look at to determine the order in which websites show up for any given search.

 

How do I optimize my images?

One way to optimize your images is to make sure they are SEO friendly. Yes, images factor into your SEO ranking. To ensure this, you should rename your photos with keywords related to the content of the image. This will help your ranking on search engine results pages (SERPs). Another way to optimize your images is utilize alt attributes. Alt attributes are the alternative texts that show up when a user hovers over a photo and makes them accessible to site visitors that are using screen readers. Using key terms within your alt text helps add SEO value to your site. For more image optimization tips, check out this article by Shopify.

 

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 — our favorite is resizeimage.net. Be mindful of image quality when you’re resizing, as the images can become pixelated or blurry if they’re not resized properly.

If you want to go deeper into design, Venngage also has a cool infographic on the upcoming graphic design and photo trends for next year. Canva has a great free course on creating graphic content, and we’ve also written a complete guide on how to use the tool for nonprofit marketing.

 

Have any other questions about images and graphics? Tweet us @WholeWhale.