Loss of Imagequality when using "Cover-Option"

Design help General
1

Hi Guys,

i am rebuilding my portfolio site at the moment and am struggling with the “cover option” for images in the slideshow. Whenever i use the “cover” option for fullscreen images the image quality drops to a very low level. Especially the text drops down to a very low quality (unsharp).

https://preview.webflow.com/preview/koenigundsuess?preview=cb40d0731fcd6c65f2e8e8ade5816401

1483×922 236 KB
1517×928 369 KB

Hope you Guys can help me with that.

Have a great week.

Here is my public share link: LINK
(how to access public share link)

2

Your background image is 1280x800.

On any screen resolution above that… the image will scale up

and lose clarity.

I use minimum 1920x1080 for background images.

1 Like
3

This is a tough one.

Showing any image on a screen at anything different than its 1:1 scale will produce less good result than if you were reducing or enlarging its size in photoshop, for example. And the result will vary depending on many factors: browsers, OS, ratio, type of image. It will mostly be ok for the photo part of images, but texts will suffer, and thin things will suffer even more. Guarantying quality and consistency of images using Poster is complicated and has limitations. Live resizing involves a difficult usage and control of aliasing, that’s the main reason. There is nothing better than Photoshop to change dimensions, but it’s rendered, not live.

Now you could try things.

For the example you show, try to vectorize texts and export the full composition as a SVG file. SVG will retain images and vectors, and when elarged or reduced, could produced sharper vectors. That could also be a nightmare in aliasing.

A good practice would also be to use images bigger than their maximum final rendering. But here your texts are affected even when it’s the case, so it’s not a total solution.

You could also export a transparent PNG, use the purple bg as a color and center your image, always dislayed at 1:1 (not poster) You’d lose the cropped aspect on larger screens but would always display the real content at 1:1.

The ultimate solution here is the design approach, trying to show the important content at 1:1 scale.

2 Likes
4

Hi Vincent,

thank you guys for the feedback. I guess the idea to use 1:1 images and have the bg transparent seems very good to me. I will try this on all the images where it is possible.

thank you guys!

5

Yes, and I forgot to add: this makes sense because your images is not a background. It’s the main content. So what can be acceptable as a degradation for a background, in your case is not.

Also consider that a background is only CSS. HTML doesn’t even know you have an image there. On an accessibility matter, this is not a good thing. For example screen readers won’t see your images and you can’t put an ALT description on it.

CSS background should be for backgrounds and <img> for images.

6

I got two more questions here. When i use webflows slider, does it still count only as a background? Second question: When i use pngs, files seem to get very large. Do you have any tipps on that?

thank you so much

7

Each slide of a slider is a box. It’s your choice how to populate it. A background image for decoration, then text and image content as primary content. That animated part is only for the eye. Computers and search engines only see a series of boxes with their respective content, starting with the first slide and finishing with the last one.

Hahaha that’s the most open question you can ask :smiley: I coul write a book as an answer :smiley:

First, PNG is not PNG. I mean there are a lot of different ways to produce PNGs and their specs are wide. PNG can be 8bits total (with a 256 color palette and 1 solid color of transparency), or 8 bits per channel with a 8 bit alpha channel (24+8 32 bits), can be non destructive, can be destructive…

8 bit PNG is like a GIF. 32 bit PNG is for when you need a 8 bit alpha channel (very good and refined transparency). If you image is just a complicated graphic with gradients or a photo, JPEG is the way to go. Adjust the compression from 45 (very compressed) to 75 (almost unnoticeable compression) and you’ll get the best size you can have.

Read here when to use gif, jpeg, png, svg, and why: GIF, PNG, JPG or SVG. Which One To Use? — SitePoint

Also, my advice is to use Photoshop to generate jpegs and gifs, there is nothing better. My second advice is to always, always use a third party image optimizer. Among many I recommend ImageOptim ImageOptim — better Save for Web

I also like very much the brand new Optimage, by Vlad Danilov. He seems to be an image engineer and knows a lot about loosless image compression.

http://vincent.polenordstudio.fr/snap/hpap9.jpg

http://getoptimage.com/

You can make your own researchs too, the topic is endless and quite very important for what we do.

1 Like
8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.