Putting AcuWeb in the frame

Jack Simpson

Head of Marketing and Communications

I know it was you, Fredo.

There’s lots of new features under the hood of AcuWeb that are designed to make your life so much easier.  The one we’re most proud of is the way you get pictures onto the website, and how you maximise the impact of your property pictures.

The Problem

These days most people take pictures with a digital camera, which have a variety of resolutions, normally described in megapixels.  These days, a decent camera will take pictures of about 10 megapixels (though there will normally be a variety of options).  For comparison, a true High Definition television picture is 2.3 megapixels, whereas a normal (Standard Definition) television is ~0.3 megapixels (NTSC & PAL are different).  A megapixel is 1 million pixels, so to calculate the number of megapixels you multiply the width & height (in pixels) and divide by 1 million.

The next important factor when considering pictures taken by a camera is the image format. Some cameras have a ‘Raw’ format, which essentially means they store the image uncompressed.   Images that are saved in a raw image format normally have the largest file sizes.  The size of the file is related to something called the pixel depth (or colour depth), which says how much space is used to describe each pixel.  Most modern cameras will use a 16-bit or 24-bit colour depth.

So the maths bit (skip this paragraph if I were you).  A good modern camera (e.g. the popular Nikon D60) is advertised as 10.2MP (megapixels); it actually produces images 3872 pixels wide by 2592 pixels high = 10036224 pixels (or 10.0MP), and a colour depth of 16 bits.  Now a true raw images would take at least 10036224 x 16 = 160579584 bits; which is 19.14 megabytes.  Most of the time user’s will select a compressed version, which on a Nikon will use NEF compression, producing an image between eight and ten megabytes in size.  Unfortunately, it’s more complex than this due to the space used up by metadata, but let’s keep it simple!

OK, that’s all a bit techie, and a lot boring – and that’s the real point here.  Who wants to know about pixels anyway?  Well the big problem is it impacts on your productivity hugely.  According to a recent Guardian article, the average upload speed in the UK is 296 Kbps (Kilobit per second), which means on average you can upload 296,000 bits each second.  160579584 bits would therefore take (on an average UK broadband connection), 542.5 seconds, or 9 minutes.

“If you upload a raw 10MP image from your digital camera to a website it will take (on average) nine minutes.”

If you have two hundred properties with five images each, that would take an entire week (without sleeping or stopping) for you to upload your pictures, which really does give you pause for thought.  The other problem is for the users of your website, the average download speed is 2.95 Mbps (ADSL2+ is asymmetric, so downloading is faster than uploading), so a property description with 5 images would take 54.5 x 5 = 272 seconds to download, or four and a half minutes, and that’s just the pictures!  On top of this, most PCs won’t be able to understand the raw image format or display it in the browser anyway.

Because of this, most companies will strongly advise you to resize your images and compress them (e.g. using JPEG) before uploading them to the web server.  An even more common approach, used by designers of web sites, is to let you upload anything you like, but to resize the images and compress them automatically once they’ve been uploaded.  This is fine for the web host, as it solves the other big problem of large images (they eat up disk space, and download bandwidth), and it makes your pages load quickly for your end user; but it doesn’t help you get your images online.

As such neither of the common approaches is particularly helpful for none-technical users and administrators of the web site.  And as such, neither solution was acceptable for AcuWeb, so we did something a bit different.

The Solution

Well the solution is easier to state than to do!  We need to resize and compress your images before we upload them to the server.  Turns out, that it’s not so trivial as you’d hope, but it is possible!  And AcuWeb does exactly that.

How?  Well image manipulation can be done in JavaScript, which is the computer language we use to write code that runs in your browser when you’re browsing a web site (like AcuWeb).  Unfortunately, the kind of manipulation we want isn’t possible in JavaScript (well at least not easily anyway).  Instead we need to use another approach.  As well as JavaScript, web browser’s support plugins, which allow them to be extended.  Common plugins include Flash, ActiveX, Silverlight and Java.  These are essentially ways of providing more advanced functionality, and all of them allow better image manipulation (though in truth, Flash has only just started becoming a realistic choice in it’s latest incarnation, and Silverlight is still being adopted).

