I've seen the word a few times so I just have to ask: what is an artifact when speaking of image quality?

This video.

During the later stages you can see the compression artifacts in full effect.
To summarize what's happening: In order to achieve the jpg compression the image is split into blocks. Those blocks are analyzed and replaced with the best approximation from a set of "tiles" to save space. This approximation isn't perfect and any such visible differences are referred to as artifacts.

An in-depth explanation is, as always, available on wikipedia.

NotMeNotYou said:
This video.

During the later stages you can see the compression artifacts in full effect.
To summarize what's happening: In order to achieve the jpg compression the image is split into blocks. Those blocks are analyzed and replaced with the best approximation from a set of "tiles" to save space. This approximation isn't perfect and any such visible differences are referred to as artifacts.

An in-depth explanation is, as always, available on wikipedia.

Got it (at least the basics). Thanks, didn't think of googling it XP

This one's full of them, for example:

post #1344813

i whipped out a visual demonstration

Oh boy, my kinda topic! :3

With images, this is pretty much the reason why we prefer to have stuff as PNG here. That's lossless format, so there pretty much cannot be even unperceivable artifacting around and for digital artwork, filesizes are more than acceptable with modern connections.

However all up to this point has been JPG, most used lossy image format. Site also hosts GIF, SWF (Flash) and WebM files which have completely differend kind of compression on them. You read some of it in e621 wiki, as we actually tag most noticeable ones: compression_artifacts

GIFs are on paper lossless files, this is why tiny and short gifs can still easily be several megabytes, so technically they will not have compression artifacting. However they are limited to 256 colors, so you actually have to compress the amount of colors being used, which results color banding and dither artifacting.
Color banding is when you are looking at gradient and instead of transitioning smoothly from color to another, it turns into couple blobs of color instead (I guess post #1284678 shows this well). Dithering is used to minimize this, but if going too far, your whole image will have this noise, tons of individually seen pixels everywhere which doesn't look good either (best recent example is NSFW daddy shark at post #1396307, you can see even solid colored background seems to be moving).
https://en.wikipedia.org/wiki/Dither#Digital_photography_and_image_processing

Flash can also be lossless, if everything has been made with vector graphics, but essentially all flash files you see being released in later years usually rely on JPG files or Flash video instead, so those compression methods apply there.

With video, it would be pretty impossible to conviniently store and share it online losslessly like images, so almost everything you watch will be compressed. However that does difference quite a lot from image compression, instead of just JPG compressing all the frames (some flash files do this, resulting huge filesizes with visible compression like in post #1192333) what they do instead is save the main image as keyframe and then just save what is differend between that and next frame instead and then you just give specific amount of bitrate to tell the video on how much it should use data on saving keyframes and differences. Since the beginning where AVI and MPEG files were commonly used there has been tons of changes and alghorithms been improved by miles, but the basis is still the same. So, more complex stuff video has, more bits it needs to look like original and larger the file becomes. That's why Tasurics videos with mostly clean blue areas and smoothly moving objects compresses insanely well with modern codecs and thus also keeping quality really high is easy.

Really like Toms video about this one for most basic of explanations: https://www.youtube.com/watch?v=r6Rp-uo6HmI

Also with all of this compression, this is just the baseline, you can also do so much much more with them to further optimize things, like using custom color palette instead of web safe on with animated gifs or using constant quality mode with two pass on videos instead of just constant bitrate. Even with lossless PNG, you can do much optimization, lossless compression, this is something that Inkbunny does by default for example to lower the filesizes thus making storing and serving artwork even with highest quality easier. There's computer magic (or essentially math) behind these so that's why you can have image which would be 100 MB as lossless BMP take only 1 MB as lossless PNG.

Mario69 said:
Oh boy, my kinda topic! :3

Whoa, The educating is awesome! Not my thread but thanks! :D

Artifacts are the reason why JPEG and other lossy compression suck. In fact that's the reason why they're called "lossy" - because every time you compress anything into a lossy format, certain bits of data are thrown away to reduce the file size at the cost of quality. Compare that to lossless compression e.g. PNG, which has larger file sizes but has no artifacts (unless, for example you convert a JPEG to a PNG. Your computer cannot magically recreate data that it never had in the first place).

Unfortunately many artists upload to places like FurAffinity and Twitter which all compresses anything uploaded to JPG. Twitter's JPG compression is much lower quality than FurAffinity's, which is why art from Twitter looks horrible. Take a look at this image from Twitter:

post #1399708

Look especially at the red, e.g. his hair, notice all the blocks and the noise throughout the entire image? Art from FurAffinity is still affected by artifacts like this, but generally the compression on FurAffinity is higher quality so the artifacts are less noticeable.

Ever wondered why lots of memes on the internet have all the fuzzy grey shit around the text? That's because social media like Facebook, Twitter and Instagram all use JPEG compression, and many people repost memes they see, so every single time the image is recompressed, more data is thrown away and so the compression artifacts that are already there are amplified, eventually leading to all the grey fuzz you see on many internet memes.

Hope my post helped :3

Mario69 said:
(best recent example is NSFW daddy shark at post #1396307, you can see even solid colored background seems to be moving).

That's a fairly straightforward case, not really about too much dither, just wrong kind of dither. The main thing it illustrates is "don't use neighbour-sensitive dither algorithms like Floyd-Steinberg in animations". Using a fixed/'ordered' dither guarantees no 'pixel dancing'.

The choice is a tradeoff of course. Floyd-steinberg and other neighbour-sensitive dithers tend to represent smooth blends better, but AFAIK you cannot persuade them to be stable between frames.

You do have the option of dithering the characters with one dither algo and the background with another, but most people wouldn't go that far.

savageorange said:
That's a fairly straightforward case, not really about too much dither, just wrong kind of dither. The main thing it illustrates is "don't use neighbour-sensitive dither algorithms like Floyd-Steinberg in animations". Using a fixed/'ordered' dither guarantees no 'pixel dancing'.

The choice is a tradeoff of course. Floyd-steinberg and other neighbour-sensitive dithers tend to represent smooth blends better, but AFAIK you cannot persuade them to be stable between frames.

You do have the option of dithering the characters with one dither algo and the background with another, but most people wouldn't go that far.

Was mostly just trying to explain most things, but this is better explanation of this particular situation. Also mix up terms sometimes when I know them in finnish but not sure am I thinking correct word in english.

Main point still is that when you have to reduce the amount of colors, there's pretty much no way to do it perfectly, so there will be tradeoffs. Some of which will cause artifacts.

Technically it's possible to mix and match, but that would definitely be tons of pain for not much gain. You could also technically use completely differend color palette with each gif animation frame to achieve more than 256 colors, but that would require extra work, could easily cause compatibility issues and most likely would cause color shifting to happen especially at the beginning of the animation.

Wow that certainly helped:) Thanks a lot guys! Pretty sure i've learned more about the internet in less than a month here than in the rest of my life :p