4 ms·
Recently I made a small game at work called JPEG or PNG, for the front end team. Bootcamps tend to not focus on image formats at all, the results is all Figma i
by firefoxd 1y ago
Recently I made a small game at work called JPEG or PNG, for the front end team. Bootcamps tend to not focus on image formats at all, the results is all Figma images gets exported as PNGs and bloat the website. Devs often argue that the format is "sharper".
Anyway, my game consisted of a slide of images and we vote what's the most appropriate format. When when people got a hang of it, I threw in WebP and SVG. I talk about those last, because they can easily abused: i.e an SVG with an embedded png.
- import_gravity 1y agoOh, this is a great idea. I love it.
- perching_aix 1y agoAnd what were the results?
- firefoxd 1y agoBad at first until the pattern emerged. Solid colors, sharp lines, is PNG. Photo, 3d, landscape, is JPEG. I'm still trying to hammer it down for juniors who default to JPEG now.
- sunaookami 1y agoHuh, don't you learn these at school? I learned this in 5-6th grade in my country. Even learned basic HTML and how to create websites with tables... which was when floats were all the rage.
- bardak 1y agoSame here. It's not so hard, if your image isn't flat colours and has any "noise" use jpg.
- the_plus_one 1y agoAs an American that grew up in a rural area, this definitely isn't something that would've been taught in a public school here. At best, we had typing classes in middle school, and the (quite old) teacher insisted on two spaces after the end of a sentence, something that disappeared after we stopped using typewriters.
- dhosek 1y agoMore to the point, the two spaces after the end of a sentence is a consequence of the typographic style at the time that the typewriter was introduced where additional space at the end of a sentence was employed (this is most common in books typeset in the 18th and 19th centuries, although earlier and later examples exist). Despite what people will tell you, it has nothing to do with legibility for monospace printing, and an awful lot with 19th century compositors getting paid by the line and padding their paychecks by increasing spacing wherever possible. William Morris and his followers, direct and indirect, led to a contraction of word spacing and the elimination of the additional space at the end of sentences in emulation of the best printing examples of the 15th and 16th centuries.
- rconti 1y agoI learned.. how to type.
- Swizec 1y agoMy favorite real world example of this was adding a bunch of 2-tone graphics to a website that looked like hand-drawn sketches. The designer insisted they have to be SVG because vector graphics scale better. The SVG was 20MB. The PNG version at huge resolution was 20kB. PNG is really good when you have a few flat colors. SVG is really bad when you have lots of fine detail.
- kevindamm 1y agoI wonder how much you could have compressed that SVG if you stored the broad strokes and added the perturbations with javascript, after loading.
- afavour 1y agoClient side JS will always be slower than letting the browser render the PNG.
- pxoe 1y agoHave to wonder what those 20 MB SVGs were like and whether they could've been optimized as SVG still. Doesn't seem to add up that at "huge" resolution that PNG would be that small either.
- Swizec 1y ago> Doesn't seem to add up that at "huge" resolution that PNG would be that small either. Well maybe not huge huge. Like 1000px wide so they look nice on retina screens. The key is that these images were just 2 contiguous color areas. Black and transparent. PNG is really good for that because the compression algorithm works on the basis of contiguous color areas.
- pxoe 1y agoWas there any attempt to optimize SVG? If it was just a single object/path, it'd be pretty small (if it was optimized/simplified for curves/node count, it could be even smaller), and then it could be harder matching that size with PNG or it wouldn't be that much of a difference.
- breve 1y ago> Devs often argue that the format is "sharper". You can also use lossless WebP in place of PNG these days.
- Theodores 1y agoYou can get your code to list PNG or JPG and then get your server to serve webp. Browsers don't care about file extensions, they read the image headers. To implement this you can get nginx to generate the webp from the JPG or PNG. Then you get that cached by your CDN. If you need to change your compression levels then you can delete the cache on the CDN. You can use the varies header to see if webp is accepted. If not, serve the original. In this way people can save the hires JPG with a right click. You can also amp up the compression just for when the data saving flag is set. The best thing is that you can do all this with hardly any lines of code and the VIPS library to optimise it.
- paulddraper 1y ago> Devs often argue that the format is "sharper". And they’re correct. PNGs use lossless compression. JPEGs use lossy compression. (JPEG XL allows for lossless.)
- kllrnohj 1y ago> results is all Figma images gets exported as PNGs and bloat the website It's not just size but also decompression time. JPEG is way faster to decode which is also on the critical path towards time-to-display
- the_sleaze_ 1y ago> Bootcamps tend to not focus on image formats Can you tell me which university class you took that did?
- robertlagrant 1y agoI did a course on them at university. I can't remember what it was called.
- deleted 1y ago[deleted]
- fragmede 1y agohttps://web.stanford.edu/class/cs148/ https://web.stanford.edu/class/cs148/ would be a class that covers raster vs vector graphics, which should be covered in every computer science degree.
- ksec 1y agoWhich got me thinking, may be there should be a tool that shows results of compression and allow devs to choose which one to use? JPEG, PNG, WebP, JPEG XL and SVG. Even though I am pretty sure JPEG XL will win 95% of times.
- ericmcer 1y agoThe huge SVGs are probably a side effect of Figmas export to svg and people not knowing what to look for. I have seen some crazy inefficient exports from that.