We did a lot of research and in the end settled on a Java control which we’ve integrated into a property editing pages.  This control is used wherever you need to select or upload images to the server.  The control allows you to drop high resolution images straight onto it, and will automatically resize and compress them before uploading them to the server.  It can also queue a group of images for uploading, so you can select a whole photo shoot (for example) and leave it to upload.  Because it compresses the images first the upload times are significantly reduced.

This means you can drop a bitmap onto the control and it will upload a compressed JPEG, rather than the bitmap itself.  Those D60 pictures for example, automatically shrink from ~8Mbytes to a maximum of ~120Kbytes (when 1024×685 pixels).  Making them ~1.5% of the original size, uploading (on average) in just 3 seconds (beats 9 minutes doesn’t it)! Instead of a week you could upload all your images in 1 hour (theoretically).

During web browsing, people are looking at your images on screen, they’re not intended for print media.  As such it is rare you want to give them access to images bigger than 640×480 pixels (or 0.3MP).  AcuWeb limits all uploaded pictures to a maximum width and height of 1024×768, any image you try and upload that is bigger than this will be shrunk to fit automatically (maintaining the aspect ratio), but you can actually choose from a range of image sizes that you want your site to use (default is 640×480, which produces even smaller file sizes).

It’s important to realise that AcuWeb is not an image archive, it will resize and compress your images, and remove unused images automatically”

AcuWeb is designed to optimise the way users use images on your booking engine, and to do it automatically so that you don’t have to worry about it.  There are a number of features that help this.

AcuWeb keeps track of when and where images are used.  This allows you to see how often you’ve used a particular image, and on which properties.  It also shows you any images that are on the server that you’re not actually using anywhere.  These are wiped after 30 days if they remain unused, so whenever you select images for a particular property to use it encourages you to select from a list of unused images first.  Don’t worry though, it even tells you how long an unused image has been unused!

But that’s not the only thing that AcuWeb does for you out of the box.  Lots of our customers take pictures themselves, and there’s nothing worse than people stealing your pictures for other sites.  Which is why you can specify a watermark image, which gets added automatically to all uploaded images, producing a visible watermark.

“You really can get rid of that expensive copy of Photoshop!”

In fact there’s a number of features, including image rotation, cropping, brightness and contrast controls that are all coming in future versions, which will take all the pain out of getting property descriptions online.

The Image Handler

Finally, the last piece of the image handling jigsaw is displaying thumbnails.  In many templates you don’t want to show someone the full size picture until they click on it or interact with it in some way.  For this reason, many templates will make extensive use of thumbnails.  The problem with thumbnails is that when you include an image in a web page and specify it’s width and height, the browser still has to download the full size image, before it shrinks it to the correct size for displaying on the page.

AcuWeb has an image handler built into it, that allows you to specify various options on any image you request from the web server.  This allows a web page to say it want a version of the image to be a particular width and/or height.  The server creates a version of the image to match the requested format and then sends that to the browser.  This can makes pages with a lot of thumbnails load in a tenth of the time!

What’s really nice about this feature is that it is available to anyone requesting images from the web server.  This means that you can use all the advanced image handling of AcuWeb, even if you don’t use the full features of the booking engine, because all the image URLs and content are returned via the XML API.

To manipulate images before downloading them you append a query string to image URL.  It’s really easy, but probably not for everyone reading this blog.  For full details check the instructions here.

 

Conclusion

Image manipulation and web sites are a bit of dark art, and although I’ve tried not to get too technical, it really is impossible to describe without a bit of background.  That said there’s only really one take home message of this blog article.   AcuWeb is designed in such a way that you really don’t have to think about the way you work with images ever again, just drop them on there and let us do it for you.

That really is the goal of just about everything we’ve done in AcuWeb.  Hopefully you’re starting to get excited?  Please drop me a comment and let me know what you think!