- After your subscription is complete, navigate to the My Account page and then to API Downloads. Download the WP QuickDraw plugin zip file to your device.
- From your WordPress Admin Menu (left column of your WordPress Admin page), select “Plugins -> Add New”.
- At the top of the page, click the “Upload Plugin” box.
- Click the “Upload File” box and navigate on your device to select your downloaded WP QuickDraw plugin zip file, then click “Install Now”.
- After WordPress has installed the plugin, click on the “Activate” button that appears.
- Back to your WordPress Admin Menu, go to Settings -> WP QuickDraw.
- Copy your WP QuickDraw Master API license key from your WP QuickDraw confirmation email, paste it into the license key box, then click “Activate”. The activation status should now show “Activated”. Click on the Save Settings button. You can also find your Master API license key in My Account.
- If you are using a caching plugin, please make sure to purge/clear your WordPress cache.
Most of your published website images will now automatically show WP QuickDraw features after zooming either with pinch-zoom (mobile) or ctrl-mousewheel (desktop) on those images (WP QuickDraw will not engage on all images - see the FAQ below). After the higher quality image has loaded you will see the WP QuickDraw icon. You may need to clear your browser cache to refresh the page load. This icon does not do anything on desktop devices other than show that the higher quality image is loaded. On mobile devices (phones) this icon serves as a link to load the higher quality into a new page for zooming.
Absolutely!
For many years the typical practice for WordPress sites has been to set higher resolutions for initial images upon page load so that just in case visitors zoom up they won't be disappointed with low quality. But that means a much higher bandwidth requirement and therefore a longer delay for your page to be displayed because all those higher quality images are delivered whether your visitors zoom on them or not.
WP QuickDraw intelligently detects when your visitors actually want to see your images with higher quality and larger size. Most importantly, it does this one image at a time because that's how your visitors are interacting with your website! If they don't zoom on or around other images on a webpage then that's an indicator that there's no need to deliver enhanced quality for those image. And that means ...
You no longer need to set higher resolution and/or higher quality images for your webpages beyond what visitors can see without zooming. Since image files typically take the most bandwidth, this means your webpages will load faster, your customers are happier and your SEO rankings are higher.
Yes! WP QuickDraw is a 100% complementary technology to other plugins. At it's core, WP QuickDraw operates on the image files in your Media Library. If you have your webpages cached, your images optimized and even if your images are available on a CDN and callable by your webpages then all the better!
Most responsive design technologies including themes apply "imgset" and "sizes" attributes to images so that upon resizing a browser window, and sometimes even upon zooming, the browser requests and displays progressively higher resolution versions of all the visible images or just those visible in response to lazy loading features. WP QuickDraw does not impact these technologies at all until and unless your visitor zooms on a visible image. At that time WP QuickDraw will jump right to downloading the highest resolution image available to avoid any intermediate progressive image downloads. After all, if a visitor zooms in on an image it's a safe bet that they want to see the highest quality as fast as possible.
WP QuickDraw automatically applies WP QuickDraw enhancement and TrueZoom to all images on your website represented by an <IMG> tag and which meet the following criteria …
Minimum WPQD Width (px): 300
If a website image native width is less than this value then it typically means you are not wanting your visitors to see that image with higher quality or magnification. Examples are icons, logos and thumbnails. Note that this is not CSS width but actual width of the image source.
Maximum Length to Width or Width to Length ratio: 3.0
Images which are especially wide and short, or tall and narrow, are typically some type of banner which, again, you may not want your visitors to see with higher quality or magnification. A higher ratio will include WP QuickDraw features on more of these images.
Global TrueZoom: enabled
TrueZoom is the feature of WP QuickDraw that allows your visitors to zoom beyond browser zoom limits after the higher quality image is loaded. "enabled" is the default setting for WP QuickDraw. You can globally disable the TrueZoom feature so that only WP QuickDraw enhancement is globally active. You can still enable TrueZoom on individual images using the <IMG> Tag Customization Switches.
<IMG> Tag Customization Switches
Both WPQuickDraw and TrueZoom will automatically be applied upon activation. However, you can add the following attribute switch anywhere inside any <IMG> tag from your WordPress editor on your website. These switches will override all global or default settings when added for that particular image ...
<IMG wpqd=”off” … remainder of attributes> Disable all WP QuickDraw features
<IMG wpqd=”tz-“ … remainder of attributes> Disable TrueZoom
<IMG wpqd=”on” … remainder of attributes> Enable QuickDraw and TrueZoom
<IMG wpqd=”tz-“ … remainder of attributes> Enable QuickDraw without TrueZoom
1. If no images on your website are showing WP QuickDraw features then please make sure WP QuickDraw is activated in your WordPress Admin Menu -> Plugins directory and that your license within WP QuickDraw Admin Menu -> Settings -> WP QuickDraw shows “Activated”.
2. Only those images qualified for WP QuickDraw features according to WordPress Admin Menu -> Settings -> WP QuickDraw will have those features applied.
3. If you added <IMG> Tag Customization switches please make sure they are only in allowed formats.
4. WP QuickDraw works by analyzing the image source provided by the <IMG> tag and then searching for the original, higher resolution image filename associated with that initial image. If WP QuickDraw can not find that original image or if the initial image is already the highest resolution available it will not apply WP QuickDraw features to that image.
SPECIAL NOTE: WP QuickDraw operates on imagesets naturally created by WordPress when you upload images to your WordPress site. These imagesets include lower resolution images of your uploaded image that have file names with -AAAxBBB added to them, where AAA is the width and BBB is the height of the lower resolution image. It is good practice to upload the highest quality image you have and then use one of these lower resolution images generated by WordPress for your webpage image so that it loads fast. If WP QuickDraw does not detect a lower image in this format then it will assume that a higher resolution image does not exist and therefore will not operate on that image.
WP QuickDraw uses the WordPress "imagesets" created in your Media Library and especially the original high resolution image you uploaded. For better quality just upload and replace an image with higher quality. Remember that you may need to clear WordPress cache (if used) and browser cache to see the change in your browser. Also, we recommend against using imaging software to upscale an image to higher resolution. There is likely no additional detail by doing that but it can still slow down the experience with that image.
WordPress and possibly your server hosting company can apply limitations on the file size (ie how many MB or MegaBytes) of uploaded images. Do an internet search for tips and even free plugins using the phrase “Increase Maximum Upload File Size” and you’ll find plenty of options.
WordPress also typically limits image resolution to 2560 horizontal pixels. If you upload a higher resolution image then WordPress will automatically scale that image down to 2560. To override this limitation, go to WordPress Admin Menu -> Appearance -> Theme Editor, then look in the right column titled “Theme Files” and select “Theme Functions” (it may also show as “functions.php”). Once in the editor, scroll to the bottom and add this line just before the ?> ...
add_filter( 'big_image_size_threshold', '__return_false' );
After you save the file your WordPress site will allow you to upload image resolutions greater than 2560 horizontal pixels.
WP QuickDraw replaces typical lower resolution images with the highest resolution version of that image in your Media Library. However, WordPress and other plugins can also create other versions of your original image such as "thumbnails" and "featured images" that may be cropped to a different shape. Using these images will show a shape change from the initial image to the high resolution image. It is important that you only use lower resolution versions of your original image without cropping or changing orientations to avoid an apparent change between your images other than higher quality.
More Questions or Need Support Not Answered Above?
Thank you for contacting HifiPix! We’ll be in touch soon.
Your HifiPix / WP QuickDraw Team.