BEST PRACTICES

Working with images in your WordPress editor

WP QuickDraw features including optimized, user-responsive image sizing will be automatically applied to all PNG, JPG and GIF images between 256px and your tier size maximum on each of your rendered webpages unless WP QuickDraw senses that those features may represent a conflict on that page (such as with sliders and similar display features that just don’t work well with progressive image delivery). This means QuickDraw will override any fixed image resolutions you might specify through the WordPress editor. In case you want to turn off WP QuickDraw for any image or page, remember to specify your desired height and width, then …

For a single image when editing a webpage:

Option 1: Edit the image using the WordPress image editor for that image and then check the box  “Disable WP QuickDraw for this image”.

Option 2: Using the WordPress text editor, include the CSS class wpqd-disabled in the image tag for that image. For example:

<img class="wpqd-disabled" src="myimage.png" alt="Here is my image" width="400" height="400" />

For all images on a webpage:

Click “Disable WP QuickDraw for this page” in the right menu of the webpage editor (make sure WP QuickDraw is checked in your Screen Options at the top of the editor so you can see this box).

Disabling WP QuickDraw features for a particular image on your entire website

If there is a case where you want to globally disable WP QuickDraw features for a given image simply open that image in your Media Library and remove the check in the “WP QuickDraw: Enabled” box to disable it.

Enhance your user experience and website performance by using large, highly detailed, high impact images

1. Increase your Media Library file size upload limit AND your host server upload limit

This is is your first step if you’re going to load large and load quality. The bigger and higher quality your images, the higher your upload limit needs to be. There are really three limits to loading high resolution images with large file sizes. First, WordPress typically will force scaling of larger JPG images to a smaller resolution with higher compression. WP QuickDraw automatically disables this limitation so that your visitors can get the benefits of your image quality. Second, WordPress itself has a maximum file  size upload limit that you typically see in the Media Library upload window. Third, your host server may have an upload limit itself. If you are not familiar with how to increase these upload limits by changing your WordPress settings or your server settings you may need to contact your server host provider for instructions. However, we have found that the Increase Maximum Upload File Size plugin is a great tool. It will show both limits and will actually let you easily increase your WordPress limit (changing your server limit still requires accessing your host server).

2. Upload new images and replace your current images with higher resolution versions if you have them

In the past you may have only uploaded low resolution images to keep your website fast but WP QuickDraw entirely reverses that standard practice. Start thinking about quality and detail.  Take great photos and produce graphical images knowing that your users are going to be taking a much closer look at your images. Remember, WP QuickDraw will keep your webpages fast AND with quality while also providing that additional on-demand detail when your users zoom in [the TrueZoom feature of WP QuickDraw Pro]. In fact, any image you have that has a horizontal resolution of less than 768px can be replaced with an image over that limit to speed up the load time on your page. That’s right! Larger images will speed up your page! That’s because any of those larger images rendered by WP QuickDraw are actually smaller to start with so they load faster. However …


3. Don’t artificially resize images to higher resolution before you upload them to WordPress

Original quality and detail is important but scaling images to higher resolution typically just creates a bigger image file with no real detail. Whenever you can, try to make larger images with the very best quality. And especially if you have really great, clean original images you might want to upload them in the PNG format because if you have WP QuickDraw Pro you’ll be showing all that quality to your visitors. To emphasize that point …


4. Use the PNG image format for exceptionally clean images

There’s a reason 75% of all WordPress websites use the PNG format for at least some of their images. If your images are already very clean with very little or no noise then the lossless PNG format is the best for delivering that clean look even when zooming in and especially when WP QuickDraw Pro converts those to the much faster pPNG format.


5. Use image optimization and caching plugins and/or services

Optimization can convert your images into a significantly smaller file size without significantly compromising quality even when zoomed up. Caching can deliver even progressive images faster. WP QuickDraw uses different, complementary technologies compared to image optimization and caching but still integrates those advantages directly into a faster visitor experience.


6. Use your WP QuickDraw Dashboard to “game” your website for highest performance.

The Dashboard gauges show what percentage of your Media Library image files are WP QuickDraw “Enabled”. The higher your percentage, the greater your website performance because more of your images are being processed for faster page loading and faster visitor experiences. Increase that performance by a) Removing any lower resolution images that you are no longer using on your site; b) Reloading lower resolution images your site uses to be at least 768px in both dimensions; c) Getting WP QuickDraw Pro (4K or 8K) if you are taking advantage of images with resolutions beyond 2048px; and d) Keeping any global disabling of WP QuickDraw for images in your Media Library to a minimum.