Comprehensive Guide to File Formats

Understanding File Formats: What's The Difference between JPG, PNG, and GIF
When you are creating graphics for your brand, it’s vital that you are exporting them correctly for your website. Image graphics not only help create your brand identity, but they can help or hinder your SEO and site experience if you don’t export them correctly.

File formats have two types – raster and vector. Almost all of the graphics you create for your blog will be raster; vectors suit logos and graphics with lines and shapes.

What are Raster Files?

Raster File Formats easily lose quality, so you typically find these files in their final versions. Popular memes tend to look pixelated over time due to the quality lost during each compression.

  • Joint Photographic Experts Group (JPG) is often referred to as the default “file type”. It’s best used for high-quality photography (low file size) and low-resolution images. It’s best to use this file format for your blog photographs. It doesn’t support transparency, i.e. no transparent backgrounds.
  • Portable Network Graphics (PNG) best used for high-quality text and graphics. PNGs have a high image size, so they will take longer to load on your website. PNGs can have transparent backgrounds.
  • Graphics Interchange Format (GIF) used solely online (doesn’t translate to print). GIFs can be animated, but can only support 256 colors (lower file size and quality).
  • Tagged Image File Format (TIFF) are print-ready file formats. They are way too big to be used on the web, but the quality is not lost when saved or compressed.
  • Adobe Photoshop (PSD) is the file generated from Photoshop. It’s used for creating graphics and editing photos. You would never upload a .psd photo to the web. I use Photoshop files as my blog post templates.

What are Vector Files?

Vector File Formats are typically working files (in-process). They are great for shapes (paths, strokes, lines). You would use these types of files for logos, business cards, and documents, i.e., not photographs.

  • Encapsulated PostScript File (EPS) use for files that need to be resized, i.e. logos. EPS files can be scaled to any size without losing quality and support transparency. They work best for large format printing.
  • Portable Document Format (PDF) used for sharing documents without losing the design quality. They are generally used for sharing and can be compressed if necessary. If you are making a content upgrade or e-book, you can do these in Adobe In-Design, Microsoft Word, or Apple Pages, and export the file as a PDF. PDFs work best as downloadable files.
  • Adobe Illustrator (AI) is the file generated from Illustrator. AI files are completely scalable and cannot be embedded online. They are ideal for printing. I use AI to create logos as well as business cards, notecards, and patterns.

File Format FAQS

What should I use for my blog post templates? If your blog post templates are largely photographic in nature, use JPGs. JPGs are great for the web because the file sizes are optimal. The larger the file size, the longer your page will take to load.

I create a text image to include above my shop widget, is this okay? No. Images don’t translate well for SEO purposes plus it is pointless with the functionality of your site. Instead, use heading tags (<h1>, <h2>, <h3>) to format those callouts on your blog.

When I export my image, it is looking pixelated. How do I save images correctly for the web? When you are editing your images in Lightroom or Photoshop, you want to make sure that you export them for your website (Photoshop Tutorial here). There are three rules for exporting your images that you want to follow:

  • Width: Your images should be double the width you need them in your design. If your blog content column is 700 pixels wide, then export your images to be 1400 pixels wide.
  • Quality: Set the JPG Quality to 70-80%. This quality ensures speed for web without pixelation.
  • Naming:  Assign the file name that relates to your post keyword. For example, “spring-midi-skirt-1.jpg” is better than “DSC-1011.jpg” for SEO purposes.

Consistent Brand Identity with Blog Post Templates

Save time creating blog post and social media graphics by using Photoshop templates! Templates are a huge timesaver for me. I place in a brand image and customize the text for the post! Presto! It’s ready to go! You can read about how blog post templates helped me grow my brand on Pinterest!

Shop Blog Post Templates and Social Media Graphics

Reader Favorites: Optimizing Blog Images to Improve SEO and Why You Should Set Image Standards for Your Brand

  • Meet Lindsay Humes

    Hi! I’m the designer and owner behind White Oak Creative. I partner with creative entrepreneurs, lifestyle publishers and content creators to design the best brand identity to grow their audience and brand. My blog is full of resources on Branding, WordPress, SEO, and more!

    Subscribe to the Design to Grow Newsletter

    9 thoughts on “Comprehensive Guide to File Formats

    1. Michaela

      Hi, good guide! Many thanks for the information. I just have a question. Maybe it is a stupid question, but could you tell me why should be the width of images the double of the blog content column size? Is there any reason for that? Thanks in advance for your advice!

      1. Lindsay Humes Post author

        Great question, Michaela! You want the images to be double the width for retina displays. Otherwise, on monitors with retina display, your images will look blurry.

        1. Michaela

          Thank you Lindsay, good to know! I must have missed that before, there is still so much to learn! I always made them as wide as my content column in order not to slow down the website. Will need to change that. Thanks for this information! 🙂

      1. Lindsay Humes Post author

        Using PNGs for social media makes sense, because you aren’t hosting the images, the social media platforms are. So you don’t have to worry about load times and server issues. With your own website, you should be mindful of site speed, so you want to use JPGS. If you save them properly for web, they will look crisp and clear.


    Leave a Reply

    Your email address will not be published. Required fields are marked *