Valuable Images: Exporting, File Formats, and Image Compressors

Welcome to our third Valuable Images post! Here, we'll discuss how to export and save your images so they may have the smallest possible file size while sacrificing as little quality as possible.

Images that hold too much data are often the cause of websites having an extremely high bounce rate (when visitors leave a web page as soon as they arrive), as images add their own data to their web page's loading process. And, with today's online competition as fierce as it is, there's no reason at all for people to stick around an extra couple of seconds waiting for a web page when they can have instant gratification in leaving and navigating somewhere else.

Luckily, there are quite a few ways to make your images hold less data, thus making your respective web pages load faster. In this post, we'll go over exporting your images, different file formats and their effects, and other tools that will make your images load as fast as they can.

REVIEW: IMAGE FILE SIZE

Before we get into these extremely exciting how-tos, let's review what image file size is and why it needs to be small for the sake of our web pages' load times. (If you want to read more about image size in context, check out our other two previous Valuable Images posts: 1. Choosing the Best Images for Your Online Presence and 2. Image Editing Basics.) 

Why Image Size Matters

'Image size', or an image's file size, refers to the weight of an image's data, whether it's in kilobytes (KB), megabytes (MB), or gigabytes (GB), rather than the image's actual dimensions. And, in turn, an image's file size affects the length of its web page's load time, as it's adding its own data to the entire loading process for every visitor. Basically, anytime an image is used on a web page, it increases how long the page takes to load. And, as slow load times are a huge deterrent for your website visitors, we want our images to have as low a file size as is possible.

