If you’re a blogger, you’ve probably seen terms like JPG, GIF, PSD, and a bunch of other letters that make your eyes swim.
They’re image file types, and you use them every time you put a graphic on your blog or social media. But what’s the difference? Do you know when to use a JPG or a PNG? If someone asks for your logo in vector format, any idea what they really want?
This is everything a blogger needs to know about file types.
Today we’re covering the most common file types, and you’ll learn exactly WHAT they are, and WHEN you need them. This is your simple guide to file types.
Plus, I’ve got a sweet infographic at the end – I’m all about the handy cheat sheets.
A Blogger’s Guide to File Types
You’ve just written a killer blog post and made a fabulous graphic to go with it. All that stands between you and the “PUBLISH” button is saving your graphic for the web. So…PNG? JPG? GIF?
When you choose a file type, there are a few things to consider:
How big is too big? If you’re putting a graphic on your blog, you want it to keep it on the smaller side – say, 100-300 KB. The smaller the better. Why? Because the bigger a file, the longer it will take to load. If you have a post with graphics that load s-l-o-w-l-y, your reader will leave – quickly.
If you’re putting a graphic on social media, like Instagram or Facebook, the size can be a bit larger.
Graphics you upload to the web are a different quality than graphics you print. You may have seen the term “dpi” or “ppi”. It means “dots per inch” or “pixels per inch”, and it measures quality. A graphic for the web can be as low as 72 dpi. A graphic intended to be printed needs to be much higher, at 300 dpi.
This is actually good for bloggers, because a 72 dpi graphic for your blog has a much smaller file size, and will load faster!
Is this a graphic for your blog, or a logo for a business card? Those are two very different purposes, and they need different file types. For each file type below, I’ll give clear examples of when to use each file type.
10 Common File Types
A JPG (or JPEG) is the most common file type. It’s great for photos, which are made up of hundreds of different colors. A JPG can store all those colors, and still keep the file size pretty small. A JPG will compress your image to be a smaller file size. This does sacrifice a bit of quality, but usually not enough to notice.
JPGs are raster graphics. They’re made up of thousands of tiny dots, or pixels. If you zoom in very closely to a photo, you can actually see the tiny blocks of color that make up the image. Add all those blocks together, and you have the complex, rich colors of a beautiful photograph. We’ll talk about vector graphics (the opposite of raster) in a bit.
The downside to raster images like a JPG is that you can’t enlarge them too much. The image will become blurry, or pixelated.
When to use JPG:
- Photographs (like your bio photo)
- Graphics for your blog (if a PNG is too big)
PNG is a file type designed specifically for the web. It doesn’t handle photographs as well as a JPG, but it’s perfect for text graphics, charts, or logos – anytime you want crisp, clear text and lines. A PNG is often bigger than a JPG, so be sure to check the size.
Ever need a transparent background? You need a PNG. You can save a logo with a transparent background, and then use it in another graphic. This is also handy if you make a downloadable lead magnet for a blog post, and you want to show it off in a graphic for Pinterest. Make a graphic of your lead magnet, and save it as a PNG with transparency. Perfect!
PNG graphics are raster images, which means you’ll lose quality if you enlarge it too much.
When to use PNG:
- Logos, charts, graphics with lots of text
- Any image with a transparent background
- Blogs, if the file size is 100-300 KB
- Social Media, where file size is not as much of an issue
JPG v. PNG for blog post graphics:
When I make a blog post graphic that combines a photo and text, I’ll save it as a PNG if the size is right. If the size will be too big for my blog, I’ll save it as a JPG.
An EPS is a vector graphic used by designers for logos and similar projects.
A vector graphic is different than a raster graphic. A raster is made up of thousands of tiny blocks, or pixels. A vector is made up of a few dots called anchor points. You can enlarge a vector as much as you want and it will never lose quality. That’s because each anchor point contains all the information necessary to redraw the image mathematically anytime you change the size. Best part? You don’t need to know any math to use it. You do need a program like Adobe Illustrator to create vector graphics, but you can use existing vectors in programs like Photoshop and InDesign. When a designer creates a vector, they typically save it as a PNG or JPG (in other words, as a raster) before they can use it on the web.
As a blogger, it’s likely you won’t work much with vector graphics like an EPS. However, it’s still useful to know about them. When you purchase a logo, be sure your designer provides you with several logo file types, including a PNG and an EPS. You’ll use the PNG in the graphics you create, and any designer you work with (to create business cards, etc.) will need the EPS.
When to use EPS:
- You probably won’t, but if you give your logo to a designer to work with, she’ll need an EPS
The best way to share documents with others. You can save a project made in any program (Word, InDesign, Photoshop, etc.) as a PDF, and anyone can open it, even if they don’t have the original program. It’s a great way to share a document for someone to download, but not edit.
When to use PDF:
- Ebooks, workbooks, printables – great option for lead magnets and content upgrades
- To share progress on a project with a client or team member
ADOBE CREATIVE CLOUD FILES
- PSD – a file created in Adobe Photoshop. Typically used for raster graphics. All of the layers are editable and can be rearranged. PSD files are usually exported as a JPG or PNG.
- INDD – a file created in Adobe InDesign. Typically used for documents intended for print, like workbooks, ebooks, and other printables. INDD files are usually exported as PDF files.
- AI – a file created in Adobe Illustrator. Typically used for vector graphics, like logos. AI files are usually exported as EPS or PDF files.
These are file types you might rarely use, but they’re worth a shout-out:
- GIF – All of the little animated memes of cats and TV shows that we love to use as reactions on social media? Those are GIFs. They have a super small file size, and super low quality. You don’t typically need them on your blog (unless you’re doing a pop culture roundup), but by all means, enjoy them on social media!
- SVG – A vector file. Often used for cutting machines, like a Cricut or Silhouette.
- TIFF – An advanced file type for photos intended to be printed – not for the web! Beautiful quality, but a really large file size.
YES – it’s important to know your file types, but it doesn’t have to be complicated! To make it even easier, pin this infographic so you’ll always have it handy. You’ve got this!
RELATED POST: Make Your Own: Simple Logo Inspiration