Retina-Scaled Images Still Appear Blurry
I scaled my image double-size for a retina display. The display dimensions are 350x357 and my image is 700 x 714. When I add the image to my page, though, it still looks blurry, even when saved as a high-quality PNG. What's especially weird is if I open the image separately in the browser and scale it to 350x357, it looks more clear in the image preview than embedded on the web page. I have no idea what's going on!
Image viewed directly:
Image viewed in webpage:
Scaling info in web inspector:
There was a bit of inspector fraud happening here. While the inspector told me the "rendered size" was 350x357, in reality it was 349.8 x 356.79 because it was inside a percentage-width container that wasn't quite hitting the 350px mark.
In addition this seems to be a Chrome issue as outlined here.
Poking around on StackOverflow got me to this answer which recommends applying transform: translateZ(0); to image elements to fix the blurriness. Not sure if that causes performance issues or not but I only have a couple images per page so I'll risk it.
- How to set iframe size dynamically
- Making a img appear/disappear in html5
- How to escape HTML
- Bootstrap label overlay
- Stuck showing my information taken from the input field
- Ant Design Table with vertical and horizontal scroll
- Two div blocks on same line
- How to allow 'Open in a new tab' when using ng-click?
- Applying zoom into point like Aseprite
- Specifying multiple targetOrigin uris in postmessage
- Get input field value from Elementor Pro Form
- How to Submit a form without reloading page
- How to determine if element is last or first child of parent in javascript/jquery?
- Moving mat-icon to left of expansion panel header title?
- How do I position the buttons at the bottom in the q-input field?
- Dynamically changing the attributes of a HTML element?
- Where do I get a "3 horizontal lines" symbol for my webpage?
- Escape </ in script tag contents
- Find html label associated with a given input
- border-box of input not working as expected
- Typescript error "Property 'value' does not exist on type 'HTMLElement'", "Property 'onclick' does not exist on type 'Element'"
- How to remove the text-decoration underline; from the span element inside the flex parent?
- Emojis in Angular html template
- How to make a delete button to delete an item, to which it belongs, from the list?
- Bootstrap tabs in Chrome extension popup
- <mat-toolbar> changes height of all page
- JavaScript: get custom button's text value
- redirect to appstore or google play
- Is there a way to add a blank data attribute to an element using JavaScript?
- Fixed element positioning relative to its parent