Why might image quality be decreased in prod? #2255
-
|
I just deployed my al-folio GitHub pages theme the other day, but had a quick question. I initially developed locally and tested with a local server (the legacy way on the Image from local deployment: 
Image from prod: 
Is there a specific setting that is doing this or is this just the way that this theme handles this? I am trying to figure out why this might be happening. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
If you used figure.liquid to display the image, it internally uses imagemagick to create different resolutions of the same image. This is done to avoid serving a high resolution version of the image when it is not needed, so the page loads faster. For more information check this guide about responsive images. You can disable this behavior in _config.yml, although this is not usually recommended. |
Beta Was this translation helpful? Give feedback.
-
|
Interesting - thanks for the clarification + links. Since I am still somewhat of a novice when it comes to web dev - is it best practice to have lower resolution images served, even in this case, for performance reasons? I would have thought that it would have served a slightly higher resolution (since I am using my normal computer's web browser) and then only served the lower resolution version while viewing on mobile. Edit: I just saw your edit that disabling this is usually not recommended. |
Beta Was this translation helpful? Give feedback.
-
|
To be honest I am not a prolific web dev also, but I believe this depends on the use case. For example, in your screenshot the image is being used as a thumbnail for the project. In this place it is probably being displayed at a lower size (for example, your original might be 1600x1200, but the size being displayed in that place is 400x200. In this case it doesn't make sense to serve a high res version of the image if it has do be downscaled to 400x200 to be displayed there. |
Beta Was this translation helpful? Give feedback.
If you used figure.liquid to display the image, it internally uses imagemagick to create different resolutions of the same image. This is done to avoid serving a high resolution version of the image when it is not needed, so the page loads faster. For more information check this guide about responsive images.
You can disable this behavior in _config.yml, although this is not usually recommended.