In the time of modern web applications fast and responsive websites become more and more important. Not only does it affect your conversion but also your SEO ranking. So if you run a website, loading speed should be something to have an eye on. One of the biggest influence to page loading speed are images. In order to have a appealing website, high-quality images are important but unfortunately also often big and heavy. Downloading them upon visiting a page is a crucial performance impact. The vicious circle between page loading speed and nice user experience shows the necessity of a well balanced and thoughtful solution. Photography websites are the pinnacle of this problem: The images are the product, the business. Photographers want them to shine, to be high-quality and to put them together in a nice gallery. Galleries with 100+ HD images are the usual case with an upward trend. Programming a gallery naively will most likely kill your SEO and your user experience. Our plan to develop Photography Management mainly emerged due to the lack of plugins that do this hard task well: Intelligent image fetching with loading effects, progressive gallery loading and efficient fullscreen slider all with high focus on good design and user experience. In order to solve that hard task we at Codeneric had a long research phase before developing Photography Management. We experimented with various approaches until we were satisfied with the result shown in the video:
Let’s dive deeper into why we think that the solution of Photography Management is a perfect fit for image heavy websites.
Inspired from the image revealing effect of Medium and this great article of the Facebook Developers Blog, each image in a Photography Management gallery has a blur effect on page load which is then animated to its original look. Even though the awesome look of this effect could be the lone reason to include it into the gallery, there is a lot more behind it. The blurred image is actually just a tiny version of the original image, with a long edge resolution of 20px (the other one depends on the image dimensions). This small bunch of pixel information is less than 1kB, and we include it the HTML source (base64 encoded) so we do not have to request it on page load. Here you see such a low-resolution version, scaled by a factor of 10 to actually see something.
But how is this pixelated misery useful for high-quality photography galleries? Well, what we do is we scale it to original dimensions and then blur it in the browser. Even though the image only includes a maximum of 20×20 pixels, this is enough for a smooth and cool looking preview blur.
After the page is loaded, the scripts that come with Photography Management will fetch the original image (which is way heavier, usually ~100-300 kB ) and replace the blur with it once finished loading.
This guarantees for a fast page loading speed without sacrificing a good user experience. Old-fashioned solutions also fetch the original images only after page load, but display an almost-empty website with a loading spinner in the meantime. Photography Management leverages its technology to display meaningful content, even if the actual content is not loaded yet. Furthermore, when you upload images through the Photography Management Uploader, we will create optimized (scaled) version of the images to fit the use case in a gallery preview while ensuring good quality. You don’t need to load and display an 18 megapixel image for a gallery view with a space of 300px per image. Another big performance improvement is that Photography Management will only load the full image if the respective image element is in the viewport – if its not it will defer this request to whenever this image becomes visible. This is very important, because this means we could easily display a gallery with e.g. 500+ images with very fast page load time, display their blurred versions (~500 kB for all images) and then progressively load the high-res versions as the user scrolls through the gallery. Even though our laid out technology allows for including a gallery with so many images at once, we wanted to do better. That’s why included another performance improving feature: lazy gallery image loading. This infinite scroll feature is more commonly used due to its effectiveness: We initially populate the gallery with ~20 images and then, as the client scrolls down and gets near to the end of the gallery, we load the next 20 images and so on until all images are displayed.
What the Photography Management gallery uses is a nested 3-stage performance strategy. 1. On microscale, we display super-efficient, content-aware placeholder 2. We lazy-load the full (optimized) resolution only if visible in the viewport 3. On macroscale, we lazy-load the gallery images in an infinite scroll.
When a client click on a gallery entry, Photography Management will open this image in a fullscreen slider. It is essential to display a high-quality version of the image here, since the client already commited to seeing the image in more detail. That’s why we display high-resolution versions suitable for the web with ~2000px long-edge width. Also in this part of the gallery, performance is key. The client expects to slide through the pictures in the fullscreen view smoothly without long interruptions. This is why also the slider lazy loads the high-res images. Depending on which image the client initially chooses, Photography Management will only preload the previous and the next image of the slideshow to ensure smooth swiping effective bandwidth usage. # Try it We put a lot of effort in planning and developing Photography Management and hopefully this post underlines how well-suited it is for Photographer websites in terms of look and performance, apart from its other features. If you haven’t already tried Photography Management, go ahead and give it a shot. If you do have tried it already or you have a question, just leave a comment below.