Spurious image size code in about.liquid?

[jgroschwitz]

Hi everyone, I was trying to adjust the image size of the main profile picture on the desktop layout, and found some code in about.liquid that looked like it was responsible for it:

{% capture sizes %}(min-width: {{ site.max_width }}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px)
      30vw, 95vw"{% endcapture %}

However, changing the factor of 0.3 or the 30vw variable didn't seem to do anything. I eventually found an answer here on how to actually change the image width (changing this line), but it seems like the code in the about.liquid might be a bit of a red herring also for others not just me. Could the code there be removed, or does it have another purpose? If the latter, it might be nice to add a comment explaining that you need to change the _base.scss instead.

Not sure if this is the right place to post this; if not, please point me the right way! Cheers.

[george-gca]

You can see that this sizes information is passed here

al-folio/_layouts/about.liquid

Line 31 in 2161db5

include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image

and it is used inside figure.liquid in the imagemagick block

al-folio/_includes/figure.liquid

Lines 12 to 16 in 2161db5

	<!--
	See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and
	https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images
	-->
	{% if site.imagemagick.enabled %}

You can check these documentation links in the comments, but basically imagemagick uses this to create different versions of your image. Think like this, you have a profile image of size 3000 x 3000, but the user is now visualizing your site in their phone. Do you really need to send a 3k x 3k image to be visualized in a small screen? The answer is no, so we use imagemagick to create different versions of the image with different sizes, and these will be loaded by the user device depending on their screen size.

So, this sizes refers to the image sizes that will be created based on the original one, but it is not related to how this image will be displayed, its position on the screen and so on, just to which image file will be loaded when visualizing that image. You can check the resulting code, which looks like this:

<picture>
  <source class="responsive-img-srcset"
    srcset="/al-folio/assets/img/prof_pic-480.webp 480w,
            /al-folio/assets/img/prof_pic-800.webp 800w,
            /al-folio/assets/img/prof_pic-1400.webp 1400w,"
    type="image/webp" sizes="(min-width: 930px) 270.0px, (min-width: 576px)
      30vw, 95vw">
  <img src="/al-folio/assets/img/prof_pic.jpg?v=974957d202f671e4fa6700c04e68deae" class="img-fluid z-depth-1
      rounded" width="100%" height="auto" alt="prof_pic.jpg" loading="eager"
    onerror="this.onerror=null; $('.responsive-img-srcset').remove();">
  </source>
</picture>