Streaming live at 10am (PST)

Should I optimzes images before uplading them to my project?


#1

I know that webflow is automaticaly optimizing and resizing images for different devices. Should I still optimize my images before uploading them to the website? What if a client of mine will upload new images in the editor later? Are those images automaticaly optimized or the client should first optimize them?
Thx!


#2

Yes, yes, and more yes! :grin: Always do this. You want your images, whether photos or vectors to have the same dimensions. It’s not the gospel, but pretty close; especially with grid now available.

It offers easy organization and less tweaking.

  1. Just create a document in PS or AFF. Make size large for pics you plan to inside in middle of pages; like 1500x1500, dpi 600-300. If it’s for header pics; use the largest you can find, I have some at 4000x3000.
  2. Make sure all those big ones are about the same, they’re so big they don’t need an exact frame because they will scale down to most largest screens now, 2000.
  3. On export, just tweak the “Quality” to 75% or 80, depending the size you get.
  4. Typically, anything under 2MB for header photos is good.
  5. For those in page photos, I’d shoot for under 1MB, like 600 - 900kb, if possible.

Just throwing some ideas at ya. Hope this helps.


#3

Hey! Thx for the detailed answer. Just to make sure I understand you correctly - does webflow actually compress images? I am not sure that the client will be tweaking the quality of the images he wants to uplad to the site.


#4

Not actually compress your uploaded image per se, but it add variants of the images, incremented down to smaller sizes, those are compressed. Definitely, not compress with the fine tuning done in photo programs (where you can go extremely granular). But yes, there is a compression of variants. Here’s a document that you can bookmark:


#5

That’s awesome! I used to spend a lot of time tweaking Imgix settings to make images on my old website load faster. It was a pain.


#6

Yeah I know the feeling. It’s much easier these days. Hope it all works. Have fun!


#7

Thx! Your answers are always helpful and detailed. Apreciate it!


#8

You may be aware of this, but Webflow does not scale background images responsively.

I don’t reduce the quality at all out of photoshop / affinity or whatever image editor. I set the dimensions only at this stage.

Then I use https://imageoptim.com/mac. Workflow and for results are tip top. Large hero image results using lossy minification, 66% quality are 300-600k. No image should really be over that. If you don’t use this type of setting, the page speed warnings will keep coming.


#9

Oooh good one Oz, I’ll take a look at that source. Appreciate the tip. Thanks :wink:


#10

This​:point_up_2:t3::point_up_2:t3::point_up_2:t3:

If element = image . You’re fine.

If element = div block with image used as a background… OPTIMIZE THAT THING!!


#11

if element not image … find a way to make it an image ?:roll_eyes:


#12

If image (not) .svg, it better be portrait photography. PNGs and gifs are soooo 2016.


#13

Another great resource for optimising PNG’s or JPEG’s is https://tinypng.com/

I personally use their photoshop plugin which costs, but their website is free to use. Enjoy watching it crunch your PNG’s (with no noticeable loss to quality)


#14

Resizing yes. But for desktop webflow will use your original image (With small warning if the image is too big).

About clients. In concrete5 (PHP CMS) thier is a feature “Set max width” - than if the client upload 5000px X 5000px image the software auto resize this to {{max-width}} (1920px for example). Idea for wishlist (Usefull for blogs).

Anyway like @creativeiam said. Tinypng.com - photoshop plugin is very useful.


#15

I am a big fan of tinypng.com. Any png or jpg files exported from sketch can be compressed by half or more (depending on the image) without losing any quality. It is a free service, but worth paying for if you need a lot of images compressed regularly.