Looking for ways to compress big artworks without sacrificing quality

[Kie]

Sooo.. I have always exported my artworks in .png without paying much attention to how big the file ends up beinng.
But recently I've wanted to try using the Melonland gallery feature, and a couple of my artworks are too big!

What's the best way in your experience to compress 2D digital artworks without losing quality? I thought about exporting the artwork as a .jpeg instead of a .png but I'm unsure if that's the best method.

[Melooon]

I think loss of quality is an inherent part of digital art transmission and its something that should be embraced more than fought - art on the web is not art in a room, and it only truly becomes art on the web when it embodies the limits of the web 

HOWEVER if your basic question is whats the best way to post art with a high quality and small size, your best bet is webp - its the most modern format and does the best job at compression. I'm not sure how well supported it is on the Art Hub, but you can always give it a go!

For other formats, Id recommend using a program like Photoshop or Pixelmator and explicitly exporting for the web (both JPEG and PNG have pros and cons and you can try both depending on what kind of work you do, JPEG works best for photo-like images and PNG is better for line art), since those programs will do a lot of compression tricks for you.

I'd also note that images over 2000px wide will be compressed by the Art Hub anyway, and the Art Hubs compression is MUCH more brutal than compression you might do yourself 

[randomtangent]

i wonder as well.

i've never liked webp so i always find myself using JPGs or PNGs for every single image i have lol
though i've also been wanting to ask how to compress images too.

i'm mostly concerned on the file size of my website as a whole, i don't want it to go above 2MB (for whatever reason lol i just like it being lean) and PNGs seem pretty hefty compared to JPGs most of the time, though i haven't really gone in and done a thorough test myself on them.
most of the things i have are screenshots and badges, so not exactly line art but not a photo of a beach either.

[nobo]

The best way is webp, simply put. A lot of people don't want to hear it but if you have a lot of multimedia content to put on one page and you want it load quickly and be crisp and clean, it's the best way that provides the best user experience.

If you want to stick to your guns because you don't like it, fine, but if you're a reasonable person that just wants the page to load fast and be small, don't listen to everyone that tells you they are not a good option.

[splashy]

JPEG-XL, but support for it sucks at the moment. neither Chrome or Firefox support it in their current stable channels.
your best bet is to use WebP's lossless mode or to use PNG with a lower bit depth that can still preserve all the colours (and if you have one, the alpha channel) in your artwork.
SVGs can be minimized, which usually saves a marginal amount of space.
If your artwork has gradients, maybe you can try exporting it without the gradients, then using gradient functions in to recreate it in CSS.

[Kie]

Thanks for the replies everyone! You've all been really helpful 

[JetDungeonDragon]

I also vote on WebP. One thing I like to do is have thumbnails compressed with WebP and then clicking on them brings them to the full uncompressed PNG file. Fair warning, I find that WebP really starts dropping the ball on quality when used with resolutions below 500x500 or so unless you go max quality. Otherwise, 75% quality is indistinguishable to me.

[Paprika]

I like AVIF format personally, it's really neat but it lacks support for now. I think in a few years it could replace WEBP.

[boreal_cryptid]

i would like to expand this theme just a little, and say something not only about compression, but also other things realted to the gallery, if that's ok!

i'm not sure if it's for everyone, but the system i use myself is:

1. make a structure. my sorting is nsfw and sfw folders > folders by year. pretty simple, but it makes my coding process more painless. for example, if i code the sfw page, i don't need to make sure twice if i put there only sfw, as it's already sorted. the same with the years.

2. compress drawings that i upload to website. i use tinypng for it. before this, i've been uploading uncompressed images, but then my website became too big (everything beyond 60Mb is "too big" for me lol). plus, it made loading of the gallery page veeery slow, and not suitable for people with poor internet connection, even with lazy loading

3. loading="lazy" attribute in img tag. for everything that is too far away from the top of the gallery. i'm not using scripts to calculate how EXACTLY many images will be visible on the top: i check my gallery from laptop and mobile, and then just put the attribute to the rest that i don't see immediately

4. make a link (putting image tag inside of link tag) to uncompressed version that i host on filegarden. so if someone reaaally wants to see the full image in details, they can just click on the image. taget="_blank" is optional (opens a link in the new tab). it looks like this:

Code

<a href="filegarden link.png" target="_blank" title="click to see uncompressed version"><img src="year/img.png" loading="lazy" alt="alt text"></a>

some details:

i really, really don't like using scripts if it's for something important (like navbar or gallery). scripts are not EVIL or something, i just decided to myself to be a HTML person, so i would painlessly migrate + my pages would be available to users with no-script. but it's just my personal preference. like, who knows if old scripts will work in the future, eh? 

though i think lightbox script is pretty cool, even if i don't use it. this one by kaylee especially.

also, images in my gallery are square and have a limit in 200px (as a thumbnail, not the actual size), so they fit in a column/row structure. hovering image will show its true proportions. i know it's kinda SMALL, but for me it's enough. in desktop view, my gallery has 3 columns; in mobile - 1. CSS i used as a base is by solaria. square images previews are not for everyone though.

also i sometimes use img src generator if i need to add many images at once, since i'm lazy lol. 

due to ehh life circumstances, i really want to make sure my page will last, even if i will not be able to maintain it anymore. so, if filegarden will go down, at least i still will have a compressed versions to show. or if neocities images will go corrupted for some reason (unlikely, but...), my gallery will still have a links to filegarden. (i back up my full private gallery files for myself in cloud and flash drive anyway).

i'm not a pro in this at all, but i figured maybe it could be helpful for some!