Example. I've read somewhere it's because people upload them in too high resolution and the browsers' scaling programs aren't perfect. However, today I bumped into a distorted logo of equal size on this website.

So what can one do to avoid it?

  • 2
    What distortion are you referring to?
    – Rafael
    Jun 14 '18 at 21:19

I'm not sure what image you are referencing so to answer your question more accurately I'll list the main reasons why images get distorted in general.

Most common variable (for taking photos of raster images):

  • Poor camera shots or just poor camera (this goes over many variables like shutter speed, not keeping camera still, etc:)

Distortions upon high-quality raster images:

  • The most common reason a high-quality image is distorted has to do with scaling the image up significantly from its default resolution. Rarely you'll see distortions upon scaling the image down. If you do the usual case consists of scaling the image down without maintaining the image's aspect ratio.

Distortions upon vector graphics:

  • This one is the rarest you'll find as vector graphics do not display images with small pixels that make up a matrix-like grid but are rather displayed using a mathematical geometric equation consisting of ellipses, rectangles, and lines called paths. If you do find a "vector" image that's distorted that would be because a raster graphic is inside of the vector (It'll usually be in the svg code as something like <image width="778" height="300" transform="matrix(1,0,0,1,0,0)" preserveAspectRatio="none" xlink:href="data:image/png;base64,">) and displayed that way. In which other variables such as sizing of the raster graphic I mentioned above would cause the distortion.

I hope I answered your question.

  • Thank you, I think the last reason might be what causes the distortion on mstan.cz
    – foggy
    Jun 16 '18 at 13:52

Not the answer you're looking for? Browse other questions tagged or ask your own question.