I have a deck that has about 2,500 cards and each card has about 5 images in it. The images are screenshots from my iPhone 13 Pro Max. When I review the cards on my iPhone, the images are very clear, however when I review the same cards on my iPad Pro 11” M4, the images are no where near as crisp/clear. I have tried resizing the photos for the iPad by using img { zoom: 50%; } and also tried img { max-height: 50%; max-width: 50%; }, which did help make the images appear less blurry, but the photos are still not as clear as they are on the iPhone. I have even tried going down to 30-40% for the img zoom on iPad.
Is there any way I can further improve the image quality on the iPad and make my images more clear?
Doesn’t it all come down to the image quality of the screenshot itself?
If the images are small and low resolution / PPI and you make them bigger or put them on a display with higher resolution / PPI, they will be blurry. Anki isn’t doing anything to change the resolution of the image after you attach it to the note.
This is a bit outside my wheelhouse, but take a look at the size (pixels x pixels) and resolution (pixels-per-inch) of the files – compare that to the screen size and resolution on your iPad.
Your phone has a scale factor of 3x, so the images would need to be 33% of their original size to approximate their original scaling. The iPad and phone screens don’t have the same density, so the iPad won’t be able to display an image of a given physical size as crisply as the phone.
At first I thought your response made sense until I went and looked at the same cards on my laptop (windows). The exact same images on my cards appear much more clear/crisp compared to the iPad (ie, without even scaling them down to 33%). This seems so odd to me because the iPad has a better resolution OLED screen… why would the images appear better on my computer even at a larger/non-scaled down size? Is it something to do with anki mobile?
On a higher-resolution screen, a lower-resolution image will appear blurrier than if you put the same image on a lower-resolution screen. The higher-resolution screen can “do more” with high-res images, but it can’t “fix” low-res images.
If the computer is showing the image at the same size or smaller than the iPad, then I would not expect that. Would you be able to take a photo of the iPad and computer together so we can see what you’re seeing? If you could identify the card so I can search for it in your AnkiWeb collection, that will help me try to reproduce the problem.