Jump to content

Recommended Posts

I was recently experimenting with optimizing my images to get better load results. The code below is an example of what i've been using. It works nicely but the main problem is if i load a page for the first time after having added a few images my server will overload and return a 503 error. I have to refresh the page a few times for the server to resize all the images. Not a big problem while developing but not something I want on my live website. 

<picture>
	<source media='(max-width: 320px)' srcset='{$image->width(320)->url} 1x, {$image->width(640)->url} 2x'>
	<source media='(max-width: 375px)' srcset='{$image->width(375)->url} 1x, {$image->width(750)->url} 2x'>
	<source media='(max-width: 767px)' srcset='{$image->width(750)->url} 1x, {$image->width(1500)->url} 2x'>
	<source media='(max-width: 1023px)' srcset='{$image->width(300)->url} 1x, {$image->width(600)->url} 2x'>
	<source media='(max-width: 1319px)' srcset='{$image->width(450)->url} 1x, {$image->width(900)->url} 2x'>
	<source media='(min-width: 1320px)' srcset='{$image->width(510)->url} 1x, {$image->width(1020)->url} 2x'>
	<img src='{$image->width(1056)->url}' alt='$image->description'>
</picture>";

Is there a way to create these different sizes without overloading my server? 

Ideally i'd like to expand the above code with webp support and a service like tinyPNG to reduce image size even further, but that would stretch the first load time even further. 

Share this post


Link to post
Share on other sites

You could adapt and try out the code in this post:

 

  • Like 1

Share this post


Link to post
Share on other sites

