Hello World Mum

Here are some samples of deep zoom images. This demo is designed for desktop, to work with a huge 4K super-high-resolution screen in a gallery.

Your mileage may vary on mobile however pinch to zoom does work and with a little bit of CSS this should come good with a neat user experience.

Super-high-resolution images don't work on the web as they take too long to download. However, by using OpenSeadragon deep zoom image tiles these images can be viewed on any device with the finer details revealed when zooming in.

Keep zooming in and you should be able to see individual threads plus miscellaneous debris that the cat brought in, circa 2003.

The stock Openseadragon interface is not that great for art galleries and high-end e-commerce sites where people have the attention spans of adolescent goldfish. The purpose of this page is to fix that and to get a process in place for uploading images quickly with no messing about in 90's style desktop publishing tools, e.g. Photoshop. The goal being to bring high resolution images from today's digital cameras to the web with no faffing.


First attempt - embroidery

The original embroidery is 28 x 18 cm in size, mounted on card and scanned with a normal all in one desktop printer/scanner. The top is slightly out of focus due to 'operator error'.

The scanned image is a 103Mb JPEG file, 13318x8544 pixels.

A scale has been added in the bottom left, this was developed by NIST in the U.S.A. (National Institute of Standards and Technology). Since tax payers paid for the code it is free and open source.

Note that the British government does not work like this, if, heaven forbid, they developed some useful code then they would want people to pay for it.


Second attempt - metric scale

Here is another example. The JPEG scan is 141.5Mb and that works out as 10639x8867 pixels.


Third attempt - some type of slide show

Sometimes a carousel of some sorts is needed. For this example six paintings (not embroidery) are going to be used:

The images are slightly different sizes, taken with a camera and roughly 7500 pixels across.

For the 'carousel' the buttons are now starting to look a little bit 2003 lacking the polish needed. They do work though and you can navigate through the images if you are prepared to hunt around for the buttons.

Let's add a set of thumbnails and see how they work. The thumbnails could be more useful in non-gallery applications, e.g. when there are some products for someone to buy, with different views, e.g. front, back and in some type of 'serving suggestion'.

Note the lack of individual labels, this is not good for a series of paintings with individual names but okay if selling T-shirts.

Unlike the previous example the images keep the same zoom level when swapping images.

The thumbnails are not actually that good, the black borders aren't great and some more CSS styling is needed here. Watch this space.


Fourth attempt - show loads

Let's see how a double height triptych works with the same images and remove the black border.

Funny how artists don't use standard sized canvases. Maybe that was 'operator error' by the camera-person. Looks good to me, particularly in full screen mode.


Fifth attempt - embroidery revisited

The 'operator error' of lousy scanning has now been fixed.

The scanned image is now even more megabytes, this time the goal is to try and get an interface that works a bit better.

This is a long way off working on mobile or meeting regular expectations in an ecommerce setting. Next we will try and fix that.


Sixth attempt - rotation controls

This painting has been photographed, probably with the glass in the way.

There has been some debate about the orientation of this image so there are some buttons here to change that.

The original size is something to be measured. The pixel size is 3872x2592. The max zoom is set to 4x oversampling.


Seventh attempt - some type of montage

This is an experiment in trying to show lots of pictures in a justified grid layout.

The images here are randomly laid out, the test is to see how this works with images of different resolutions and sizes. The images not shown thus far in this montage are low resolution and therefore quite blurry when deep zoomed.


Why haven't I seen deep zoom images before?

Today's web design agencies don't allow for fun with imagery even though images are what sell products. Too often clients get to pay vast fortunes for websites where there are bulky, slow to download thumbnails with high resolution zoom tools that aren't actually that high resolution and require even bulkier images to download. This is a pity given how everyone has a high resolution screen and a decent camera in their pocket.

The reason contemporary web design has got stuck with lousy, unimaginative imagery is due to how agencies have non-technical managers that have never sold products in their lives and do not dare push the creative envelope.

Static PDF mockups of websites get drawn by 'designers' that have never written a line of HTML5 code in their lives or read important texts on website usability such as the bible that is Don't Make Me Think.

Next, these static designs (one for desktop, one for mobile) get signed off by clients with coders not being part of the conversation. That conversation is important as sometimes it helps to know what is feasible and best practice, as per 'Don't Make Me Think!'.

This design is then cast in stone. The death march begins, young developers get burned out delivering deliverables that have to match the cast-in-stone 'designs' as agreed by the client.

Typically such projects are then sliced and diced with 'Agile' workflows where nobody has a clue about the bigger picture. See this recent article for more on how it all goes wrong with today's project management tools.

This critique of website development is a bit harsh and the examples on this page are lacking polish. However, there is a disease endemic in website agencies, a common pattern of teams bloated by useless project managers with designers that lack confidence and imitate rather than create.

There are other problems too with today's web development. Too often non-technical managers opt for 'software as a service' solutions that promise the earth but do not deliver. We are talking Shopify, Squarespace, Jot Forms and other services that allegedly make things easy and quick. All of these solutions create technical debt, a term that only software developers understand. Businesses die because these short-cuts don't work and because conventional dull website design can cost six figure sums. Sometimes you have to ask yourself how hard can it be to make a form. Was this not possible with the web twenty years ago? Why pay a third party service to host an online form and get all your customer data? Can't there be a better way?

Luckily though there is a new ark. Riding in this new ark is CSS Grid, custom variables and other tech that enables websites to be maintainable and not take aeons to complete. This is in sharp contrast to the tendency to make websites ever more complicated with nasties such as 'build tools'. Web agencies that embrace this new tech can finally make money and deliver their clients dreams without having to nickel-and-dime them for the slightest changes.

Stay tuned for updates, to see deep zoom imagery in art galleries and in ecommerce stores.

With thanks to Ian Gilmour and others that have contributed to OpenSeadragon.


© Maggie Shaw 1946 - 2018. For all enquiries please contact maggie@heaven.net.