Image Compression Configuration

Developer help
1

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:

Gigawatts-01-Cropped
Gigawatts-01-Cropped2415×1609 1.62 MB

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 :(

2

Here’s the GitHub issue I’m referring to: Image transformation with no compression/resizing looses quality · Issue #1360 · lovell/sharp · GitHub

3

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

Gigawatts-01-Cropped-Ghost
Gigawatts-01-Cropped-Ghost2000×1333 322 KB

4

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: Use custom hero banner only for home page · zoltanmaric/121gigawatts@14cfb94 · GitHub

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

1 Like
5

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

1 Like
6

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:

7

Seeing a similar issue, is there a way to edit the compression quality to 95 or 90%?

1 Like
8

I am also looking for an option about the image quality/compression. The default quality for JPEG files is 80% which is way too low for me. It has been a while now and I don’t see any other possibility than uploading png files images in order to preserve the image quality…

9

It seems like compression can at least be disabled now: Requisite sharp features/API to enable configurable image compression? - #4 by John

10

It has always been possible to disable - this is not new and has not changed. It’s all in the docs! :)