The dos and don'ts of image resolution - Webflow tutorial

Image resolution simply refers to the level of detail captured in an image. Sounds fairly simple, but in practice, managing image resolution can get pretty confusing. That's why, in this video, we'll define image resolution, sizing images for your websites, and some best practices for working with both inline and background images - including how to properly balance image resolution with filesize.
----------
Get started with Webflow:
help.webflow.com/courses/gett...
webflow.com
/ webflow
/ webflow

[@sebobastiseppobas]

Please support automatic image variants (resizing/compression) for background images.

[@HeavyRiven]

Webflow is really perfect.

[@cweb1988]

why can't background images be done the same way as inline where it serves the right size to the right screen? Just curious. Cause that seems like the most important use case of that kind of feature.

[@davidstar2362]

thank you for everything

[@theseideasare]

I use webflow, but the I have to optimize images by myself. WebFlow doesn't actually effect much of the image size. I have used Wix in the past and their image resolutions and size are perfect according to size, as they use webp format. Like a 6 MB image is just 120 Kb on mobile, sad thing is that I can't say that for webflow.

[@maxwellflood5658]

How does this apply to images coming from CMS items? My client has uploaded massive images and the site is clunky as hell

[@Webflow]

What you can do is re-optimize your CMS images using something like tinypng.com or www.optily.co/ . Also, we've released a new feature in the CMS to help make sure your clients don't upload large image files: webflow.com/feature/set-minimum-and-maximum-fields-to-validate-submitted-images Hope this helps :)

[@user-yc5iy3bn5q]

so can my inline images never be too big bc webflow will scale it down? or does it use the original image as a "starting" point?

[@Webflow]

Webflow will do it's best to automatically optimize the image. More details can be found here: university.webflow.com/lesson/responsive-images However, it's best if you optimize your images before you upload them to Webflow. One of the best and free tools to use is tinypng.com Hope this helps :)

[@ElBeeEss]

Five years after this video was made, I'm wondering if it's still true that I can upload my original-sized images and Webflow will automatically resize them to suit whichever screen size folks are viewing my website from? Because when I do that, I always get a yellow triangle advising me my image is too large. Hmmm...

[@Webflow]

While you can still upload images (up to 4MB in size) to Webflow, the platform will do it's best to optimize it. However, it's always best to optimize it on your machine first before uploading to Webflow. Another solution could be to optimize and convert it to webp format. Here is more information on that: university.webflow.com/lesson/webp-conversion-tool Hope this helps :)

[@fuckartthisismylife]

u cats b funny.. luv it!

[@mybuddychad]

hahaha "or from graphic graphic designer who's assets won't even fit on dropbox"

[@hal-zeitlin]

vlads the dad

[@albertkoppelmaa7178]

What kind of web developer would actually find this useful, like 90% of video is just void of anything useful and basically just tells you to use Webflow, very misleading

[@Webflow]

The title said "web design tutorial", but as this is a Webflow-specific video, we've adjusted the title accordingly. Thank you for bringing this to our attention, Albert.

[@albertkoppelmaa7178]

wow, didn't expect you to actually do anything haha. Thank you guys. respect ++ keep it going this is how you deal with "haters"