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).

Start evolving your website by using large, highly detailed, high impact images

1. Increase your Media Library file size upload limit

This is is your first step if you’re going to load large and load quality (a simple internet search on increasing your WordPress upload size will help if you’re not familiar with how to do this). The bigger and higher quality your images, the higher your limit needs to be.


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. 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.


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 fasters. WP QuickDraw uses different, complementary technologies but still integrates those advantages directly into a faster user experience.