Image Compression Configuration

Hi gang!

I’m setting up my first ghost site, and I really like it so far! This is my site: https://121gigawatts.org

One issue I ran into, and which has already been asked once or twice on this forum, is how to configure image compression.

I’m unhappy with the JPEG pixelated artifacts on my hero banner particularly on the “GIGAWATTS” font. The original actually has a rather homogenous colour, there’s no texture to it:

Original:

I’ve seen you guys raise this issue already on sharp’s GitHub (sorry, I can only post 3 links in my first post). There you mention that "The more granular configuration will be available if users find a need for it eventually. " so I was wondering what my options are here.

As a side note: I find the way you guys handle this forum quite strange. I linked 2 instances of the same question above. In both cases, instead of sharing the solution on the forum, you guys ask the original poster to contact you via e-mail. That kind of defeats the purpose of having a forum in the first place, doesn’t it? And it makes every new customer have to go through asking the same question again :frowning:

Here’s the GitHub issue I’m referring to: https://github.com/lovell/sharp/issues/1360

And here’s the problem image, as resized by Ghost automatically:

Alright! I went ahead and manually resized my image to the w2000, w1000, and w600 presets, put them into my forked casper theme in /assets/images, created a custom CSS class just like .responsive-header-img in header-background.hbs, and used direct links to my resized assets. See here: https://github.com/zoltanmaric/121gigawatts/commit/14cfb94d77972e7a01efe6e9717d00c787ba8e5a

I’d still like to hear what you guys think about this approach, and if you can suggest some improvements :slight_smile: Thanks!

1 Like

Sounds like you already figured out the correct and expected way to work with images :wink:

1 Like

Hi John, I found a way to make this work for this particular image by making it part of my theme, sure. However, the underlying issue still exists, and still affects any image that a user adds to their blog post: the image will be compressed with 80% quality by default, which often causes visible artifacts on the resulting image, and there’s no way to affect the target compression quality :confused: