Keep images in good quality

Kirby 3 Solved ✅
1

Hello everyone :slight_smile:
I’m working on a website that has a gallery of images where each image spreads to the full width of the screen, which mean a long scroll of big images. I was wondering if there is a recommended way to achieve a scroll of good quality big images that load fast?

for example, it would be great if my client could have upload his heavy good quality images through the panel and that some plugin will reduce the size of it but will keep the resolution or some other magic like that. am I fantasizing?

I saw this plugin and was wondering if anyone used it and if it could be a solution to my question.

Thanks in advance!

2

This plugin is no longer needed, because Kirby support Webp natively since Kirby 3.6.

In generall, images should be no larger than needed for a given viewport, that’s why it is the standard today to use responsive images.

To achieve this, Kirby let’s you create thumbs in different image formats:

https://getkirby.com/docs/guide/templates/resize-images-on-the-fly

I’d recommend to lazy-load images:

3

I’d also suggest you look into imgix - Pricing - Start Free
They now offer a free plan if you have less than 1000 images and they do a stellar job with delivering images.

4

Thank you for the replies !
another question I have related to this topic is how can I change the max-size of the uploaded files?
I saw this thread and I’m not sure how to access this php.ini file. is there another way to change the max size?
Thanks !

5

You can set the allowed file sizes or dimensions in your file blueprints, particularly the acceptoption where you can limit file types, sizes etc.: File blueprint | Kirby CMS

The file blueprints can be assigned to files in your files sections/files fields.

The php.ini settings are only relevant if you find that you run into issues with uploads, i.e. you want to allow upload sizes, script runtimes etc. that are too limiting.

6

Thanks for the answer!
I did as you suggested and I changed the image block blueprint like this:

name: field.blocks.image.name
icon: image
preview: image
fields:
  image:
    label: field.blocks.image.name
    type: files
    multiple: false
    image:
      back: black
    uploads:
      template: blocks/image
    accept:
      maxsize: 20000

and now when I try to upload a “heavy” file (6.2MB) it says:

Screen Shot 2022-03-12 at 4.23.36 PM
Screen Shot 2022-03-12 at 4.23.36 PM958×420 14.5 KB

It means I need to access the php.ini?
Thanks!

7

In this case, yes!

8

I see
and how do I access this file?
I use localhost during the development
:pray: :pray:

9

You can find the path to the relevant php.ini file with php.info. What is your local development environment?

10

I use VS Code - is that what you mean?

11

No, that is a code editor. I meant your local server. Do you use PHP built-in webserver, MAMP, Valet, a local Apache webserver or anything like that?

In any case, phpinfo() will tell you which php.ini you would have to edit.

12

Thanks!
I used your advice and checked the php.ini loactaion with pho.inf. Then I changed the post_max_size and upload_max_filesize.

I understand I need to restart my http server. I’m using the built in php webserver. do you know by any chance how do I restart the http server?

thanks a lot!

13

Stop with ctrl+c, then start again

1 Like
14

Of course :sweat_smile:
Well, it works perfectly!
Thanks a lot for the help! fast and helpful as usual :pray: