JPEG Optimization for The Web – Ultimate Guide

Posted by Harshad

JPEG Optimization for The Web – Ultimate Guide

JPEG Optimization for The Web – Ultimate Guide

Posted: 09 Jul 2012 02:43 AM PDT

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.

jpeg compression JPEG Optimization for The Web   Ultimate Guide

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.

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).

water colors paper art JPEG Optimization for The Web   Ultimate Guide

(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.

glowsticks night painting JPEG Optimization for The Web   Ultimate Guide

(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.

yahoo smushit developer tool JPEG Optimization for The Web   Ultimate Guide

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.


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.

riot tool jpeg optimization JPEG Optimization for The Web   Ultimate Guide

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.

imageoptim website screenshot JPEG Optimization for The Web   Ultimate Guide

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 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

10+ WordPress Plugins to Pinterest-ize Your Website

Posted: 09 Jul 2012 02:41 AM PDT

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.

wordpress pinterest 10+ WordPress Plugins to Pinterest ize Your Website

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!

Pinterest “Pin It” Button

The "Pin It" Button comes with complete features to allow your readers to Pin any image of their liking from your site, or you can set it as default image too. With this plugin, you can easily display the Pin It button on post excerpts and specify the link URL.

Download plugin | Visit Pinterest “Pin It” Button website

pin it button 10+ WordPress Plugins to Pinterest ize Your Website

Pin It On Pinterest

A much simpler plugin, Pin It On Pinterest allows you to specify images to Pin as well as set the default description.

Download plugin | Visit Pin It On Pinterest website

pin it on pinterest 10+ WordPress Plugins to Pinterest ize Your Website

Pinterest for Galleries

Pinterest For Galleries adds a Pin-it button below every image on your WordPress Gallery. This plugin however may not work for other third-party WordPress gallery.

Download plugin | Visit Pinterest for Galleries website

pinterst for gallery 10+ WordPress Plugins to Pinterest ize Your Website

Pinterest Block

Pinterest Block allows you to block pinning activities by your visitors. You can set which page to block from the settings page, or you can block specific entries directly from the post option.

Download plugin | Visit Pinterest Block website

pinterest block 10+ WordPress Plugins to Pinterest ize Your Website

Pinterest Badge

Pinterest Badge helps you to display your latest pinned images from Pinterest as well as the number of followers you have. With the Follow button, you can attract more readers to follow you on Pinterest.

Download plugin | Visit Pinterest Badge website

pinterest badge 10+ WordPress Plugins to Pinterest ize Your Website

Pinterest Pin It Button For Images

Different than other Pin-it buttons, this plugin allows you to add pin-it buttons over your images, which will appear on hover. The description and URL for the pin will follow your post entry.

Download plugin | Visit Pinterest Pin It Button For Images website

pinterest pin it image 10+ WordPress Plugins to Pinterest ize Your Website

Pinterest Image Pinner From Collective Bias

This plugin is a jQuery-based plugin that will display the Pin-it button at the bottom right corner of every image available on your site.

Download plugin | Visit Pinterest Image Pinner From Collective Bias website

pinterest pin all images 10+ WordPress Plugins to Pinterest ize Your Website

Pinterest “Follow” Button

A widget for your WordPress site, the Pinterest "Follow" Button can be easily added to your sidebar, or to be used as a shortcode to display it elsewhere.

Download plugin | Visit Pinterest “Follow” Button website

pinterest follow button 10+ WordPress Plugins to Pinterest ize Your Website

Pinterest Image Pin

With Pinterest Image Pin, you can add Pin buttons bellow every image on your site, and it allows you to add the Follow button at the end of every post too.

Download plugin | Visit Pinterest Image Pin website

pinterest image pin 10+ WordPress Plugins to Pinterest ize Your Website

Easy Pinterest

Easy Pinterest is a 300px wide widget you can add to your WordPress site to display images from Pinterest. You can set the number of images to display and the Pinterest account to fetch from.

Download plugin | Visit Easy Pinterest website

easy pinterest 10+ WordPress Plugins to Pinterest ize Your Website

WP Pinner

WP Pinner is a plugin that will allow you to manage your Pinterest account right from your WordPress dashboard. With this plugin, you get to auto-post or schedule-pin your post to Pinterest. There are many other great features including tracking of likes and repins.

Download plugin | Visit WP Pinner website

wppinner 10+ WordPress Plugins to Pinterest ize Your Website

Pinterest RSS Widget

Pinterest RSS Widget allows you to display Pinterest collections to your sidebar or on any other part of your site, including your page and posts, with the use of a shortcode.

Download plugin | Visit Pinterest RSS Widget website

pinterest rss widget 10+ WordPress Plugins to Pinterest ize Your Website

Pinterest Pinboard Widget

Pinterest Pinboard Widget is a simple plugin to add a pinboard to your sidebar and display your Pinterest collection in thumbnails.

Download plugin | Visit Pinterest Pinboard Widget website

pinterest pinboard widget 10+ WordPress Plugins to Pinterest ize Your Website

Pretty Pinterest Pins

Pretty Pinterest Pins is a widget plugin to display your latest pins in style. This plugin is fully customizable and you can add pin collections from specific Pinterest boards and users.

Download plugin | Visit Pretty Pinterest Pins website

pretty pinterest image 10+ WordPress Plugins to Pinterest ize Your Website

If you like this post, you may also want to check out 7 Useful Pinterest Tools You Should Know and our Freebie Pinterest Icon Set.

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

How to Sync Any Folders Outside /Dropbox [Quicktip]

Posted: 02 Jul 2012 03:03 AM PDT

[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?

sync dropbox folders How to Sync Any Folders Outside /Dropbox  [Quicktip]

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.

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.

    dropbox sync ln How to Sync Any Folders Outside /Dropbox  [Quicktip]

  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.

    dropbox sync drop terminal How to Sync Any Folders Outside /Dropbox  [Quicktip]

  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.

    dropbox terminal How to Sync Any Folders Outside /Dropbox  [Quicktip]

    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.

    dropbox sync How to Sync Any Folders Outside /Dropbox  [Quicktip]

    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.

    dropbox terminal 2 How to Sync Any Folders Outside /Dropbox  [Quicktip]

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

  6. Hit Enter.


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]


Post a Comment