Hi Piwigo Users,

I wanted to share this post with you to provide you with information how I significantly improved the performance of 4K photos on my low spec VPS (256 MB ram, 1024GB bandwidth, 3 Euros/month).

I am using Piwigo with 3840 x 2160 JPG files compressed with quality setting 80% so that each file is approximately 1MB.

The multiple image size convert (handled by the i.php script) takes a long time on my server to create different sizes of of each photo and also uses hdd space to store the generated images. Even 2s (small thumbnails) images take time to generate as the image library needs to read the entire 1MB file first and then converts it.

I decided that I want to disable the image convert - multiple sizes - completely by changing the image URLs with a regular expression to the source file (instead of i.php) and let the browser do the resize.

I use the smartpocket template for my site but I guess you can use the regular expression below for other templates as well.

In themes/smartpocket/template/thumbnails.tpl I changed ( note adjust jpg to your file extension):

----------------------------------------------

{if !isset($thumbnail.representative_ext)}
    <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)" data-picture-url="{$thumbnail.URL}" rel="external">
{else}
    <a href="{$thumbnail.URL}" target="_blank" onClick="window.location='{$thumbnail.URL}'">
{/if}
     <img src="{$derivative->get_url()}" {$derivative->get_size_htm()} alt="{$thumbnail.TN_ALT}">
{else}
  <li class="liEmpty">
    <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)" rel="external">
{/if}

--------------------------------------------------
to

{if !isset($thumbnail.representative_ext)}
    <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)|regex_replace:'/(?:(?:_data\/i\/)|(?:i\.php\?\/))(.*)-..\.jpg/':'$1.jpg'}" data-picture-url="{$thumbnail.URL}" rel="external">
{else}
    <a href="{$thumbnail.URL}" target="_blank" onClick="window.location='{$thumbnail.URL}'">
{/if}
     <img src="{$derivative->get_url()|regex_replace:'/(?:(?:_data\/i\/)|(?:i\.php\?\/))(.*)-..\.jpg/':'$1.jpg'}" {$derivative->get_size_htm()} alt="{$thumbnail.TN_ALT}">
{else}
  <li class="liEmpty">
    <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)|regex_replace:'/(?:(?:_data\/i\/)|(?:i\.php\?\/))(.*)-..\.jpg/':'$1.jpg'}" rel="external">
{/if}

--------------------------------------------------

Changing the template to use the original file uses more bandwith but is faster to load the images (no conversion required) and doesn't use disk space for the multiple size images.

Kind regards,
Mathias




Piwigo version: 2.7.4

Last edited by mathias (2016-06-26 16:22:35)