Tag Archives: images

News

The HD revolution is coming to the web – update your creative process today

Leave a comment

You’ve probably heard about the “retina” displays on the iPhone 4/4S and the new iPad. These devices have double the display density of most other devices. The high-DPI displays of these devices are unique, but they won’t be for long. Most analysts are predicting that within a few months, Apple will introduce the same “retina” displays for their laptops as well. Once display manufacturers like Samsung and Sharp ramp up production, the rest of the industry will very likely follow.

In other words, we are facing the equivalent of the HD TV transition for personal computing. It will come to smartphones, tablets and then desktops. Speculating about the timeline of the transition is of course risky, but I suspect that there will be many high-DPI devices being sold by the end of 2012 – not limited to Apple. Certainly within a few years, we can expect the rest of the industry to follow. Because websites and applications can display content appropriate to the viewer’s hardware, they can gain a competitive advantage without imposing costs on non-HD visitors.

Currently very few websites and desktop applications take advantage of the high-DPI displays. While Apple has demonstrated how it can be done, the specific browser-side implementation may change. For most websites and applications it’s probably too early to invest resources in the transition. However, it is not too early to start updating your creative process to include high-definition graphics and video.  If you decide to upgrade your website six months or a year from now, it will be easier to use pre-prepared HD graphics than have to re-create them from the original PSD files (which may not be easily available.) Apple’s implementation makes it possible to transition to high-DPI by adding a single JavaScript file to your website – without increasing the page size for current users.

What this means in practical terms:

  • You should start preparing double resolution graphics and video for new content, especially important elements like headers & front page content.
    • Example: http://images.website.org/header.png should be complemented by http://images.website.org/header_2x.png
  • If you target iPad or iPhone users, you should already be updating your website’s technology to support HD graphics & video.
  • When initiating projects going forward, you should give increasing consideration to adding support for high-DPI resolutions.

Update: visual guide.

tips, tutorials

Great image optimization tools for Windows and Mac

1 Comment

Over the last few weeks, I’ve experimented with image optimization tools. Using these tools, I have rapidly eliminated gigabytes of image data from thousands of images without any quality loss. Over time, this should translate to many terabytes of bandwidth savings.

Because these tools can be run in batch mode on thousands of images at a time, they are useful for optimizing large, existing image libraries.   They are lossless and designed for bulk mode, which means you can safely run them without any loss in image quality. But be careful: test on small samples first and learn their specialties and quirks.

An alternative to running them locally is to use Yahoo! Smush.it, which is an online service that  “uses optimization techniques specific to image format to [losslessly] remove unnecessary bytes from image files” using the same tools. The best way to run Smush.it is via the Yahoo! YSlow for Firebug, an add-on for the Firebug add-on for Firefox. (By the way, Smush.it renames GIF images to .gif.png when it shrinks them. I wrote a console app to rename them back to .gif.   Browsers only look at the image header to identify images, so it’s safe to serve up PNG images with a .gif extension.)

Mac:

ImageOptim Screenshot
ImageOptim

For OS X, all you need is ImageOptim, which optimizes JPEG, PNG, and GIF auto-magically.  Seriously awesome tool.  (Free.)

For lossy optimization, JPEGmini is amazing.  It uses knowledge of human visual perception to shrink JPEG’s up to 5X without visible quality loss.  (Semi-free.)

Windows:

RIOT (Radical Image Optimization Tool):

Though it has a batch mode, this is the best tool for optimizing single images, whether they are JPG, PNG, or GIF. I use RIOT to save every image I work on as well as to reduce the size of existing images that are too large. You can re-compress PNG and GIF images losslessly, but for JPG you want to save from the original file.

RIOT is available as a standalone version as well as a plugin for several image editors such as the excellent IrfanView.

 

RIOT - Radical Image Optimization Tool screenshot
RIOT – Radical Image Optimization Tool screenshot

The JPEG Reducer:

Run this tool in bulk on all your JPEG images to save ~10% of the file size. This is a GUI front end for jpegtran, which optimizes JPEG images by doing removing metadata and other non-display data from JPEG images. Because it is lossless, it is safe to run on all your image. It will ignore any files you add which are not really JPEG images.

The JPEG reducer screenshot
The JPEG reducer

PNG Gauntlet:

This tool is a front end for PNGOUT which will losslessly reduce the size of PNG images. Warning: if you add GIF or JPEG images to it, it will create PNG versions of those images. Sometimes you want to do this, but if not, don’t add images to the queue.

PNG gauntlet screenshot
PNG gauntlet screenshot

Let me know if you have other tools or ideas for image optimization.