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

• Major Browser Vendors Launch WebM Free Open Video Project
• On Web Video Support, Safari Now Stands Alone
• WebM Video Support on Track for Firefox 4

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:

http://i.tinysrc.mobi/http://foo.com/foo.png

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:

• New Frameworks Give Mobile-Web Apps a Boost
• Firefox Mobile Alpha Lands on Android
• Gmail Mobile Is Always on the Move
• Build an iPhone-Optimized Website with iUI

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:

• Tips and Tricks for Better HTML5 Canvas Animations
• Flashy HTML5 Experiments Point to Web’s Future
• DeviantArt’s Muro Drawing App Is Pure HTML5 Awesomeness