How do I prepare image files for upload to my website?

Unfortunately, the WordPress Media Library can be a bit … unsophisticated.

This means that especially on large or media-rich sites, things can become rapidly disorganized and difficult to manage.

Because your website may come to accumulate hundreds or even thousands of images in the years to come, the carpenter’s adage rings especially true:

“Measure twice, cut once.”

With a little bit of preparation, you can make your website’s media collection much easier to navigate and maintain.

1. Use a consistent file naming scheme

For example, you might prefix the filenames of all featured images with “Featured_Image_”; product photos might be prefixed with “Product_” or even “Product_Category_”.

Imagine having to scour your Media Library for image of a particular product you recall uploading roughly two years ago, and all of your image files are named something like “DSC-1295.jpeg”. Good luck!

Above all else, the goal is consistency, which will make it much easier for you to search for or manipulate a collection of related images at a later time.

2. Use JPEG or PNG and export at maximum quality

JPEG and PNG readily display and resize on virtually all devices.

In general, JPEG is best for photographs and PNG is best for graphics.

If exporting from Adobe Photoshop or a similar program, then we recommend you select maximum quality and let Imagify compress your image once you upload it to your website.

(In our experience, Imagify offers downright scandalous levels of compression with little to no loss in visual acuity.)

3. Use consistent dimensions and ratios

To help conserve resources, many hosts limit the size of any single file you can upload. (8 MB is a common cap.) For this reason, you might need to resize them prior to upload.

Generally, we recommend that you select a consistent set of pixel dimensions and/or ratio. Particularly for things like product catalogs or lists or grids of posts, it can be visually jarring if your images aren’t consistently formatted.

For example, in most cases, we typically size all of our images which will be used as Featured Images at 2,400px by 1,350px. (A 16:9 widescreen format movie ratio.)

Why 2,400 pixels?

For many years, computer displays shipped with a relatively predictable configuration of pixels. There were a few variations but for the most part, you were able to size a given image to exact specifications with a first-hand understanding of how it would look on any device.

Now, there are countless displays on the market and more being introduced all the time. Handhelds, tablets, laptops, desktops, “standard” density, “high” density (e.g. Apple’s Retina line-up) and much more.

2,400px isn’t a magic number; for us, it simply represents a “feels right” compromise between speed (files which aren’t too large and therefore slow to load) and detail, an image which will look good on a large display and a handheld. You could just as easily choose 2,500 pixels or even 2,000 pixels.

TL;DR

• Use a consistent file naming scheme.
• Use JPEG or PNG and export at maximum quality.
• Use consistent dimensions/ratios.
• Target a width between 2,000 and 2,500 pixels.