Size and compression of original images

Community resources General
1

I’m working on a design agency portfolio website. The portfolio images have a max-width of 2112px.

What dimensions should the original source images be created at? I’m assuming, ideally, for large high pixel density screens like an iMac or Apple display, it should be 2112 x 2 = 4224px width. But I’ve been advised that as these are massive files, probably create images that are 2112px wide. Any thoughts?

I’ve been advised that the original source images should have very little JPEG compression – around 95%. So that the original images are very high quality. And then use loss less ImageOptim compression. But again, the files are massive in size. Any thoughts?

Does Webflow automatically compress the responsive image it creates? Is there a way to control or change this?

Thanks

2

Hey @mark2 :wave:
This article should answer your questions: Responsive images in Webflow | Webflow University

1 Like
3

Thanks. Yeah, I already read this.

It doesn’t say how to save the original source images: what pixel dimensions as a rule of thumb are good, or the amount of compression.

Anyone want to share what they do?

4

Hmm🤔 If you worries about image quality, just compress it on this best image compressor to WebP file: https://squoosh.app/ > after that disable for this image in Webflow “Responsive Image” checkbox:

image
image1942×1350 121 KB

5

For my original source images, I’m thinking of doing the following. Anyone have any comments on the plan?

  • My images have a CSS max-width of 2,100px.

  • I intend to create my original images at 2,700px in Photoshop.

  • JPEG images: I will not compress at all (max quality 100%), or a very high quality 95%.

  • PNG images: I’ll try to use 256 colours, but often PNG-24 bit.

  • I’ll then use ImageOptim for loss less compression.

  • Then upload, for Webflow to make the smaller responsive images.

  • I don’t plan to compress (much) my original source images, because I presume Webflow uses compression when making the smaller image dimensions? I don’t want to start with compressed images, to have them compressed again.

  • Does Webflow also convert and serve up Webp formats (if supported by the visitors browser)? In which case my original source images I’ll stick with JPEG and PNG

6

Hey, @mark2 based on you question please go through Responsive images | web.dev here is the information about the responsive images and you’ve already used an online application for jpeg optimization but alternatively you can try https://jpegcompressor.com/ it compresses jpeg image efficiently without losing quality with supporting different kind of formats.
I hope it will help you.