All posts tagged ‘images’

File Under: Multimedia, Web Standards

Meet WebP, Google’s New Image Format

As part of its self-imposed mission to make the web faster, Google has rolled its own image format.

It’s called WebP, and it’s based on open source technology. Google launched the initiative Thursday night with a post on its Chromium blog.

WebP has much in common with JPEG, the most widely used of the web’s image formats. Like JPEG, the new format is intended to be used for photos on web pages, and like JPEG, the photos in a WebP image are compressed using lossy technology. The images will continue to reduce in quality the more you compress them.

But Google thinks it can squish web images down using WebP to even smaller sizes than you can get with JPEG — around 40 percent smaller, based on the company’s tests — without any noticeable loss in quality. Google has been testing WebP’s efficiency over the last few months, taking around a million images from the web (mostly JPEGs, but also some PNGs and GIFs) and running them through the new WebP compression technology.

It says its engineers have seen a 39 percent reduction in overall file size on these test images “without perceptibly compromising visual quality,” and that it expects the results to improve once development picks up. Also, you could probably get even better results if you started from an uncompressed image.

You can check Google’s work in a gallery comparing the JPEG and WebP images. You can also download a conversion tool and try out the tech for yourself.

WebP is being released as a developer preview, so its not supported by any major web browsers, camera manufacturers, or the software we use to make JPEGs, like Photoshop or iPhoto. Google will no doubt quickly build it into its own browser, Google Chrome, and its Picasa photo sharing software, but it will need some major backing from every key player in the browser and digital imaging hardware and software spaces if it’s to gain any traction. So it doesn’t present much of a challenge to JPEG right now.

It may in the future, though. Images are biggest data payload on web pages — when a page is slow to load, more often than not, it’s the photos that are slowing it down. The industry as a whole has been trying to solve the page load speed issue for years, and focus has increased with the explosion of the mobile web and the growing frustration with the limits of cellular data networks.

Google has made several recent attempts to speed up web page load times, both with its own SPDY protocol for web applications and its work on WebKit and V8 engines for web browsers.

WebP is based on the same technology behind the new WebM video format, which Google released under an open source license in May, with the backing of Mozilla and Opera. All the major browser vendors except Apple offered support for WebM on day one, and that support was integral in getting the project off the ground and onto the web, where it is already being used. However, even with all the fanfare, it still lags far behind the other video formats that have been around for years.

But because it’s open source, and because it’s been built on technologies proponents of the open web are already familiar with, WebP does have a chance. The first step is getting into Google Chrome, which the company says will happen very soon. After that, it’s a matter of getting support from Mozilla, Opera, Apple and Microsoft to display WebP in its browsers. Considering how willing most of those companies were to play nice with WebM video, we should expect that to happen sooner rather than later.

In the meantime, Google is also considering some tricks to speed adoption, like writing scripts that pull JPEGs off the web and re-compress them in the WebP format, then store them for later use.

See also

File Under: Mobile, Multimedia

TinySrc Shrinks Your Images for Mobile Browsers

If you’ve played around with optimizing your website for small screens, you know one of the big headaches is resizing images. You can set the viewport in your head tags to make sure your main content is the focus on mobile devices, but you can’t easily shrink images.

On many mobile devices, rendering the images is what slows down page load times. That’s where TinySrc comes in. It’s a clever service that parses your images and presents scaled-down versions to mobile devices.

Using tinySrc is pretty simple, all you need to do is prefix your image URLs with the tinySrc domain, something like:

TinySrc will then detect the device that’s visiting your site (tinySrc has partnered with Device Atlas so its device listings are extensive) and serve out an appropriately shrunken version of your image.

If you’d like complete control over the size of your images, you can specify parameters in the URL. For more details on all of tinySrc’s settings see the documentation.

While you are relying on a third party service — a choice which always carries the usual concerns about speed and reliability — tinySrc is definitely one of the fastest, easiest ways to shrink your images for the small screen.

[via Ajaxian]

See Also:

File Under: HTML5, JavaScript

Trick Out Your Images With PaintbrushJS

HTML5′s canvas tag is a blank slate that allows you to manipulate all sorts things with JavaScript — everything from complex animations to interactive infographics to videos.

For those that want to trick out their images — including background images set in CSS — developer Dave Shea has released PaintbrushJS, a lightweight image processing library that can apply various visual filters to images on your page.

Behind the scenes, PaintbrushJS uses the HTML5 canvas tag to apply its effects, automatically inserting canvas tags based on class names. You can set effects and control the amount by adding attributes to your tags.

PaintbrushJS works in any modern browser — so, of course, IE 8 and below won’t see the effects.

PaintbrushJS can blur images, add a sepia tone, overlay colors or add noise. For a full list of the effects available, check out the documentation or head over to the demo page to see it in action. If you’d like to experiment with the effects, you can grab PaintbrushJS from its home on Github.

See Also:

File Under: Visual Design, Web Basics

Image Types Duke Out Over Quality And File Size

PNG vs JPGThe age-old image type debate is going on over at Reddit. What used to be mostly JPG versus GIF now puts JPG up against PNG.

Yahoo’s Stoyan Stefanov recently had a series on image optimization. His breakdown on page weight was particularly fascinating. Google’s home page is 75% image, weight-wise, because there’s very little to it besides the logo and search box.

Stefanov also posted a good run-down on file types, which is less snarky than the opinionated-but-useful Reddit thread. But for quick fun, see the image type comic that the Reddit folks are discussing.

While I love PNG for its clarity, I often end up choosing JPG for screenshots on Webmonkey because of size. PNG is often 10x the JPG version, with little loss in quality.

But aren’t we all on broadband now? According to a recent study, no. Just over half of Americans have home broadband connections. However, another study shows that 90% of active users have fast connections.

That said, Mobile use is expected to increase, and its speeds are not nearly up with broadband. Plus, if you’re serving bigger images from your own server, you have to pay for that bandwidth, which can add up with significant traffic. All this means image optimization is still relevant, even when many do have access to fast connections.

See also:

File Under: Visual Design

Make a Cropping Tool For Your User Avatars

UvumiTools Crop in action

Now your site can be like Flickr, at least in one aspect. Create a cropping tool to let your users decide what part of their profile photo becomes their avatar to represent them across the site.

UvumiTools Crop is a small JavaScript library that runs on top of the Moo framework. You have control over how the crop tool looks and acts. For example, you decide whether to require a specific aspect ratio, or whether you require a minimum size.

One big caveat with this one: it’s only the interface to select a piece of the image. You still need some sort of server-side script to do the actual cropping. At least now you can make the process look good to your user.

See also: