Image rendering issue with firefox and chrome

[ankur92]

Hi,

I created a personal webpage using Jekyll with al-folio theme and running into an issue with rendering the profile picture in Firefox and Chrome, it works fine with Safari. I would really appreciate any help to fix this. Check the difference in saturation between two renders.

[george-gca]

This doesn't make any sense. Also it is working fine here, the first image is how it appears to me in 3 different browsers (Chrome, Firefox, Brave).

[ankur92]

@george-gca It doesn't make any sense to me as well. These are the screenshots I took from Firefox (top) and Safari (bottom). The actual image is the bottom one and how it should raster.

https://ankur92.github.io/

[george-gca]

Just saying, your profile pic is huge (over 8 MB for a png, 3024 x 4032). By default our template try to create webp versions of the images, to create different resolutions for it. Maybe jekyll-imagemagick is messing with your image, since your original is so colorful. This is set up here:

al-folio/_config.yml

Lines 356 to 376 in c4a9f17

	# Responsive WebP Images
	# -----------------------------------------------------------------------------
	# MAKE SURE imagemagick is installed and on your PATH before enabling imagemagick. In a terminal, run:
	# convert -version
	imagemagick:
	enabled: true # enables responsive images for your site (recommended, see https://github.com/alshedivat/al-folio/issues/537)
	widths:
	- 480
	- 800
	- 1400
	input_directories:
	- assets/img/
	input_formats:
	- ".jpg"
	- ".jpeg"
	- ".png"
	- ".tiff"
	- ".gif"
	output_formats:
	webp: "-quality 85"

Try to play with some imagemagick configurations, see how that works for you.

[ankur92]

Thanks! It seems to be the image size issue as you pointed out. Changed the file format to jpg which is 1.2MB and it works fine.