Resize unsplash image width query to reduce download for smaller devices

[ichitaka]

Issue Summary

This issue is referencing the wrongfully closed issue #12245 that still persists. As the Unsplash feature is integrated by default, one would expect that the images are served responsively. The Unsplash API supports such queries, but Ghost returns the images independent of device screen size.

Given that images that are too big are impacting UX as well as SEO, this is a critical feature for users that use the Unsplash feature.

Current workaround is to download the image and upload it on ghost.

Steps to Reproduce

1. Create article
2. Use any Unsplash image as feature image
3. Load page through mobile device or dev tools of your browser
4. Inspect the served image (should have a width of 2000)

Ghost Version

4.39.

Node.js Version

16.14.0

How did you install Ghost?

Docker Container

Database type

MySQL 8

Browser & OS version

No response

Relevant log / error output

No response

Code of Conduct

• [X] I agree to be friendly and polite to people in this repository

[github-actions[bot]]

This issue is currently awaiting triage from @ErisDS. We're having a busy time right now, but we'll update this issue ASAP. If you have any more information to help us triage faster please leave us some comments. Thank you for understanding 🙂

[github-actions[bot]]

This issue is currently awaiting triage from @ErisDS. We're having a busy time right now, but we'll update this issue ASAP. If you have any more information to help us triage faster please leave us some comments. Thank you for understanding 🙂

[github-actions[bot]]

This issue is currently awaiting triage from @ErisDS. We're having a busy time right now, but we'll update this issue ASAP. If you have any more information to help us triage faster please leave us some comments. Thank you for understanding 🙂

[ichitaka]

Fun fact: While you report the performance improvements for v5, for most users that use the Unsplash feature, implementing this quick change in the query of the image will have a far bigger impact on performance for them! And there is already a PR that implemented this, so this is quite the easy fix.

[github-actions[bot]]

This issue is currently awaiting triage from @ErisDS. We're having a busy time right now, but we'll update this issue ASAP. If you have any more information to help us triage faster please leave us some comments. Thank you for understanding 🙂

[github-actions[bot]]

This issue is currently awaiting triage from @ErisDS. We're having a busy time right now, but we'll update this issue ASAP. If you have any more information to help us triage faster please leave us some comments. Thank you for understanding 🙂