Forum

Thread tagged as: Question, Problem

Image size and page load time query

While building my blog, I noticed that if I open the author image in a new tab, it opens the original version.

In the author template, I set the image to 100px x 100px which is what it displays on the uploaded image on the author page in perch. On my blog post template I set the author image to 70px x 70px.

When I hover over the image link in google developer tools, it says '70 × 70 pixels (intrinsic: 960 × 960 pixels)' and when I open the small image in a new tab, it opens the 960 x 960 version. Does this mean that my blog page is loading the full-size image?

In the author template:

<perch:if exists="author_image">
    <img src='<perch:blog id="author_image" type="image" label="Image" width="100" height="100" crop="true" density="1"
      order="5" />' width="110" height="110" />
</perch:if>

In the post template:

<perch:if exists="author_image">
      <div class="author-img m-r-s">
        <img src='<perch:blog id="author_image" type="hidden" label="Author Image" width="70" height="70" density="1" order="5" />'  />
      </div>
</perch:if>

Shouldn't perch be creating a smaller version of the image for these instances? If not, please let me know how this can be done. I know I can just upload a smaller original file, but I want to make sure in the future that perch can do the work.

Lee Buckle

Lee Buckle 0 points

  • 2 years ago
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Hello Lee,

Perch generates the image sizes when you add the image to an edit form. You're adding the width and height attributes to a display template so Perch won't generate a new image version in this case.

The edit template for the author is perch/templates/blog/author.html. That's where you need to tell Perch to generate versions of your image in different sizes:

<perch:blog id="author_image" type="image" label="Image" width="240" height="240" crop="true" density="2" />
<perch:blog id="author_image" type="image" label="Image" width="70" height="70" density="1" /> <!--* this generates a 70x70 version of the image  *-->

You'll probably need to re-save the author's edit form for the new size to be generated. Then you should be able to use it in your post template.