There are more web extensions (ex: TIFF & BMP) and print extensions, but these are the most common that you should be most familiar with.

Now let’s cover the other important aspects mentioned above in a little more detail.

---

Color Space – Most people don’t know that web files and print files have different color spaces. Web files are built in an RGB (red, green, blue) color space which is much larger and vibrant than print files which are formatted in CMYK (cyan, magenta, yellow, black).

The main reason is because colors on computers, phones and screens have light behind them which elevates the colors while printed colors on mediums like business cards, flyers, t-shirts or banners are a mix of the colors listed above.

And when colors are printed on paper or fabric, they darken and spread which is why if you’ve ever seen a picture, image or design look great online but when printed it looks completely different, chances are it was created in a web color mode but printed in CMYK.

If you’re a designer, make sure your color mode is set correctly.

---

Resolution – One very important aspect to know about, not necessarily for the laymen but definitely for the designer, is resolution. This is also known as DPI (dots per inch) and in short, tells the file how many colors can be placed in a file per inch. Commonly, web files should be set and built with a DPI/resolution of 72 while print files can be built at between 150-300. That’s also why an image set at 500px wide at 72 dpi will be significantly smaller than the same image set at 500px but is 300 dpi.

Lower resolutions are great for web as they load faster and aren’t as big while bigger resolutions are great for print as they’re larger and print out much more clearly when scaled and expanded.

You’ll also see this with older vs newer computers.

You’ll want to be sure to “Optimize” high resolutions images and “Save Them for Web” before either putting them on a website or attaching them to an email. (Free optimization tools are listed in the resources below)

---

Size (Pixels & Bytes) – Finally, we’re going to look at size which is similar to resolution. Size isn’t as important for vector files because as you now know, vector files can be scaled and expanded without losing quality but it’s VERY important for web files because when a design or image is set to a certain size, if you blow it up or expand it even just a little, it will pixelate and lose quality.

For the most part, web images and designs don’t need to be much bigger than 1920px wide which is a pretty standard high def width. When building websites, we never like images to exceed that width.

Print designs and images on the other hand may sometimes get up to between 3000 or 5000 pixels. When you take pictures on your phone or with a digital camera for example, the raw or jpg files are very big. Sometimes thousands of pixels wide and high. And same with stock photography sites. Many times when you purchase a stock photo, it’ll be massive with an actual file size of several MB (mega bytes) which is the other piece to the equation with size.

Computer images and file sizes are measured in KB (kilobytes), MB (megabytes), GB (gigabytes) or TB (terabytes). There are lower and higher sizes as well but these four are the most common that you’ll see. Web files should ALWAYS be as small as possible in KB’s. With printed designs and high res images, you’ll often see those in MB’s.

So for example, if you take a picture with your digital camera and download it to put on your website, it could be 4000px wide and 6.5MB big. That is a huge file that will slow your webpage down dramatically and needs to be optimized before putting it online or sending via email.

Be sure to “Optimize” your images and “Save Them for Web” before sending, attaching or doing anything with them online. Some free online optimizing tools are listed in the resources below.

Wrapping Up

In closing, one question you might have is “why would you ever even create a bitmap file if it distorts???” Well, if you’re working on a website or with online graphics, generally your designs can be built much smaller and in the web color modes while if you’re creating, say a logo, that needs to look good on a website but also scaled big as a design on a billboard, then you’ll want to build that as a vector file. And with web files are being smaller, they don’t take up as much room on your computer.

Bitmap programs like photoshop do have additional advantages as they’re generally much more flexible and power when it comes to image editing, advanced graphics, etc, but I tend to do most all my designing in a vector program like Adobe Illustrator because those designs can be scaled and used for print if needed. One big thing to remember is that vector files can easily be saved down as web files for digital uses but bitmap files can’t be saved as vector or scaled up.

We hope this overview on file types has helped you understand the biggest difference between file types and more importantly how to use them moving forward. Below are some final takeaways and resources.

---

Takeaways

• Make sure your logo is designed as a vector file. (remember vector files can be saved as bitmap/raster file types like JPG, PNG, etc but they can’t be saved as vector)
• Any images taken from a camera or downloaded from a stock site are going to be huge and need to be optimized for web BEFORE going on a website or attached to an email.
• When attaching images or sending files, look at the file type, size and resolution to see if it needs to be optimized before sending.
• Don’t send a small jpg logo to a printer as it’s a web file that will pixelate and distort. Send the PDF, EPS or AI vector file.

Resources

• 24 Sources for Free Unique Stock Photos
• Shrinkwrap and Protect Your Images in WordPress
  
• ImageResize.org - Free Online Image Optimizing / Resizing Tool
  
• TinyPNG - Smart PNG and JPEG compression
  
  

  Like this information? Please take a moment to share it!

  Share12

  Pin229

  Tweet

  Email

  Share