Image Optimization

Design help General
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 Likes
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. Another tool I use all the time is Squoosh

4 Likes
3

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

1 Like
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

4 Likes
5

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

1 Like
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.

3 Likes
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

2 Likes
8

I am working on a plug and play solution for this. Let me know if this is something you might be looking for. Webflow CMS Image Optimizer

5 Likes
9

I’m interested @veermanhas. We have built a simple upload and resize tool for our clients based on the tinypng API, but then they have to upload, download, and then upload to Webflow again.

Cool to see that you might have a good solution for this :ok_hand: Not sure how you do it because the Webflow API has som limitations when it comes to images.

2 Likes
10

It does have those limitations that why we are working to solve it. You can go ahead and sign up on the website. I will email once we release the beta. :slight_smile:

1 Like
11

Cool! I have signed up. I know the API has some image upload limitations. Hope Webflow fixes this when they release the new asset manager.

2 Likes
12

Word!!

I definitely hope so!

2 Likes
13

I think this is awesome, though i firmly believe Webflow should have image compression and resize options build in the core. It’s a fundamental feature. Options for each image/imagefield to determine if it needs resizing and if you want compression or not.

TinyPNG delivers very impressive results for me as a webdev, but for clients it’s just a lot of hassle.

1 Like
14

Can you explain how to implement the TinyPNG API and integrate with Webflow

15

Webflow does not support any of the programming languages available for the API. So not possible.

16

Thanks for the response. Do you know any good method to optimize the images that I already uploaded

17

Why nobody use this: https://www.optily.co/

Everything is automatic :slight_smile:

18

@Fabian1 -

Except images on static pages which you have to replace with the received download and images that are inside Rich Text Fields which it can’t process. Oh and it’s not free and needs access to the API. Other than that it’s pretty cool.

1 Like
19

it can be useful for when you refactoring already published site where developer didn’t care about image optimisation in first place. But when you build site you get images from designers and give them instructions about dimensions and check them anyway as some designers doesn’t have clue that you cant place 5mb image on homepage. When you do all alone you will use already optimised images anyway. But it is good to know that there exist a service I can pay for if Im lazy. :slight_smile:

1 Like
20

Hey everyone this is the best web app for image optimisation and it can upload any file size no cap like tinypng. check it out: https://squoosh.app/