So I've developed this website which looks really good, except compared to other websites, mine just looks a bit grainy and "pixeley". I appreciate this will vary depending on the type of screen you're viewing it from but is there a standard practice (i.e. CSS attributes) to fix this at all? Much appreciated. Todd
You could add the font-smoothing, and image optimization properties to your css properties -
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Before you do this though, you should check why your fonts and images are not rendering correctly, as especially fonts are not often subject to bad rendering, unless you are using downloadable fonts which are not professional standard, (fonts you found on-line, and not from a professional font service, or fonts you have converted yourself, without the creators permission).
Images are a completely different thing however, and many things could be causing the problem, the most common one these days is using a save for web feature, as these save for standard displays, (pre hd) and do not optimize for hi-dpi.
Also look at using srcset/picture elements, (with correctly created images) in html, and image-set in css -
https://drafts.csswg.org/css-images-4/#image-set-notation
Don't forget if you use the css properties mentioned, all still require the vendor prefixes.
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices