Best Practices for Image Assets in Webflow: Responsibilities for Clients and Developers

I follow these simple rules to address the requirements for image assets on the website when communicating with my clients. By following these guidelines and implementing the necessary optimizations, I can ensure that image assets are optimized for good performance in search results and adhere to best practices for accessibility.

Images I receive from client to use on the website should have:

— Proper image resolution

‍An image with an overly large resolution would be inefficient and can impact page loading times. The image with low resolution will look blurry and pixelated if covers area much bigger than itself.  Consider where the image will be used on your website to scale it accordingly. A maximum size recommendation is 1920 x 1080px for header images, but smaller images should be around 1000-600px width.

— Proper image size

Webflow’s limit for image uploads is 4mb. But the rule of thumb is the lower the better, as long as the quality of the image isn't compromised. The general goal is to keep all images under 200kb for better website performance.

‍* It’s achievable with proper optimization and compression which your web developer will take care of.

— Proper image format

• Use PNG format for images with transparent backgrounds.
• Employ SVG format for logos, icons, and other vector graphics.
• For all other images, utilize JPEG format.

* After uploading to Webflow, all JPEG and PNG images will be compressed and converted into the SEO-friendly WebP format.

— Image Content Considerations

It's preferable to avoid including text within images as it can be inaccessible to screen readers.

* If text is necessary, it's recommended to add it as HTML alongside the image.

It's a good idea to always double-check the images for any inappropriate or unprofessional elements. Let me share a funny story: I had a client whose website had a few images featuring a main character holding a can of Bud Light beer in work or office settings. Surprisingly, it took us a few months to notice it. This just goes to show the importance of being thorough and making sure the images align with the desired tone and professionalism of the website.

— Careful content placement within the image

• Consult with your developer when placing images in areas with specific ratios, predefined dimensions, or decorative elements.
• This collaboration helps avoid issues such as logo/text/badge/decoration elements being cut off or obscuring a person's face.

—  Background Images and Text Contrast

Consider colors that will have sufficient contrast when overlaying text on background images.

Following aspects are web developer's responsibility to handle and deliver:

1. Assets Compression: Compress all assets, including images, and serve them in WebP format for optimized website performance.
2. Image Alt Text: Implement proper alt text for images, following SEO and accessibility guidelines.
3. Mark Decorative Images: Identify decorative images and mark them appropriately to aid screen readers in skipping over them.
4. Complex Images: Provide additional captions or descriptions for complex images, such as charts, graphs, or diagrams.
5. Specify Width and Height Attributes: In the HTML markup, specify the width and height attributes for images to prevent content shifting and enhance user experience.
6. Eager and Lazy Loading: Prioritize loading above-the-fold images promptly, while lazy load below-the-fold images for improved page loading speed.