Images blurry on Slider

Design help General
1

I am looking for a way to make the images on my sliders (near the middle of the page) not blurry. I have disabled the responsive image checkbox on most things down the page so those are looking better but I don’t see a way to fix the images on slides.

Thanks!

Here is my site Read-Only: https://preview.webflow.com/preview/misty-leiter-design-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=misty-leiter-design-portfolio&preview=a798f91eef574038c7465a7408c87481&pageId=60c27af14fe9ca1a664d653b&workflow=preview
(how to share your site Read-Only link)

2

Hi @technicolordaisy, thanks for your post.

It looks like you are using the images as background images for each slide, I might suggest to put a div block in each slider, make it 100% width and 100% height so that the div block is the full size of each slide like so: Webflow - Misty Leiter Desi...

Then apply flexbox with a center align and justify center styling, then place an image widget in each slide and show the image in an image widget like so: Webflow - Misty Leiter Desi...

I would try that to see if your images get any better, when using those images in an image widget you can turn off the responsive image feature, but that does not work for background images.

I hope this helps!

1 Like
3

Thank you for your quick response!

I updated the first “welcome screen” on the project but it doesn’t appear to have made much of a difference in how it shows on the screen. When I zoom in, they all look fairly normal but it’s just when it’s at 100%, it is still looking blurry.

4

Hi there,

Thanks for your reply. Another possibility for the blurry image is that the orignal image is bigger than the container that you are putting the image in, so the resizing downward in size can also cause distortion, you might try using a lossless image format like png and optimize the image size so that it “fits” the slide better and closer to what you are expecting.

Images can be tricky sometimes, if you use high resolution images, you can use the hiDPI setting in image setttings to show the images as high resolution for retina displays capable of high res view.

See this article for more info on image resolution in Webflow: Image resolution | Webflow University

I hope this helps

1 Like
5

Yeah, they should all be .png format already. Maybe this one is a lost cause. hmm

6

Hi @technicolordaisy, thanks for your reply, still with the images, not all images are created equal, I would play around with the image sizes and dimension and try to create some different sized images and see how those work.

It can be as I mentioned that the size of the original image put in to a different sized container breaks the aspect ratio of the image and that can cause blurring.

I know it can be tricky sometimes with images as the browser renders those and other factors such as styling of other elements or effects (blurs on the page or page filters) can also cause unexpected results.

7

hey @technicolordaisy !

rule of thumb for images

no transparency JPG
transparency raster PNG
and SVG for vectors (not always but when needed)

these help balance the file size down and the quality. (pngs are heavier generally)

opening up the images in the project they are obviously overly compressed. the text is not sharp at 100%. and that means that it’ll get worse when the image is smaller

do you have the original versions of the images?

8

Hello @Alkoreiel ! Yes I do have the originals.

9

that’s good @technicolordaisy !

try (one for now) to cut it in the same dimensions as before but save as max quality jpg

by the way what do you use for image editing?

After you save the jpeg, run it through tinypng.com and use the new version in the project.

and let’s see if it makes a difference

(also, as @cyberdave suggested, I’d use it as an image in a div and not as background. but that’s a different topic)

10

Still looks the same. (redid the welcome screen on the first slider) I was using jpg before on one of the first projects but someone suggested using png so that is why I switched. My files are being exported from Figma.

11

OK. now your file dimensions are HUGE! 1245*2121
probably WF’s compression makes them not sharp.

BTW the images look pretty good on my side. except some of the smaller text

let’s try this now.
Duplicate the frame you want to export.
change the frame to a height of, let’s say, 1000px.
and export the jpg (side note figma can some times mess up graphics).
does it give options for compression? I don’t recall right now & on my ipad I don’t get an option
and then tiny png again.

since you are in it try exporting an svg too

also if possible can you screenshot how blurry it looks?

PS if I go awol is cause I fell asleep. it’s getting late here

12

Awesome stuff @Alkoreiel one more thing, if the image is high resolution, the HiDPI switch can be used : Webflow - Misty Leiter Desi... to show the image at full resoution on retina devices.

One note also, the images actually look pretty good to me also on macbook retina screen, the images in the slider seem to already have been disabled for responsive images from what I can see: Webflow - Misty Leiter Desi...

1 Like