Struggling with image sizes -- Can't find the setting that controls width/height

1

All the images on my test site have been cropped to 1000px maximum width.

All of my page collections have a 2-column layout with a thumbnail at the top of each post. Grav is creating all these thumbnails at 800x400 px which is much too large and slowing down the page load time (according to pingdom).

How do I set Grav to make these thumbnails only as wide as the column width? I tried doing it using several variations of markdown such as…

![](mounting_the_lower_cowl_01.png?resize=360,200)

…but that only affects the image for actual page using it.

My end goal…

  1. Make Grav display images only as large as they need to be for the current layout.
  2. When clicking an image on a blog page, it opens up the original, full-size image.

As it is now regarding the load times for wordpress posts vs Grav pages, the wordpress site is drastically lower in file size and load time. I’d really like to make the Grav site load faster.

2

Have you considered using srcset in your img? The browser will choose the prefered one. You can start with something really small if you want to gain some additional points in PageSpeed Insights. You can grab the width and height but from my experience it’s taking the width and height of the original image, what actually doesn’t matter as it’s used to calculate proportions by the modern browsers only.

Here’s a sample:

<img alt="{{ projekt.title|raw }}" src="{{ page.find('/images').media[projekt.header.cover].resize(720).quality(75).url }}" srcset="{{ page.find('/images').media[projekt.header.cover].resize(360).quality(75).url }} 360w, {{ page.find('/images').media[projekt.header.cover].resize(720).quality(75).url }} 720w, {{ page.find('/images').media[projekt.header.cover].resize(960).quality(72).url }} 960w" width="{{ page.find('/images').media[projekt.header.cover].width }}" height="{{ page.find('/images').media[projekt.header.cover].height }}">

cover is my variable in front matter to set the image that I use as a cover for a post.

1 Like