Streaming live at 10am (PST)

Image Optimization

#1

Wondering if Webflow has plans to have automatic image optimization in the future when uploading photos. Or will I have to do everything manually?

#2

Are you familiar with what webflow does with images to make them responsive?

If not checkout ->

So really all you need to do is process the large image at the dimensions, DPI and compression level to start with. It’s easy to build a workflow for that. If you left that to webflow, as an automated process, some would be happy with the results and many would not.

I believe the way it is now gives the designer the freedom to choose the quality level that is important for their project.

If you want an online tool that handles the resize and optimzation for you in a browser, try kraken.io

2 Likes
#3

If I am not mistaken, this only applies to images, not background images

#4

I always wondered how this works, thanks for the link @webdev.

I have a tour company client who needs large-format images to promote their tours, and uses the editor to upload them. We use background images often in hero areas, and some pages were lagging badly, so I did some investigating.

A few things I’ve learned so far;

  1. The 4MB limit is the only “safety constraint” they get.
  2. The uploaded image is left unchanged as the source artwork ( which is good, if you’ve prepared it, but often not so good when clients are uploading their own art )
  3. Image elements use srcset to proved a range of resized variants for the browser to choose from. However, images applied as background artwork do not, you only get the uploaded image size.
  4. Image format ( JPEG v PNG ) is preserved, even in the resized variants. So if your client uploads a PNG that’s used in an Image, it’s resized, but still PNG and a 2x to 3x larger file size than needed for photographic images.

So in summary- you need to prepare the original uploaded image carefully. WebFlow will further optimize it for mobile devices, but the full-sized original will be used in standard desktop views, and in every background-image use ( even on mobiles ).

My current best practices are-

  1. Keep the original image dimensions to a minimum, for the largest expected desktop view.
  2. Optimize the file size for the image content. Photoshop does this well, where you can visually see the effect of different JPEG compression levels, and choose the best. There are other tools now which take this even further using artificial intelligence.
  3. Teach clients to always use JPEGS for photos, PNGs for logos.
  4. Teach clients basic image optimization, especially if their CMS upload are bound as background images to elements. Some of my clients use stock photo sources, and don’t have Photoshop, so I have them use Image Resizer for Windows, set to “Medium” size.

image

#5

I would also vouch for the reliability of tinypng service. It is easier to use than apps for windows in many instances.

#6

You are correct. I have clients as well that don’t understand this either. I ended up building a web app that they just login to, select the project they want resized / optimized images for, which section, and upload. They can even drop a zip file with multiple images. The app renames the images to make them internet friendly, changes the format if needed, resizes the image (creates multiple versions as defined), optimizes each size, saves the versions created, and lists them on the web page. They pick what they need and download. Then upload to site.

Hmm… Idea for service.

#7

Interesting- I’ve been building Webflow-CMS-integrated tools to fill a number of gaps there. There isn’t much support for managing images in the API, but I think there is just enough to automate image optimization and upload from a source file. Let’s connect by email and hash out some ideas. mike@sygnal.com