... more links, to newer code snippets:

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By ThierryGD
      Hi there,
      I've been resizing some .png and got some pretty visible loss of quality. I attached those for comparison - around the Titanic (I know, they're big).
      I tried to find similar threads but couldn't find anything that helped - at least it made me install Horsts IMagick Image Sizer.  
      foreach($detailrp->detail_repeater_bild as $pRetinaBild) { if ($pRetinaBild->width > $pRetinaBild->height) { // 3320px wide $pHighBild = $pRetinaBild->size(1660, 0); $pLowBild = $pRetinaBild->size(830, 0); } else { // 3220px high $pHighBild = $pRetinaBild->size(0, 1610); $pLowBild = $pRetinaBild->size(0, 805); } Anyone has any idea what causes this and how to solve it? Or should I just go with .jpg? Thx!


    • By DV-JF
      Hi,
      I figured out a strange problem and don't know where to search for the error:
      I'm trying to include Processwire into an old website project in order to use PW for a little news-system . Therefore I'm using this code.
      <?php namespace ProcessWire; /*Include ProcessWire f. News */ include $_SERVER['DOCUMENT_ROOT'].("/cms/index.php"); /* Set news variable to get news from PW */ $news = wire('pages')->find('template=news-page');?> Now I'm able to loop through the news and display them as I want to be.
      <?php /* Section - Aktuelles */ if(count($news)) { ?> <div id="aktuelles" class="section-wrapper section-std-padding container activateMenu"> <h2 class="sectionhead">Aktuelles</h2> <?php foreach ($news as $n) { ?> <div class="box big-image"> <div class="two-text-columns"> <div> <a href="<?php echo ("/cms" .$n->sing_img->url .$n->sing_img);?>" class="img-popup"><img src="<?php echo ("/cms" .$n->sing_img->url .$n->sing_img);?>" class="left" alt="<?php echo $n->sing_img->description;?>" title="<?php echo $n->sing_img->description;?>" style="width: 100%;"></a> </div> <div> <h2><?php echo $n->title;?></h2> <?php echo $n->body;?> </div> </div> </div> <?php }; ?> </div> <?php }; ?>  
      These are the settings for the image field $sing_img

      And here's the strange thing happening when I try to echo the image:
      $n->sing_img->url =  /cms/site/assets/files/1019/ $n->sing_img = filename.jpg $n->sing_img->size(200,200) = INTERNAL SERVER ERROR Fehler: Uncaught ProcessWire\WireException: Method Pageimages::size does not exist or is not callable in this context in /.../cms/wire/core/Wire.php:519 Stack trace: #0 /.../cms/wire/core/WireArray.php(2212): ProcessWire\Wire->___callUnknown('size', Array) #1 .../cms/wire/core/Wire.php(386): ProcessWire\WireArray->___callUnknown('size', Array) #2 /.../cms/wire/core/WireHooks.php(698): ProcessWire\Wire->_callMethod('___callUnknown', Array) #3 /.../cms/wire/core/Wire.php(442): ProcessWire\WireHooks->runHooks(Object(ProcessWire\Pageimages), 'callUnknown', Array) #4 /.../cms/wire/core/Wire.php(445): ProcessWire\Wire->__call('callUnknown', Array) #5 /.../index.php(120): ProcessWire\Wire->__call('size', Array) #6 {main} thro (Zeile 519 in h.../cms/wire/core/Wire.php) I've no idea why this is happening, perhaps someone of you can give me a hint!
      Many greets, Jens alias DV-JF
    • By Pravin
      How to set the image quality as per desired..
      I tried using the above code but I get the original image size..
      <!--Content with Image left--> <?php $i = 2; foreach($page->page_content as $each) { if( $i%2 == 0 ){ ?> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-left animated fadeInLeft"> <div class="background-image-holder"> <?php $option1 = array( 'quality' => 60, 'upscaling' => true, 'cropping' => true, ); $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-md-push-7 col-sm-8 col-sm-push-4 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <!--Content with Image on left--> <?php } else { ?> <!--Content with Image on right--> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-right animated fadeInRight"> <div class="background-image-holder"> <?php $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-sm-8 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <?php } ++$i; } ?> <!--Content with Image on right-->  
    • By Xonox
      Hi,
      I'm building a newsletter via ProcessWire content. For this I'm bootstrapping ProcessWire via:
      include('index.php'); However, I'm getting this strange error:
      Fatal error: Uncaught exception 'WireException' with message 'Method Pageimages::size does not exist or is not callable in this context' in E:\WebServer\greentrekker.pt\wire\core\Wire.php:358 Stack trace: #0 E:\WebServer\greentrekker.pt\wire\core\WireArray.php(1686): Wire->___callUnknown('size', Array) #1 [internal function]: WireArray->___callUnknown('size', Array) #2 E:\WebServer\greentrekker.pt\wire\core\Wire.php(398): call_user_func_array(Array, Array) #3 E:\WebServer\greentrekker.pt\wire\core\Wire.php(333): Wire->runHooks('callUnknown', Array) #4 E:\WebServer\greentrekker.pt\wire\core\Wire.php(337): Wire->__call('callUnknown', Array) #5 E:\WebServer\greentrekker.pt\wire\core\Wire.php(337): Pageimages->callUnknown('size', Array) #6 E:\WebServer\greentrekker.pt\site\templates\parts\newsletter-template.php(69): Wire->__call('size', Array) #7 E:\WebServer\greentrekker.pt\site\templates\parts\newsletter-template.php(69): Pageimages->size(550, 260) #8 E:\WebServer\greentrekker.pt\site\templates\scripts\newsletter\newslette in E:\WebServer\greentrekker.pt\wire\core\Wire.php on line 358
      Error: Uncaught exception 'WireException' with message 'Method Pageimages::size does not exist or is not callable in this context' in E:\WebServer\greentrekker.pt\wire\core\Wire.php:358
      Stack trace:
      #0 E:\WebServer\greentrekker.pt\wire\core\WireArray.php(1686): Wire->___callUnknown('size', Array)
      #1 [internal function]: WireArray->___callUnknown('size', Array)
      #2 E:\WebServer\greentrekker.pt\wire\core\Wire.php(398): call_user_func_array(Array, Array)
      #3 E:\WebServer\greentrekker.pt\wire\core\Wire.php(333): Wire->runHooks('callUnknown', Array)
      #4 E:\WebServer\greentrekker.pt\wire\core\Wire.php(337): Wire->__call('callUnknown', Array)
      #5 E:\WebServer\greentrekker.pt\wire\core\Wire.php(337): Pageimages->callUnknown('size', Array)
      #6 E:\WebServer\greentrekker.pt\site\templates\parts\newsletter-template.php(69): Wire->__call('size', Array)
      #7 E:\WebServer\greentrekker.pt\site\templates\parts\newsletter-template.php(69): Pageimages->size(550, 260)
      #8 E:\WebServer\greentrekker.pt\site\templates\scripts\newsletter\newslette (line 358 of E:\WebServer\greentrekker.pt\wire\core\Wire.php) 

      This error message was shown because site is in debug mode ($config->debug = true; in /site/config.php). Error has been logged.
      What am I missing here?
    • By lenoir
      Hi,
      I've recently upgraded a website to the latest version (2.7.2) and the image fields are not running properly. Seems like the ImageSizer isn't working anymore. There's a thread in the forums about that particular problem but it's a dead-end.
      Here's the error i got:
      ImageSizer::resize(0, 100) failed for [...]/site/assets/cache/WireTempDir/.PagefilesManager1984/1/numbers_layout.0x100.jpg Can anyone help me with this? Thanks.
×
×
  • Create New...