Pain Point: WordPress Image Sizing and Responsive Images
November 9, 2019
One of my pain points with using WordPress is how the software generates different image sizes and applies that sizing to images uploaded using the Media Uploader. The WordPress solution is to define image sizes in the functions.php file. Then every time you upload an image, that image will be created on every one of those sizes you defined. This leads to creating images that you don’t need and creates bloat on the server.
About four years ago, I started regularly using responsive images in my projects for better performance. Most often, I use the resolution switching use case to provide images that look good on higher-resolution screens. I have implemented solutions with multiple image sizes and let the browser choose the best image size to display based on my suggestions
This week I revisited one of my pain points in developing with WordPress. The issue is with how WordPress generates image sizes when images are uploaded. Because I want images to look good in higher-density screens, I frequently use the resolution switching use case of responsive images to provide a higher resolution image and a lower resolution image.
The problem is that one of those images (low res) needs to be generated by WordPress. The WordPress solution is to define different image sizes that WordPress will use to resize uploaded images. The problem is that it applies every custom image size to every image uploaded so multiple images are generated, most of which are not needed. It takes up storage space on your server which can become a problem as more images are uploaded.
I like how Craft CMS handles this. You can define image transforms per image field that you add to your content types. This way there are no wasted images created. A friend of mine mentioned that Drupal does something similar.
I started thinking about this pain point this week as I was working on one of these sites. What I needed was a way to upload the higher-resolution image and then have WordPress generate a lower-resolution image that is 50% of that higher-resolution image. I did some research to see if someone else has solved this problem.
I did try out a plugin called WP Retina 2x. What I did not like is that I still had to define custom image sizes which did not solve the problem of multiple images being produced. What I would really like is a solution that can simply resize any image by 50% without having to define any custom image sizes that will be applied to every image.
I did find this article that might help me to come up with my own solution.
Update: September 14, 2021
Pain Point Addressed
For almost 2 years, I have desired an image solution for building sites in WordPress. I wanted a way to be able to upload a higher resolution image with an Advanced Custom Field and have WordPress automatically create a 1x version (half the size) that I could use in my templates. This solution would allow me to use any image size and not have to define a bunch of different image sizes in WordPress in the functions.php file.
This past week my wish became a reality. Ryan developed a solution and we worked together to refine it. It looks for ACF that has “2x” in the label text. I used it for the first time on the Canada Roadmap project that I mentioned above. I am excited to finally have this solution in my tool belt.