Image text sharp on mac, soft on website

RapidWeaver
#1

I occasionally need to put screengrabs or other images containing text on my websites but they look much less sharp in Rapidweaver than the originals. In this example, the client has a 4-part infographic that I have screen-grabbed as 4 individual PNGs and put into a slider. https://gate-safe.org/training - the slider is near the top. The original PNGs are very sharp but here the text is slightly blurred / compressed looking.

The images on the website are very slightly smaller than the original PNGs so sizing isn’t the issue.

Any ideas what causes this?

Screenshot 2021-02-22 at 16.13.59
Screenshot 2021-02-22 at 16.13.591173×471 65.7 KB

#2

@manofdogz If there is a slider on that page it’s not working for me in Safari.

Are you using PNGs as resources or warehoused? I always use warehoused, so that might be part of the problem (just a guess)

Even a slight reduction in size can lead to less clarity of text. Any way to resize the images yourself? Or set the slider to it shows full size of the images?

1 Like
#3

It’s the rescaling applied to the image by the browser. I just checked the site and also downloaded the image(s) separately. You could move to JPGs, as they are rendered differently to PNGs.

However, I would suggest to resize the images to the final size with Photoshop (or similar) to avoid rescaling through the browser.

1 Like
#4

weird - slider’s working fine for me in safari - set quite slow as there’s a bit to be read! i’m not quite sure why the images are rendered slightly smaller - I’m using splider and new to it. Must be some padding somewhere or perhaps the container width is reducing the overall size

#5

I can try that but the difference is very minimal

#6

Correction. The slider IS working, but it moves forward so slow I thought it wasn’t working! People read at very different rates. Might be useful to also provide a manual way of moving forward/backwards.

1 Like