You can check your image size by right-clicking the image file, scrolling down, and clicking 'properties' (or ctrl-click if you're using a Mac). You'll then see the properties window open with the image size available.

Finding-Image-Properties.png   Viewing-Image-Size.png

We typically shoot for our images being 50 KB or less if possible. Be sure to have your images be at least under 1 MB (equivalent to about 1,000 KB) and much less if you can.

The Rule of Size Vs. Quality

You may remember us going over this general rule for photo editing in our last Valuable Images postThe higher an image's quality, the larger its file size is likely to be. So, when we go to decrease our image's file size, we can expect that the image's quality will also decrease. The key to having the best-looking images with the smallest file sizes is usually through the trial and error of checking your images' quality based on what export settings you used and altering them those settings accordingly if needed.

EXPORTING YOUR IMAGES

In our last post, we focused on basic image editing techniques that you can achieve using either Photoshop or GIMP, two of the most popular photo editors out there. Once you've finished editing an image that you want to post online, you'll need to 'export' it from your image editing program.

'Export' is a similar function to 'Save' in that it allows you to save your image as a new file format. But, usually 'Export' has different format options than 'Save' does as well as other options to further optimize your image, like change its quality, file size, and resolution, and it can display previews of how the image will ultimately look based on your changes. These options are specifically geared toward images that are meant for online use, which is why we recommend using 'Export' when given the choice for your saving your online images. (We'll go over Photoshop's 'Save for Web' option later in this post, which is a very efficient and user-friendly export method.)

The main purpose of exporting your image from your editing software it to change its file format to what will work best for your website. If you're using Photoshop or GIMP, your image's current format is probably either PSD (Photoshop Document) or XCF (Experimental Computing Facility, or GIMP's native file format). And, unfortunately, people can only see these types of images if they view them in Photoshop (or other Adobe products) or GIMP. Thus, we must make them viewable for everyone visiting your website, and that's where the common image file formats come into play.

You can check your current file format by right-clicking your file icon (CNTR-clicking for Mac users) and viewing the 'Type of File', information that's usually listed first on the resulting box.

Checking-File-Type.png

You can export your images in both Photoshop by clicking 'File' in the top menu, scrolling down to 'Export' and then over to 'Export As...'. In GIMP, you can find the 'Export As' command right under the file menu. Once you get to the 'Export Settings' box in either software, you can choose your file format.

Photoshop-Export-Settings-4.png

GIMP-Export-Settings.png

As you can see, GIMP offers many more file formats in their Export Settings than Photoshop does. But, most of these extra formats can't be used online; they're for other types of software.

IMAGE FILE FORMATS

Your image's quality and size are largely determined by the file format you choose to export it as. Here, we'll go over the most common file formats for online pixel-based images.

JPEG (.jpg)

JPEG (Joint Photographic Experts Group) image files are the most widely used and accepted image files on the web. This is because they're usually the smallest files that you can hope to get. But, as is the common trade-off, JPEG files compromise your images' quality to achieve their small size. Because of this, they're referred to as 'lossy' files; every time an image is saved as a JPEG, a large of chunk of its information and quality is discarded in order to achieve a smaller size.

Still, JPEGs offer a very large choice of color options (16 million, to be precise) and are able to have a high amount of color bits per pixel (24), making them a popular choice for photograph exports.

You can adjust your JPEG's quality in Photoshop's Export Settings using a convenient slider. Lowering the quality this way will ensure a smaller image size after export.

JPEG-Adjust-Quality-Slider-Photoshop.png

GIMP has a similar option in their Export Settings, but it doesn't become available until you select .jpg as your file type and click 'Export':

JPEG-Adjust-Quality-Slider-GIMP.png

PNG (.png)

PNG (Portable Network Graphics) image files are the second most widely used images online after the JPEG. PNG files differ from JPEGs in several important ways, the first being that they're 'lossless' rather than 'lossy'. In other words, PNG files don't lose quality when you edit and export them like JPEGs do. Thus, PNG files can easily be larger in size than JPEGs, often making them slower to read and write. 

When exporting a PNG, you're usually offered either 8-bit or 24-bit color options (and sometimes even more). The smaller the bit, the smaller the image size will be, but the fewer colors are used per pixel. This means that low-bit PNGs can easily look pixelated if there aren't enough blocks of color in the image. And so, many people recommend using PNGs for more graphic, solid color images rather than for photographs.

A great plus to PNG images is that they use transparency, meaning they appear on a transparent background and use different levels of color transparency, which JPEGs can't do at all. Transparency often makes for cleaner edges and smoother transitions, and it can easily make your online images look a lot better than their JPEG equivalents, whether they're of photographs or not.

To the left, we have a PNG image zoomed in. You can see how the edge of the blue gradually becomes transparent forming a cleaner line overall. To the right, we have a JPG image zoomed in that's set to 'very high' quality. It does what it can in blending the edge, but it can't use transparency to help the issue.

PNG-Transparency.png   JPEG-No-Transparency.png

In Photoshop's Export Settings, you can choose '8-bit' to have a smaller, lower-quality PNG image. In GIMP, once you click 'Export', you can edit your level of PNG compression in the next box that appears.

GIF (.gif)

GIF (Graphics Interchange Format) is an older image file format; it was actually created by an employee at CompuServe in the late 1980's for image display at dial-up modem speeds, which is why it only supports 8-bits of color per pixel. Nowadays, GIFs are almost used exclusively for animated images, like the ones you see on websites like Giphy and Tumblr.

GIFs are also lossless and support transparency, like PNGs, and they can have a small size due to their few color bit options. As far as exporting images for the web goes, GIFs aren't usually recommended unless you're looking to make a simple animation or graphic.

Not Recommended Formats!

There are a few other format options you can choose from when exporting your images from photo editors, including BMP (.bmp) and TIFF (.tif), but these file types aren't recommended for online use.

BMP (Bitmap) images embrace high quality, but they don't compress at all, meaning they're generally too huge in size for a website to handle. TIFF (Tagged Image File Format) images are also generally very high in quality and aren't typically compressed, also making them too large for online use. (They're more often used in printing.) Another downside of TIFFs is that they're not largely supported by various browsers and web pages. So, if you use a TIFF image on your website, chances are that a large portion of your audience won't be able to see it.

The three main accepted pixel-based image formats for online use are JPEGs, PNGs, and GIFs. There's very little need to steer away from these three.

MAKE 'EM SMALLER!

Besides choosing your file format and your level of quality in your exported image, there are many other ways to decrease your images' file size.

Save for Web

A lot of image editing software, like Photoshop, has a 'Save for Web' option or something similar. If your software has a 'Save for Web' option, I recommend trying it out. They're very similar to your typical 'Export' options, but they're usually even more focused on image optimization, with extra optimization options available and better preview display. Personally, I always use Photoshop's 'Save for Web' option when I export images for Trail 9's website or any other online presence. In using it, I know I'm guaranteed to have the smallest file size Photoshop can provide for my chosen image format, and I can adjust any quality setting I want to.

Photoshop's 'Save for Web' option is located under the 'Export' menu. Click 'File', then 'Export', then scroll down to 'Save for Web' to open its respective box.

Save-for-Web-Photoshop.png

GIMP's 'Save for Web' option is not nearly as simple to find or use. While you can edit your image's quality in GIMP's 'Export' options, GIMP doesn't have a specific 'Save for Web' option automatically available for you to select. Instead, there is a GIMP plugin called 'Save for Web' or 'Web Export' that you can download and add to your GIMP software. In my own experience of adding this plugin, I ran into a few technical issues, but it ultimately works.

You can download the plugin here: http://registry.gimp.org/node/33. Once its downloaded, you need to drag the application into your GIMP plugins folder.

Dealing with GIMP's plugins, like its 'Save for Web' plugin, can be a painful reminder that GIMP is a free open-source software, and it sometimes lacks general usability for that reason. But, it does have plenty of options and possibilities if you're patient enough to figure them out!

Image Compressors (Minifiers)

Another great way to decrease your images' size is to use an image compressor tool. Image compressors, or image minifiers, are programs that automatically decrease an image's size when you upload your image to it. There are many image compressors that you can use online and others you can download directly to use on your computer. These tools provide a very easy way to achieve a smaller-sized image in just a few seconds. It's often worth at least checking to see how much smaller you can make your images before uploading them to your website, and these compressor tools make checking extremely easy to do. You never know; you could get rid of a lot more image data than you thought you could!

But, again, image compressors will often decrease your images' quality to achieve that smaller size. Sometimes, they'll offer both 'lossy' and 'lossless' compression for your images, with specific guidelines for each, for you to choose between.

A lot of compressors are available for free use, while some require subscription fees. Often, the paid services will offer to compress your images for you, if you'd rather not worry about it. There are plenty of options to choose from. I have a few listed below, and you can check out Mashable's article highlighting 18 different image compressor services if you'd like to scout out even more.

Free Online Compressors:

Free Downloadable Compressors:

Paid Compressors:

Thanks for Reading!

We hope you've enjoyed learning about exporting your images for smaller sizes, and we wish you the fastest-loading websites possible!