Hello.
I am very new to ProcessWire and I am currently building our company website with it. For the most part I understand what is going on and understand how to use the API to get data from the database to the front-end, and I love the way it allows me to do exactly what I want without forcing me to do things 'the ProcessWire way' like other CMS' like WordPress do.
But I have a few questions regarding the Image Resize Functions and how they relate to the performance at the front-end of the site. For example, I have a blog view page where I have a full width hero image at the top of the page and I am looking to utilise ProcessWire's Image Resize Functions along with PictureFill to server the appropriate image to the user depending on their screen size. Now, in some instances the image I am serving - to a desktop with a retina display for example - is massive, 3840px by 1100px.
I am just wondering what would be the best way to go about this? Should I get the user (of the CMS) to upload an image of that size to the CMS and then let ProcessWire take care of all the other resizes? And if so, how long would that take to process before displaying the page?
Currently I have the following in my template:
<?php
$mobile_2x = $page->blog_image->size(1464, 700);
$mobile_1x = $page->blog_image->size(732, 350);
$tablet_2x = $page->blog_image->size(2448, 640);
$tablet_1x = $page->blog_image->size(1224, 320);
$desktop_2x = $page->blog_image->size(3840, 1100);
$desktop_1x = $page->blog_image->size(1920, 550);
echo "<picture>";
echo "<!--[if IE 9]><video style=" . '"display: none;"' . "><![endif]-->";
echo "<source srcset='{$desktop_1x->httpUrl}, {$desktop_2x->httpUrl} 2x'" . ' media="' . '(min-width: 1240px)"' . ">";
echo "<source srcset='{$tablet_1x->httpUrl}, {$tablet_2x->httpUrl} 2x'" . ' media="' . '(min-width: 768px)"' . ">";
echo "<!--[if IE 9]></video><![endif]-->";
echo "<img srcset='{$mobile_1x->httpUrl}, {$mobile_2x->httpUrl} 2x'" . "alt='{$blog_post->blog_image->description}'>";
echo "</picture>";
?>
When I first loaded the page it took a long time to show, obviously this is not great for my users, or is it? Does it only take a long time to load once? I'm not sure how it all works...
Any advice would be much appreciated.
Thanks.