23 lines
2.8 KiB
Markdown
23 lines
2.8 KiB
Markdown
|
---
|
||
|
|
title: "Lynne Teaches Tech: Why does text on a webpage stay sharp when you zoom in, even though images get blurry?"
|
||
|
|
author: Lynne
|
||
|
|
categories: [Lynne Teaches Tech, Originally from the Fediverse]
|
||
|
|
tags: [Lynne Teaches Tech]
|
||
|
|
---
|
||
|
|
|
||
|
|
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: <https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg>
|
||
|
|
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.
|
||
|
|
|
||
|
|
[view original post](https://fedi.lynnesbian.space/@lynnesbian/101942900073557509)
|
||
|
|
|