Streaming live at 10am (PST)

Images blurry once published


#1

Hi,

In Webflow designer, my images look sharp. Once I upload/publish my project, they are low quality and look blurry. I am using Chrome. (Same issue on Safari). It seems the image that is uploaded on the server is low quality, even though the image has a 2400px width resolution and is sharp.

Essentially I have this problem: Large images appear blurry on published site

BUT I am not using CMS to pull images. I am simply using an Image box (not background). I don’t have the option to uncheck “responsive image” (or at least I do not see it in the same spot).

For example on this page:
http://philipp-portfolio.webflow.io/philipp-fisch-projects-edits-design

The image is blurry (among others):

Can someone offer their advice on how to keep the exact quality of the original.

Thanks,
Philipp



#2

I don’t find it particularly blurry but I see 2 issues regarding your image quality:

  1. the image is not shown at 1:1 scale on your site, but is shown smaller. So the redimension happens on the fly and made byt the browser. This usually result in less than ideal quality. make sure your images are shown at the exact dimension they have.

  2. your base image is very large and compressed as a jpeg to 37ko. This is a lot, the image has many compression artifacts already, and that’s probably has an effect on point 1.


#3

Hi Vincent,

Thanks for your reply.

  1. How do I ensure that that the images are shown as the exact dimensions?

The jpg that I export from photoshop is around 450kb, so I am not sure why it is 37kb on webflow.

Note that I exported all the images as PNGs (to see if it would make a difference) and the problem seems to be fixed, but I don’t know why it is fixed… perhaps they are not reduced in quality when published?