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.
You Might Also Like: What DSLR Camera and Lens Is Right For Your Brand? + Blogger’s Guide to Using Lightroom
Want more Graphic Design tutorials? Check out these posts! If you have any questions, leave a comment below.
Interested in working together? I’d love to hear about your project!