hal

I understand if you want full resolution for art, but my internet connection begs you to become familiar with an image compressor like TinyPNG or similar

it's cheap and easy, if you've got big files embedded in a page (like high-resolution images/video/audio), you can just tell the browser to only load them when needed

CSS has a property called image-rendering and one of the values is pixelated.

The image is scaled with the "nearest neighbor" or similar algorithm to the nearest integer multiple of the original image size, then uses smooth interpolation to bring the image to the final desired size. This is intended to preserve a "pixelated" look without introducing scaling artifacts when the upscaled resolution isn't an integer multiple of the original.

So if you want to have your pixelart pieces on your website keep their look when you make them bigger/smaller¹, image-rendering: pixelated is your best friend

1. assuming you use integer increments of size. I'm assuming most pixelart artists are aware that resizing to 1.2x or 3.6x the size is Not A Good Time but you never know haha

It turns out, @modernmodron has had Edgebug textures for the Intern Secretary Eggbug model this whole time! I've finally got my hands on those so now....

BAM

Get them here!

Also I've posted about these for the first time ever on my Mastodon account, so spread the word there too if you want

you should make them accessible to folks who are motion sensitive!

steps:

1. make a static version of your gif. i personally use imagemagick: convert 'button.gif[0]' button.static.gif
2. use HTML to switch between both versions depending on the prefers-reduced-motion property:

<picture>
  <source srcset="[ANIMATED VERSION OF YOUR GIF]" media="(prefers-reduced-motion: no-preference)" />
  <img src="[STATIC VERSION OF YOUR GIF]" alt="[BUTTON ALT TEXT]" />
</picture>

trick copied from Accessible animated content without the compromise, on tempertemper.net