search

eddiesigner / liebling

Beautiful and clean Ghost theme that is easy and comfortable to use. To get the latest version please head over the releases page 👉🏼
https://github.com/eddiesigner/liebling/releases
MIT License
1.27k stars 602 forks source link

Is it possible to improve website speed by resizing images after uploading? #480

Open paulknulst opened 2 years ago

paulknulst commented 2 years ago

Hi,

first: You have developed a very nice theme that I use as a baseline.

I want to know if it is possible to have more versions of images after I upload them as a header in any post. I saw that in the package.json there are several formats defined: xs, s, m, l, .... but I think that they aren't used everywhere in the app. For example, on my blog at knulst.de, I got several issues with properly sized images as you can see in this lighthouse report

Another post from me which contains several images has this lighthouse report

Is there a way of changing the theme programmatically to support generating more versions of the image AND using the best size for different screens?

I'm not sure if I am doing it wrong. Maybe I upload the wrong images with the wrong sizes or format (For example, I use png instead of webp).

If there is anything I can do I would be happy if you can suggest anything.

eddiesigner commented 2 years ago

Hi,

According to the lighthouse report, the biggest problem in your case is related to the unused Javascript that is loaded by Ghost automatically, most of that code is related to Portal, unfortunatelly I can't do much about it since the theme doesn't have control over that.

As you can see in the hero template, the theme uses the different sizes available for the hero image in the srcset attribute. However, the browser is responsible of choosing the right one based on different factors such as speed connection, window size, pixel density, etc. If the browser already has the biggest image in cache then it will use that one regardless of the suggested sizes, the same happens if you are using a retina screen or if your connection is good enough.

There is in fact an issue with the Unsplash images that are used as feature images, the issue is that Ghost doesn't generate smaller versions of such images, if you want to use them I would suggest to download the image first and then upload it manually instead of just selecting it in the Ghost editor.

paulknulst commented 2 years ago

Thanks for the answer.

I already optimized some things, used webp images instead of jpg, and try to increase size. Unfortunately, the lighthouse still says that the images are in the wrong format and can be adjusted.

Maybe I try to change the different formats to w300, w400, and w500 to have much smaller steps or test other things.

What I found weird is, is that if I have a look at both images in the report that are marked I can see that the hero image has the src="https://www.knulst.de/content/images/size/w2000/2022/09/image--65-.webp" but the article image in the bottom uses the src="/content/images/size/w600/2022/09/image--56-.webp So one is using w2000 the other one uses w600 and I do not understand why I can have them aligned to use the appropriate image.

-- update: did not look at the desktop version, they are always w600.