Skip to main content

FAQ

Why is the Quality so low for higher density (jpeg)?

A modern phone open uses a multiplier for fonts and other sizes because, normal 16px size (basic Browser 1rem size). Binary images can't be upscaled, compared to vector font. As result 1 pixel web would be displayed on e.g. 2x2 pixel on a high density display (phone). The image would look not that good. source supports higher density's won't show 2x2 or 3x3 blocks, it will use edges according to the image and high density makes the low quality invisible. Sometimes looks better, because high quality looks over-sharpen. (Hope that helps without going into jpeg algorithm.)

My framework uses rem for max width and breakpoint

Images are pixel based and rem is simply a flexible browser value that is converted into pixel. Default is 16px is 1rem and can be changed in your browser settings (font, not scale). Binary image won't get more pixel based on that browser attribute.

What are the best settings?

Hard to answer question. Every image needs time to be generated (normally tiny files). So density 3 x 3 breakpoints (+ 1 x 3 default webp + 1 fallback) end up with 13 images that need to be generated.

Is webp safe to use?

Yes, you have a fallback img for ancient browsers, but is similar to picture in next FAQ entire.

https://caniuse.com/?search=webp

!No! IE Support out of box

You need IE, you need a picture polyfill and maybe different projects

https://caniuse.com/?search=picture

Not every browser supports loading

Yes, but most of them do. Even Safari as last major browser has it in technical preview. If a browser doesn't support it, it will load instantly. JS would need additional bandwidth and execution time on exactly the problem old devices and also added to any new device (browser).

https://caniuse.com/?search=loading

What can I do with ratio?

Force a certain aspect ratio like 16:9 from a lot of screens. nice for same news header image size. It uses cropZoom from grav.

My source image is small...

Every density and breakpoint checks the source fiel size. The image won't upscale images. Binary can't really be upscaled without some kind of neural network trained with a lot of images.

Is Windows server supported

No, and it will properly not work. Windows filesystem is messed up nightmare, and I have no device to test it (and also no interest). Linux and macOS should work without any problems.

online discussion