Image compression is found in every native media format. However the difference between GIF, PNG, and JPEG is how the information is compressed and display on-screen. There are so many tips for composing great image media published on the web, and yet many designers still do not understand some of the fundamentals.

In this guide I’d like to share a few ideas for proper JPEG compression. You want to optimize your images to decrease webpage load times while also holding a decent level of quality. It’s all about finding balance between file sizes and screen depiction. There is no perfect solution for designers to follow. It takes some initial practice, but once you understand JPEG compression it becomes much easier developing websites in the future.

Recommended Reading: Tips & Best Practices for Web Optimization

Avoid Always Saving at 100%

You should almost never save your JPEG images at 100% quality. This will not produce the most possible “optimized” image. It actually calculates through an optimization limit formula which increases your file sizes exorbitantly. Even compared to 90% or 95% quality you’ll see a significant drop in file size.

Most times you’ll be recommended to save images much lower than 90% quality. If you open the Save for Web dialog box in Photoshop you’ll notice they offer preset values you can choose from. I added the possible JPEG values below – notice the inherent naming conventions.

• Low – 10%
• Medium – 30%
• High – 60%
• Very High – 80%
• Maximum – 100%

Even in Adobe Photoshop 60% image quality is considered ‘high’. Many web developers will vouch between 50% – 70% is a safe range to stick with.

How Low is Too Low?

The values you choose for optimization are completely dependent on the project at hand. You’ll have to consider which types of graphics will output the highest file sizes – these are the ones which really need compression.

I would argue that below 30% you’re really chopping off fundamental picture quality. Other designers will swear 50% as a “limit” to decreasing the optimal value. But the best advice here is to just try out different settings and see what looks best! You can’t go wrong with a few test studies optimizing JPEG images for the web.

Compression Options

We should first clarify the two terms ‘compression’ and ‘quality’ which are the inverse of each other. This means if you save a JPEG at 40% compression you’ll get 60% quality (compared to a maximum of 100% quality with no compression).

These are the most basic options to utilize – and they should be enough when saving for the web. General users do not get into much deeper customizations. Subsampling gets into more complicated matters where you’re converting RGB images into YCbCr (Luminance, Chroma Blue, Chroma Red).

(Image Source: Kara Monroe)

The luminance or brightness setting is always held at the highest possible value in JPEG compression. With this brightness value on a separate channel it’s easier to optimize the individual color values of Red and Blue. This is also known as chroma subsampling. Designers interested in getting their hands dirty will love to read a bit more about this compression algorithm. Check out this great blog post on chroma sampling specifically focused on JPEG images.

(Image Source: Derek Hatfield)

As an interesting side note Adobe Photoshop does not always utilize subsampling for compression. Any images saved via the “Save for Web” dialog will only use chroma subsampling below a 50% quality value.

Differing Web Media

The web is also full of different kinds of image media. You can have photographs, icons, buttons, badges, and tons of other graphics. But it’s notable that comparing quality between a button and a photograph just doesn’t make sense.

When using photographs or detailed images consider linking to a separate lesser-compressed JPEG file. Then you can setup thumbnails on your site with a higher compression ratio and much smaller file sizes. The only downside is that you’ll need to provide two sets of images for a media gallery. Take notice of the many different graphics you have sewn throughout a website and consider optimization techniques for each one individually.

Planning a Graphics Model

You want to have an organized file system that’s easy enough to rummage through. Some webmasters will choose to host their photos elsewhere on the web – such as Flickr or Picasa. Yet you’ll still want to use some compression tool to reduce image sizes, but how you display them on your site will vary. This is especially true with the popular rise of mobile devices with access to the Internet.

I found an interesting article discussing JavaScript JPEG encoding which would happen in your frontend code. The original post is dated back to 2009 which explains the process more in detail. There isn’t much benefit to high-quality image galleries but it can shave off loading times for your mobile visitors. It would also be a useful technique when hotlinking images or re-cropping thumbnails dynamically.

Another fancy tool to check out is Yahoo! Smush.it. It’s a browser-based web app where you can upload an image and Smush.it will remove all unnecessary extra bytes to optimize file size. It’s 100% lossless meaning the image quality will not degrade at all. And even better you can batch-upload images from direct URLs if you have them hosted on your website or a 3rd party server.

Additional Tools

There is plenty of software to try in regards to image manipulation. Any extra bytes you can shave off each file’s size are crucial. There isn’t a whole lot of software out there, but the options which are available are amazing.

IrfanView

This free software for Windows allows you to view and optimize any set of large images. I especially like this software because it supports batch conversion from images in multiple directories. You can apply the same functions over hundreds of JPEG images automatically.

What’s even better is the plugin support from 3rd party developers. One such example is RIOT (Radical Image Optimization Tool). This plugin works for other similar open-source graphics editors such as GIMP. It offers a dual-image view where you can manually adjust compression parameters for each of your images.

Software support is wonderful and the RIOT features are very easy to use. Along with image compression you also have access to removing additional metadata such as EXIF and Adobe XMP. These extra bits of data can only add onto your total filesize and they are rarely needed.

ImageOptim for Mac

If you are running OS X and need a powerful compression app then look no further. ImageOptim is a powerful tool to compress images for the web – at times even better than Photoshop.

The whole application supports drag-and-drop functionality so it’s easy to optimize large sets of images. You can similarly run commands right from within the Terminal and setup shell scripts. Check out the Google code page for more information and technical support.

