search

fabd / kanji-koohii

A web application to help Japanese language learners remember the kanji.
https://kanji.koohii.com
GNU Affero General Public License v3.0
224 stars 21 forks source link

Blurry images on the landing page #43

Open fabd opened 7 years ago

fabd commented 7 years ago

For small screens the images get scaled down and look blurry on higher DPI screens.

Sites like Dropbox get away with that because their illustrations are quite simple and "crayon" like so they scale down fine.

If I use x2 images then they get scaled down on desktop and would look a bit blurry too.

One solution was to use a 320-360px image so it does not scale down on most modern smartphones, but on desktop it looks just a little too small...

Using pure html / css would be a solution. Or maybe even SVG ?

I'm spending way too much time over this, so it's a nice-to-have until I hear more about it. I assume that visitors understand this is an image and the actual pages are not blurry.

faneca commented 7 years ago

SVG will be the best bet on the long run for adaptable icons and logos, we are almost there OTOH, another alternative can be HTLM5 img's srcset attribute to define a set of fixed size bitmaps (and then using css classes to ensure the size at which they are rendered is the one they are designed for).

fabd commented 7 years ago

Very cool. Unfortunately the example from webkit.org doesn't respond to the device emulation in Google Chrome dev tools. I tried changing the "DPR" (presumably that is the DPI setting) to no avail, so it's a little difficult to test.

Something I'll keep in mind when I come back to this. I am just secretely hoping nobody cares and I can work on other items :fearful: