Image sizes management in WordPress themes

Image sizes are surely one of the most important concepts to keep in mind when developing a WordPress theme. If you’re new to theme development, just know that every time that you upload a picture for your post or page to the Media Library, not only the original image is, in fact, uploaded, but also a number of scaled down versions of it are generated on the fly and stored. We call each of these versions an “image size“. There is no limit to how many image sizes you can create; as a matter of fact, WordPress itself declares three out of the box. For a particular use case, using a scaled down version of an image instead of the oversized original copy can really make the difference when it comes to evaluating a website performance. For this reason, most of the themes out there, both premium and free, declare their own additional image sizes. There are potential problems with this approach. The more image sizes the theme or plugins you’re using define, the longer it’ll take to complete the upload of an image, since more additional images will need to be generated, making the overall file size of your uploads folder increase significantly, and very fast too. You also have to consider that themes are designed for masses and worst case scenarios, and as such most of the image sizes that are created will end up never being actually used. With our theme Fenix, we have chosen to take a slightly different approach. Instead of defining a huge amount of image sizes, we’ve chosen to give our users the power of selecting which image size to use in each context. Basically, every time we define an image upload, or generally when the theme uses an image, we also present the user with a select control that allows them to choose the image size that’s most appropriate for the use case. If you still need to create more image sizes, a plugin such as Simple Image Sizes can come in pretty handy in helping you to create new images with just a few clicks, without touching any code: images generated with that plugin, will be automatically shown in Fenix image size select controls. The same happens with content blocks available in our page builder Brix: blocks that have image upload controls also allow you to select which image size to use in that block. This is an approach that we’ll likely further experiment with in our future themes, because it puts users in control of which image sizes are being used on their website, and also optimizes the load on the server: everyone likes a win-win, right?