There have been some minor issues with the latest 1.3.3 stable release in rendering pixelated JPEG images in Opera. Try checking all your optimized images in the 4 major browsers – Chrome, Safari, Firefox, and Opera (and maybe IE). If anything looks skewed you can try downloading ImageOptim 1.3.0 which converts a bit cleaner.

Helpful Resources

• JPEG 101: A Crash Course Guide on JPEG
• Right compression settings to save JPG images for WordPress
• Clever JPEG Optimization Techniques
• How-to optimize JPEG images for websites
• Everything You Need to Know About Image Compression

Conclusion

JPEG compression is tricky since you need to find the proper balance between quality and substance. Even as our modern Internet connection speeds are increasing there is still a need to reduce the size of webpages. New frameworks like jQuery and Typekit can tack on hundreds of additional kilobytes, even on a well-optimized design.

I still have to recommend Adobe Photoshop as my premiere image editing software. There are other examples possibly better for the JPEG optimization process. But web designers can get by with even lesser-known open source solutions. If you have similar tricks or ideas on JPEG compression please share with us in the post discussion area below.

Related posts:

1. Software for Web Designers on Budget – Ultimate Guide
2. How to Make Time-lapse Video – Ultimate Guide
3. Ultimate Guide To Setting Up Your First Online Shop
4. Gmail Advanced Search – Ultimate Guide

I’m sure by now you have heard of Pinterest being the king of traffic referrals to third-party sites. As the social network continues to grow, what better way to take advantage of their drive than to make your WordPress site as Pinterest-friendly as possible? And these integrations are made plenty easy with the right WordPress plugins.

In this list we are listing more than 10 WordPress plugins that you can utilize to get your posts, images and even your site pinned over in the Pinterest network. There are widgets, buttons, counters, galleries and mre. We even have one block plugin for those who want to keep their site Pin-free (it’s a free universe).

Now on to the list!

Recommended Reading: 7 Useful Pinterest Tools You Should Know

Related posts:

1. How to Protect Your Pictures from Pinterest Pinnings [Quicktip]
2. How to View / Hide Pinterest Comments [Quicktip]
3. [Freebie] Pinterest Icon Set
4. 7 Useful Pinterest Tools You Should Know

[Mac only] Dropbox cloud storage allows you to sync and share files and folders between many devices, as long as the files you want to share are kept in your Dropbox folder. But how do you share and sync files that are outside of your Dropbox folder?

In this quick guide, we will be using Terminal on your Mac to let you sync any files to your Dropbox automatically without having to keep these files in your Dropbox folder, and even sync them automatically with specific folder on another computer if need be.

Recommended Reading: Automate Your Dropbox Files With Actions

Sync any folder on Mac

Before you can continue, you will need a Dropbox account. Make sure you download the app to your Mac after your account is created.

To sync any files on your Mac to Dropbox cloud storage without transferring or duplicating a file to your Dropbox folder, follow these simple steps;

1. Open your Terminal window, type "ln -s", hit space and leave it, do not enter.

   

2. Open your Finder and locate the folder you want to sync with Dropbox.

3. Drag and drop the folder to your Terminal window, and the path should appear after the line ln -s. Again, don’t hit enter and leave it.

   

4. Open your Finder again, locate the Dropbox folder and drag it to your Terminal window. Now you have the path to your Dropbox folder in your Terminal.

   

   The final line that will appear on your Terminal should be "ln -s <path to folder> <path to dropbox>"

5. Now, hit Enter

   After you hit enter, nothing happens, but the next time you save a new file in your selected folder, it will be sync’ed with Dropbox. Open your Dropbox folder to see the shortcut to that folder that has been created.

   

   In this example, I sync’ed my Desktop folder, so whenever I take a screenshot, it will automatically sync with Dropbox.

Sync any folder between two Macs

If you own more than one Mac and you want to make sure every Mac has the same settings or the same files in it to save time, you can use this method.

1. Make sure you have done the previous steps on your first Mac.

2. From your second Mac, open your Terminal and type the line "ln -s". Hit space and leave it. Do not hit enter.

3. Drag and drop the folder you have already sync’ed with Dropbox in the previous steps, to your Terminal. The path will now appear on Terminal. Do not hit enter.

4. Now leave your Terminal, open Finder and locate the folder you want to sync with your second Mac, and delete it. Make sure you make a backup first though, just in case. For example on the first Mac, I sync my ‘Desktop’ folder, which now I can access from my second Mac via Dropbox, so I will delete the original Desktop folder on my second Mac.

5. After deleting it, drag and drop the parent directory of the deleted folder to your Terminal.

   

   Your Terminal should have "ln -s <folder path from Dropbox> <path to parent directory of deleted folder>"

6. Hit Enter.

Conclusion

Now whenever you save a file from your first Mac, you will see it on your second Mac as long they both are connected to Dropbox. In this example, when I take a screenshot on my first Mac, it will automatically appear on the second Mac without me having to transfer or duplicate files to and from my Dropbox folder.

Related posts:

1. Automate Your Dropbox Files With Actions
2. How To Sync ITunes From Mac to Android [Quicktip]
3. How to Create New Folders in Windows by Drag & Drop [Quicktip]
4. How to Transfer iOS Screenshots To Your Mac Easily [Quicktip]