Follow

why does text on a webpage stay sharp when you zoom in, even though images get blurry? (long, serious) 

images like PNG and JPEG files get blurry when zoomed in beyond 100% of their size. this is true of video files, too, and many other methods of representing graphics. this is because these files contain an exact description of what to show. they tell the computer what colour each point on the image is, but they only list a certain number of points (or picture elements - pixels!). if a photo is 800x600, it's 800 pixels wide, and 600 pixels tall. if you ask the computer to show it any bigger than that, it has to guess what's between those pixels. it doesn't know what the image contains - to a computer, a photo of the sky is just a bunch of blue pixels with some patches of white thrown in. there are many algorithms that a computer can use to fill in those blanks, but in the end, it's just an estimation. it won't be able to show you any more detail than the regular version could.

a font, however, is different. almost all fonts on a modern computer are described in a vector format. rather than saying "this pixel is black, this one is white", they say "draw a line from here to here". a list of instructions can be done at any size. if you ask a computer to show an image of a triangle, it'll get blurry when you zoom in. but if you teach it how to draw a triangle, and then tell it to make it bigger, it can "zoom in" forever without getting blurry. there's no pixels or resolution to worry about.

vectors can also be used for images, such as the SVG format. here's an example of one on wikipedia: upload.wikimedia.org/wikipedia
even though it's an image, you can zoom in without it ever getting blurry!

even though you can resize an SVG to your heart's content, it'll never reveal more detail that what it was created with. so you can't "zoom and enhance" a vector image either.

there are always exceptions to the rule. not all fonts use vector graphics - some use bitmap graphics, and they get blurry like PNGs and JPEGs do too.

so if vector graphics don't get blurry, why don't we use them for photos? to put it simply, making a vector image is hard. you need to describe every stroke and shape and colour that goes in to replicating the drawing. this gets out of hand very quickly when you want to save images of complex scenery (or even just faces). cameras simply can't do this on the fly, and even if they could, the resultant file would be an enormous mess of assumptions and imperfections. the current method of doing things is out best option.

why does text on a webpage stay sharp when you zoom in, even though images get blurry? (long, serious) 

@lynnesbian great explanation!

@lynnesbian why does lynne get smooches when i zoom in :blob_blowing_kiss:

re: why does text on a webpage stay sharp when you zoom in, even though images get blurry? (long, serious) 

@lynnesbian It's worth mentioning as a side note that most fonts contain "hinting" information which dictates how the vector data is converted to raster data eg for display on a screen. This is of particular importance at small type sizes, when just converting automatically would result in a less-legible glyph.

@lynnesbian
WOW, I literally didn't even know this was a thing, I just thought they had different pixel groups for different sized fonts or something. That's so fucking cool. Also this is such a great explanation sweetie!!! Proud of you for these threads and I hope you're proud of yourself for being the best tech teachy bunny boo on the fediverse! You're so amazing and I love you ❤️

why does text on a webpage stay sharp when you zoom in, even though images get blurry? (long, serious) 

@lynnesbian so this is why my friend, who made art for games and graphic design and stuff, did everything she could to make vector files for all of her art?

So that it could be used in any context and not be marred?

why does text on a webpage stay sharp when you zoom in, even though images get blurry? (long, serious) 

@magicalmilly yup! things like posters and books are often made using vector design tools

why does text on a webpage stay sharp when you zoom in, even though images get blurry? (long, serious) 

@lynnesbian Nice!

I remember her trying to explain it to me when we were roommates, but I was cooking dinner for us while watching youtube videos, so I only picked up bits and pieces.

Sign in to participate in the conversation
Lynnestodon

@lynnesbian@fedi.lynnesbian.space's anti-chud pro-skub instance for funtimes