Automatic Optimization of Images (for Responsive Sites)

On uploading an image, automatically generate various sizes for difference screen size/device types.

  • Jason Zucchetto
  • Dec 13 2016
  • Shipped
  • Lee Fuhr commented
    January 17, 2017 22:47

    Would love more detail here. How much work should we do to optimize images before uploading?

    (Like, Squarespace does a great job of generating separate images for different media queries so you don't load the giant 1600px hero image on a 300px mobile screen, but I still run jpgs through JPEGMini before uploading them to Squarespace…)

  • Nelson Abalos Jr commented
    January 17, 2017 22:52

    @lee - Webflow already optimizes inline images:

    https://help.webflow.com/article/responsive-images

     

    however, for background images, we don't optimize those. its always a good rule of thumb to keep your images smaller than 300k. 

    Also, for any iconography, logos or logotypes, make sure to use SVG with as little points and colors as possible.  You wont need to embed the SVG code, but you can drag the SVG file into your asset manager just like other images.

  • Koen Spaansen commented
    January 18, 2017 20:35

    Also for background images indeed Nelson! This makes the traffic for Weblflow at least 10 times faster!!!

  • Eric Potratz commented
    January 20, 2017 17:28

    Guys its a little strange the automatic resizing only goes down to 500px. That is the size of where a lot of our images start! And they scale to 300 px, 200 px, 100 px, etc. There is a lot more size savings to be had with this scaling. We get dinged on Google Page Speed for mobile because we aren't serving smaller images when we should.

  • Marcio Nunciaroni commented
    April 19, 2017 17:37

    Good idea! I was just reading about this and would suggest the same.

    https://modpagespeed.com/doc/filter-image-optimize.html#resize_rendered_image_dimensions

  • Marcio Nunciaroni commented
    April 19, 2017 17:42

    I think Eric is right. Webflow already optimize the images but the minimum size is 500px.

    https://help.webflow.com/article/responsive-images

  • Luis Maroto commented
    September 20, 2017 22:26

    Good Idea !!!

  • Michael Parks commented
    April 13, 2018 09:36

    Background sooo needed, @nelso @koen, please add your votes over on https://wishlist.webflow.com/ideas/WEBFLOW-I-1073