feat: compress media files #818

dpschen · 2021-10-03T15:40:52Z

dpschen commented

2021-10-03 15:40:52 +00:00

I created a new folder called "originalMedia" where I move all the uncompressed images.
I moved most assets to the src folder. This makes the build a little bit slower but has the advantage that vite will can add a content hash.

I converted llama-nightscape to jpg because I got better compression results with that. Not sure if that makes sense though (because of todays high dpi displays).

Used for SVG: manual lossy (!) compression with SVGOMG
I would have loved to manually check the layers and see if I could combine / remove some manually.
That's an optimisation step that SVGOMG obviously can't do. Sadly Inkscape seems to have some stability problems when opening these SVGs... weird.
I did not compress the "safari-pinned-tab.svg" because SVGOMG seemed to have some problems with it.

Used tool for oll other images: ImageOptim v1.8.8 (sadly just for macOS, but it simply combines many image compression api under one GUI, combines them sometimes, lets them compete and uses the best outcome).
I stripped all meta data with a lossy (!) compression of 85% for JPEG, 80% for PNG (yes PNG supports lossy compression) and optimisation level "insane".
I enabled all supported compression algorythms except Guetzli (time is just too crazy)

I compressed the wav file with ffmpeg -i pop.wav pop.mp3.

Note: I realised that the full-pride logo has a different outer offset that the other logo (from the circle around the llama).
This seemed to be not by intend.

I created a new folder called "originalMedia" where I move all the uncompressed images. I moved most assets to the src folder. This makes the build a little bit slower but has the advantage that vite will can add a content hash. I converted llama-nightscape to jpg because I got better compression results with that. Not sure if that makes sense though (because of todays high dpi displays). Used for SVG: manual lossy (!) compression with [SVGOMG](https://jakearchibald.github.io/svgomg/) I would have loved to manually check the layers and see if I could combine / remove some manually. That's an optimisation step that SVGOMG obviously can't do. Sadly Inkscape seems to have some stability problems when opening these SVGs... weird. I did not compress the "safari-pinned-tab.svg" because SVGOMG seemed to have some problems with it. Used tool for oll other images: [ImageOptim](https://imageoptim.com/) v1.8.8 (sadly just for macOS, but it simply combines many image compression api under one GUI, combines them sometimes, lets them compete and uses the best outcome). I stripped all meta data with a lossy (!) compression of 85% for JPEG, 80% for PNG (yes PNG supports lossy compression) and optimisation level "insane". I enabled all supported compression algorythms except Guetzli (time is just too crazy) I compressed the wav file with `ffmpeg -i pop.wav pop.mp3`. Note: I realised that the full-pride logo has a different outer offset that the other logo (from the circle around the llama). This seemed to be not by intend.

dpschen added the

kind/feature

label 2021-10-03 15:40:52 +00:00

konrad was assigned by dpschen

2021-10-03 15:40:52 +00:00

dpschen force-pushed feature/compress-media-files from dde1f982da to 88b6dd88f7

2021-10-03 15:41:42 +00:00

Compare

dpschen force-pushed feature/compress-media-files from 88b6dd88f7 to 955bd73fec

2021-10-03 15:52:36 +00:00

Compare

dpschen commented

2021-10-03 15:57:56 +00:00

Might make sense to exclude the originalMedia folder from builds.

konrad approved these changes 2021-10-03 18:47:48 +00:00

konrad merged commit b59b5def57 into main

2021-10-03 18:48:02 +00:00

konrad deleted branch feature/compress-media-files

2021-10-03 18:48:03 +00:00

konrad referenced this issue from a commit

2021-10-03 18:48:03 +00:00

feat: compress media files (#818)

dpschen commented

2021-10-04 12:43:10 +00:00

@konrad Didn't expect you to merge it right away :D

I guess everything is fine, just wanted some feedback regarding the points in the pull request description on top :)

@konrad Didn't expect you to merge it right away :D I guess everything is fine, just wanted some feedback regarding the points in the pull request description on top :)

konrad commented

2021-10-04 18:17:18 +00:00

Ah, I though it was fine as well :) Didn't understand that you were looking for feedback, sorry for that.

I converted llama-nightscape to jpg because I got better compression results with that. Not sure if that makes sense though (because of todays high dpi displays).

I think that's still fine. The image is mostly used on mobile devices (because that's where you loose internet more often than on other devices) and it should still look great in that resolution.

Sadly Inkscape seems to have some stability problems when opening these SVGs... weird.

That's interesting, I can open them just fine.

I did not compress the "safari-pinned-tab.svg" because SVGOMG seemed to have some problems with it.

That was actually generated when I created the pwa icons. I don't remember what tool I used back then though. Might be that led to some problems, the icon looked fine on my Safari tests though.

Note: I realised that the full-pride logo has a different outer offset that the other logo (from the circle around the llama).
This seemed to be not by intend.

That is correct, that was not intended. It looks okay though so...

Ah, I though it was fine as well :) Didn't understand that you were looking for feedback, sorry for that. > I converted llama-nightscape to jpg because I got better compression results with that. Not sure if that makes sense though (because of todays high dpi displays). I think that's still fine. The image is mostly used on mobile devices (because that's where you loose internet more often than on other devices) and it should still look great in that resolution. > Sadly Inkscape seems to have some stability problems when opening these SVGs... weird. That's interesting, I can open them just fine. > I did not compress the "safari-pinned-tab.svg" because SVGOMG seemed to have some problems with it. That was actually generated when I created the pwa icons. I don't remember what tool I used back then though. Might be that led to some problems, the icon looked fine on my Safari tests though. > Note: I realised that the full-pride logo has a different outer offset that the other logo (from the circle around the llama). This seemed to be not by intend. That is correct, that was not intended. It looks okay though so...

This repo is archived. You cannot comment on pull requests.

No reviewers