How It Works

WP QuickDraw accelerates the delivery and presentation of webpage content by exploiting new progressive imaging technologies which intelligently adapt to each user’s web session – providing the highest quality experience using the least bandwidth.

Fundamentally, progressive imaging relates to delivering and presenting a series of progressively higher quality representations of an original image, beginning with a lower quality representation, or “base” image, that requires very little transmission bandwidth to load quickly. This low bandwidth base image therefore provides the user a very fast perceptual glimpse of the content prior to replacing it with progressively higher quality. Historically, progressive image technologies such as a progressive JPEG image have seen little use because the treatment of progressive levels, locked into the file type itself, forces only one image delivery mode with little ability to optimally adapt to user demands, devices, and environments.

As an alternative to using inherently progressive file types, WP QuickDraw takes advantage of relatively low file storage costs by processing each original image loaded onto a WordPress site into a library of many image representations of different resolutions, then dynamically builds, delivers and displays the best progressive series of these images based on the detected device and browser characteristics of each website visit. This intelligent, user-responsive use of progressive images lets website designers upload very high quality original images knowing that WP QuickDraw will only deliver the maximum quality viewable throughout a user’s website session, providing on-demand additional quality if the user zooms in or rotates a device for a larger image display (a WP QuickDraw PRO feature), and therefore using minimal bandwidth for the fastest but still highest quality user experience. And because WP QuickDraw stores these image representations like every other WordPress image, it’s fully compatible with image optimization and caching plugins while also supporting conventional browser caching of the highest quality image to avoid unnecessary future progressive downloading.

Uploaded high resolution images are stored and then automatically processed by WP QuickDraw into three progressive “imagesets”, each of which having four increasingly higher resolution representations ending in that of a “breakpoint” – standard resolutions of typical devices (up to six breakpoints can be customized with WP QuickDraw PRO). WP QuickDraw then monitors the display characteristics of each user session, determines the best imageset for that session, and runs the proper JavaScript code in the browser to use that imageset for the optimum experience, including, with QuickDraw Pro, monitoring that experience and delivering the highest quality available if the display characteristics change such as from pinch-to-zoom interaction.

WP QuickDraw’s approach of intelligently selecting a series of progressive images leads to a multitude of advances in high performance website delivery. To begin with, the base image of each progressive “imageset” represents such a small file size that WP QuickDraw inserts the image data as inline Base64 data right into the HTML code of a webpage. This means when a page first loads there are actually no calls for image files since the data is embedded into the page. This not only saves time from latency lags, it also means the webpage appears to search engines as if there are no images to load (since there aren’t any), leading to the maximum image optimization score which improves the bottom line SEO. And since those base images load almost immediately the webpage itself very quickly settles to its final layout, allowing almost instantaneous user engagement and interactivity because WP QuickDraw waits for that complete but very fast page load before using asynchronous JavaScript calls to load the required, progressively higher quality required for each image. Of course, with the occasional slow internet connection, those lower quality initial images may be noticeably artificial as users wait for higher quality to appear. So Realistic Progressive Fade-In (RPFI), a WP QuickDraw PRO feature, applies decreasing transparency as the image quality improves to make the progressive display process appear more like an inherently high quality image naturally fading in from the background.

On the most advanced end of the feature spectrum is our patented progressive PNG technology, also known as pPNG (another WP QuickDraw PRO feature). Instead of creating multiple, progressively higher quality images for each imageset, WP QuickDraw deconstructs the highest resolution PNG image from that imageset into a high quality base image of 1/64th the original resolution and a series of extra data files which can be used to incrementally grow the base image into higher resolution representations, delivering a very high quality, full resolution intermediate image in 1/3 the time of the final image while still ultimately ending with a lossless recreation of the highest resolution image; and all with a total bandwidth less than that needed for that image alone. This means we retain all the great features of the lossless PNG file type while providing a dramatic acceleration in both actual and especially perceived image delivery. pPNG is a proven technology and we are finalizing implementation strategies into WP QuickDraw PRO subscriptions by the fourth quarter of 2018

Ready for WP QuickDraw PRO?