Fred and pThumb?

Support Extras
1

I’ve got a Fred element with an image that makes the site go reeeeeally slow a lot of the time when I edit it. It almost seems as the server crashes. Not sure why but I suspect it’s to do with pThumb and perhaps too many options.

For what it’s worth, if someone has advise how to speed things up, here’s my code. There’s some Swedish in there but I’ve translated some things to make it more understandable.

Element:

<div style="margin-top:{{ marginTop }}px;margin-bottom:{{ marginBottom }}px;padding-top:{{ paddingTop }}px;padding-bottom:{{ paddingBottom }}px;">
    <picture> 
        <source srcset="[[pthumb? &input=`{{bild}}` &options=`aoe=1&w=3000&h={{heightXL}}&q={{quality}}&dpi=72&f=jpg&zc={{zoomCrop}}`]]" media="(min-width: 1200px)">
        <source srcset="[[pthumb? &input=`{{bild}}` &options=`aoe=1&w=2400&h={{heightLG}}&q={{quality}}&dpi=72&f=jpg&zc={{zoomCrop}}`]]" media="(min-width: 992px)">
        <source srcset="[[pthumb? &input=`{{bild}}` &options=`aoe=1&w=1984&h={{heightMD}}&q={{quality}}&dpi=72&f=jpg&zc={{zoomCrop}}`]]" media="(min-width: 768px)">
        <source srcset="[[pthumb? &input=`{{bild}}` &options=`aoe=1&w=1536&h={{heightSM}}&q={{quality}}&dpi=72&f=jpg&zc={{zoomCrop}}`]]" media="(min-width: 576px)">
        <img src="[[pthumb? &input=`{{bild}}` &options=`aoe=1&w=1152&h={{heightXS}}&q={{quality}}&dpi=72&f=jpg&zc={{zoomCrop}}`]]" alt="{{alt}}" class="d-block img-fluid" style="width:100%;height:100%">
    </picture>
</div>

Options:

{
  "remote": true,
  "settings": [
    {
      "group": "Bild",
      "settings": [
        {
          "type": "image",
          "name": "bild",
          "label": "Image",
          "mediaSource": "",
          "showPreview": true,
          "value": "[[pthumb? &input=`[[++fred.theme.web-in-box.theme_dir]]placehold.jpg` &options=`aoe=1&w=2000&h=600&dpi=72&f=jpg&zc=c`]]"
        },
        {
          "type": "text",
          "name": "alt",
          "label": "Beskrivnig (för sökmotorer och tillgänglighetsanpassning",
          "value": ""
        }
      ]
    },
    {
      "group": "Crop",
      "settings": [
        {
          "type": "select",
          "name": "heightXS",
          "label": "Crop XS",
          "options": {
            "288": "4:1 (långsmal",
            "384": "3:1",
            "576": "2:1",
            "768": "3:2",
            "864": "4:3",
            "1152": "1:1 (kvadratisk)"
          },
          "value": "768"
        },
        {
          "type": "select",
          "name": "heightSM",
          "label": "Crop SM",
          "options": {
            "384": "4:1 (långsmal",
            "512": "3:1",
            "768": "2:1",
            "1024": "3:2",
            "1152": "4:3",
            "1536": "1:1 (kvadratisk)"
          },
          "value": "1024"
        },
        {
          "type": "select",
          "name": "heightMD",
          "label": "Crop MD",
          "options": {
            "496": "4:1 (långsmal",
            "662": "3:1",
            "992": "2:1",
            "1322": "3:2",
            "1488": "4:3",
            "1984": "1:1 (kvadratisk)"
          },
          "value": "1322"
        },
        {
          "type": "select",
          "name": "heightLG",
          "label": "Crop LG",
          "options": {
            "600": "4:1 (långsmal",
            "800": "3:1",
            "1200": "2:1",
            "1600": "3:2",
            "1800": "4:3",
            "2400": "1:1 (kvadratisk)"
          },
          "value": "1600"
        },
        {
          "type": "select",
          "name": "heightXL",
          "label": "Crop XL",
          "options": {
            "750": "4:1 (långsmal)",
            "1000": "3:1",
            "1500": "2:1",
            "2000": "3:2",
            "2250": "4:3",
            "3000": "1:1 (kvadratisk)"
          },
          "value": "2000"
        },
        {
          "fred-import": "zoomCrop"
        },
        {
          "type": "slider",
          "name": "quality",
          "label": "Quality",
          "min": 10,
          "max": 100,
          "step": 5,
          "value": 90
        }
      ]
    },
    {
      "group": "Marginaler",
      "settings": [
        {
          "fred-import": "marginPadding"
        }
      ]
    }
  ]
}
2

Are any of your FRED settings returning empty? if you’re passing options to pthumb that include blank values that might cause some issues. These are big images, so processing 4 of them on page load when the cache is cleared is going to use server resources. Do you really need 2000+ pixels in these images for screen sizes less than half the image dimensions?

3

That’s probably processing each of those images with practically each keystroke/change to the element settings. As PHP is not super efficient at manipulating images I can definitely imagine that will start heat things up on the server.

As a rough benchmark you can multiply the image size by 8 and you get roughly the memory PHP needs to manipulate that image. Then multiply that by the number of images you’re manipulating, and by the number of variations of each. I don’t have a similar benchmark for CPU usage, but that’s definitely going to spike too.

Perhaps as an alternative you could look into phpthumbsup. Compared to pthumb, that will only return a special image url that contains the crop properties. What that would mean in your case is that it will very quickly return an updated url, and only if that image isn’t already in your browser cache it will actually have to process it.

There should also be server-side caching in both pthumb and phpthumbsup to make sure it only processes when it changed, but I don’t know off-hand how that works precisely or if there’s any special considerations there when using it with Fred…

4

Are any of your FRED settings returning empty?

No

Do you really need 2000+ pixels in these images for screen sizes less than half the image dimensions?

The largest image size is for screens 1200 px and larger, so yes, the image needs to be more than twice the width of that to look crisp on high resolution displays.

Perhaps as an alternative you could look into phpthumbsup. Compared to pthumb, that will only return a special image url that contains the crop properties. What that would mean in your case is that it will very quickly return an updated url, and only if that image isn’t already in your browser cache it will actually have to process it.

I might give phpthumbsup a try, and if that doesn’t help I might might skip one or two of the image dimensions. It would mean the loading time of the page is slower than necessary for the end user though but perhaps not a huge difference.

Another solution might be to make sure the original image isn’t too high res. I noticed there is a significant difference in loading time between a 3MB image and a 1MB one.

Thank you both for your advise!