An Image Workflow
Marketing websites rely on a strong visual component. To communicate visually a strong workflow to manage images is required.
1. Use Big Images
Retina screens have dramatically changed how images have to be handled. A retina screen is a screen that has denser pixels than an ordinary screen. This means that more visual pixels are shown on a retina screen for the same number of CSS pixels as an ordinary screen. Due to retina screens, the default size of almost all images should be increased to twice the width needed on regular screens.
The nice thing about image optimization plugins is that they will reduce the size of images for non-retina displays, so your image workflow can stay simple and focused on retina sizes.
To properly size an image look at the width the image will take up on the screen in CSS pixels, and adjust your image to that size. For example, if an image is 320 CSS pixels wide, then you should use an image for that spot that is 640 pixels wide so as to properly accommodate retina images.
Some plugins specialize in serving retina images correctly. An example is the Perfect Images plugin. However, SPAI correctly handles retina images, so if you’re already using SPAI, you don’t have to use a separate retina image plugin. Whichever solution you go with, you must ensure the original upload is at least 2x the resolution of the displayed size.
2. Pick A Consistent Image Optimization Method
SPAI has three image optimization settings. From most aggressive to least, the settings are, “Lossy,” “Glossy,” and “Lossless.” Which setting you use will depend on the images you upload to your site. If you upload images that are already fully optimized and would start showing artifacts if they were further optimized, you should use, “Lossless.” If you upload images “as-is” or with minimal optimization, then you should use “Lossy.” If you are seeing image graininess then you can try Glossy. Whether you should use “Glossy” is usually a matter of trial and error. Make sure your team knows whether the expectation is to optimize images before upload or to have SPAI do it for you. You want to be as consistent as possible in how you optimize your images.
Common Image Problems
Let’s break down some of the most common problems, and identify how to solve them.
Blurry Images
Other than a broken/missing image, a blurry image is probably the second worst image problem you can have. This is often the result of displaying an image larger than its actual dimensions. The first thing you’ll want to check is the Image Resolution setting on the Image widget in Elementor. With this setting, you are selecting the dimensions of the actual image file, not the size the image will be displayed at. The displayed size is controlled in the Style tab with the Width and Height settings. The check here is to make sure that the Image Resolution is at least equal to the Width and Height. Otherwise the image will be blown up, creating a blurry image. With SPAI, you can leave Image Resolution set to Full, since it dynamically resizes the image on-demand to the correct size.
Blurry images can also be caused by image compression. Image compression tools and plugins often default to “Lossy” compression, meaning the quality of the image is reduced, but usually the difference is so subtle that no one will notice it. In our experience this works most of the time, but every once in a while an image will look bad. In this situation, it’s best to exclude that specific image from compression. For this task we like the plugin called Add class to Elementor Image, which allows you to add a class to the img element, e.g. “nocomp”. You then need to exclude this class from compression in the SPAI settings.
Lastly, even if the image resolution matches the displayed size, users on retina screens might find the non-2x image to be blurry. Ideally, retina screens should be served images that are 2x the displayed size.
Excessively Large Images
Excessively large images cause all kinds of problems. If the image is too big the user will see it load in, or even have to wait for it to load. These images will also take up unnecessary space on your server. Ideally, the max size should be 2x the maximum displayed size of the image.
Even if the image is the correct size, the actual file size might be massive. Sometimes design tools export images with massive file sizes. Usually, compression can bring the file size down to an acceptable level. As a sanity check, if any image is over 1 MB, it should probably be compressed before being uploaded to your site.
Design Not Achieved
Everything can be technically correct about an image, but if it throws off the design then there is still work to do. This might be caused by an image that is either too wide or too tall, throwing off the layout. Or the location of the subject in the image could break the intended design, or the subject could get covered by overlapping elements. Ideally each image placement should have guidelines about width, height, and subject placement. And don’t forget about transparency, which requires a PNG instead of JPG.
Another way this can arise is trying to use the same image file in multiple places when the design would be served best by separate variations of the same image. When possible, we definitely reuse images, but we have learned to make exceptions as needed. Trying to mask a large image and only show a small portion of it can lead to all kinds of problems, and we’ve found using a separate image leads to better results.
Image Checklist
Here is a summary of all the points to consider when adding images to your website:
- Check the image placement guidelines to determine the width, height, color, transparency, and subject needed.
- Before uploading, size the image to 2x the maximum displayed size. And ensure the file size is less than 1 MB, unless you have a very good reason for it to be bigger.
- For Elementor, ensure the Image Resolution is at least equal to the Width and Height set in the Style tab.
- For SPAI, leave the Image Resolution set to “Full” on Elementor Image widgets.
- If compression is making the image blurry, exclude the image from compression.
- If two use cases for an image are wildly different, consider creating an image variation for each use case.
- Lastly, check the image on multiple screen sizes and devices to ensure it looks good.
Conclusion
Images are essential for communicating your brand. With this guide you can ensure you put forward the best impression possible to your audience. Looking for more? Check out our previous post about website performance and image optimization.
