Optimal image size and weight for graphic design portfolio

Hi everybody! I am just starting out using Webflow and I am using it to create my portfolio as a branding / 3D designer. My site will feature a lot of full-width images and videos to showcase each project, image quality is really important to me, and i have a few doubts::

  1. what format is optimal? jpg? should I convert them to webp in webflow? or leave them as jpg.
  2. aspect ratio: what is the best aspect ratio for Horizontal images, and vertical ones? to ensure when changing screen sizes i sstill get most of the relevant part of the image in frame.
  3. what is the best quality in pixels?
  4. regarding videos: format, resolution, etc?
  5. any tip regarding what settings to use when exporting from photoshop or illustrator to achieve better quality/image size ratios?

Thanks for your help! having a lot of fun learning how to use the platform :slight_smile:

Here is my site Read-Only: Webflow - interactions

Hi @Ignaciobr you question is not related to WF but to principles of image optimisation. A this is very complex topic the best way to find answers for your questions is to use your favourite browser engine and start reading articles or watching videos.


Definitely not

is related to your design


depend on where you will host your video and how will be served.

No rules all depend on you to find best compromise between quality as website speed.

if you willing to learn something about image optimisation here is one tip

The bad news is that will take you some time to learn. The good news is there is many great resources on internet.
Good luck

1 Like

thanks! i will do a google search on the topic then, why is converting images to webp in webflow bad? i am curious about that.

what research you have done on your own??