Streaming live at 10am (PST)

How do I format my images to maintain their resolution while also being responsive?

Hello all,
I’ve been using Webflow for about a year now – I’m still very new to code, but I am a design graduate. So I have all these ideas and no understanding of how to do it (typical designer).

I’m working on a personal website to showcase my work. I’ve dug deep into Webflow’s YouTube page and pretty much taught myself how to use it. I’d like to think I have a better grasp than most but I keep running into the same problems, questions, practices, etc. I’ve reworked my ideas numerous times, tried several class organizations, box-model techniques…

I don’t know where to go for my laundry list of questions because the videos/tutorials provided aren’t answering my specific questions. I would LOVE to have a one-on-one with an expert to dissect my site and clarify some best practices, Webflow understandings, etc., but that might be wishful thinking. In the meantime, here’s one of my questions/problems:

1. How do I format my images to maintain their resolution while also being responsive?
Ex. I have images cropped to specific dimensions to fit specific divs, but when they scale they become pixelated. Do I double the image dimensions to compensate for the responsive scaling? Is it something about my structuring (ie. divs vs image block)?

Please send videos, forums, anything and everything that can help me better understand these issues!
Thanks Fam,

Rooney K.

Here is my site Read-Only: LINK

They pixelate because on mobile they use one column and on desktop (I think you optimized for that) they use multiple columns. Always optimize images for their largest size (including responsive).

More on that:

I still don’t understand the ideal size. The resizing is dictated by the size of the window, right? So, I upload the image (in specific dimensions?) at the biggest size possible?

You upload images at the biggest size used on the site.

Images in one column (mobile) use more space and need a bigger size as your currently for multiple columns (desktop) optimized images.

It is easy to forget that, sometimes, you should consider images on mobile too. I forget that regularly, because mobile images are always smaller, right? Not always. :upside_down_face:

At the link I posted, you can read how Webflow handles images at different sizes.