Before we move on from the image uploads, I think that it makes sense to do a little bit of image optimizations because right now remember we've allowed users to upload images up to 5MB and they probably will. And I don't think that we want 5MB images on our websites. Let's go and take a look at the default images that we've seeded in the database and see what sizes they are.

that we've seeded in the database and see what sizes they are. So if I inspect Luna here, 676 kb, uh, it's kind of big but not too crazy. Let's try another one. What about Leah? This one is not too bad. Okay, but now let's go and log in and I'll go to the bottom of the page. Big image is what we are going to upload. All right? And let's very creatively upload the image we keep using because it's 3.4 meg.

And let's very creatively upload the image we keep using because it's 3.4 meg. So we create the big image, we get the nice ux, there it is. And if we go and inspect it, you can see that this image is 3.4 meg. And so if we had lots and lots of these images from that size, the site would struggle a little bit and probably feel laggy.

the site would struggle a little bit and probably feel laggy. So let's improve the situation by bringing some image optimization that happens between the user upload and the file storage. Here I'll use a fairly popular third party package called intervention/image. And you can see here there is a framework integration menu item and there is a Laravel version of it. So let's check the installation for Laravel.

item and there is a Laravel version of it. So let's check the installation for Laravel. And you can see that we can composer require intervention/image Laravel. So let's do exactly that. I will copy the command in the terminal and we will require this package. Alright, so it's been installed and so now let's head over to the store method on our PuppyController.

and so now let's head over to the store method on our PuppyController. So we can use this intervention/image package to make our images hopefully a bit smaller. So at the moment you can see we validate the inputs data and then we check if we have a file called image. If we do, we try to store it in the puppies directory and then we set its path to the image URL so that we can create a new Puppy that points to that image. So basically the place we want to do our intervention

that we can create a new Puppy that points to that image. So basically the place we want to do our intervention with InterventionImage is right around here. Instead of trying to store the image directly, we will first do some manipulation to that image. All right, so we'll stay within this if request has file image and let's add a comment image optimization and give us some breathing room to start doing our work here. So the InterventionImage package is going

to start doing our work here. So the intervention/image package is going to give us an Image facade that we want to use here. Image, okay, I can find it here. So let's try to use it first, use Image, and hopefully we can find the right one. There it is. This is the one intervention/image, Laravel facade Image. This is specifically the one we want. So let's go back to our store method.

This is specifically the one we want. So let's go back to our store method. And now we're going to use this image to read the uploaded image. So yep, $request file('image'). So let's store that in a variable. I can call that $image I guess. And here the first thing we want to do is resize or scale down the image. So we're going to check if let's say it's bigger than 1000

or scale down the image. So we're going to check if let's say it's bigger than 1000 pixels in width, and if it is, we are going to resize the width to 1000 pixels. If it's smaller, we don't touch it, but anything that's much bigger, we want to shrink down to 1000 pixels max. So that should already do a good progression in the file size. So let's try that first. So maybe I'll have a little comment

progression in the file size. So let's try that first. So maybe I'll have a little comment scale down only. And if the image width is greater than 1000 copilot, let me teach by myself. Image, scale and scale takes an optional width and height, so we could go 1000, but I think it's a bit nicer to specify that it's the width that we want to resize to 1000 pixels. So with a bit of luck, we've here intercepted

that we want to resize to 1000 pixels. So with a bit of luck, we've here intercepted and read the image check if the width is wider than 1000, if it is, we scaled it down to 1000. And so doing just that with no that help already. But we're going to take it a step further and change the format to webp, which is widely supported across all browsers and usually leads to much smaller file sizes. I'll create a new variable called webp and coded,

and usually leads to much smaller file sizes. I'll create a new variable called webP and coded, and here we'll grab our image, which again is the result of this read function here. And I believe I can convert it with two. And you can see the different formats here, two jpeg, png, but I want to choose two webP here. This is another step towards a smaller file size and we can take it even further by setting the quality to, yeah, 80 would probably be a little bit too much.

and we can take it even further by setting the quality to, yeah, 80 would probably be a little bit too much. So it's going to reduce the quality or make the quality 80% of what it is. I think I'll stay pretty high here. So with 95. Alright, so now within this WebP and coded variable, I have the results of the conversion, but to be able to store it later, I need to convert that to strength. Okay, we almost ready to store that image,

to strength. Okay, we almost ready to store that image, but we are not going to use the store method here that automatically creates a random file name. We are going to do something slightly different. So we need to generate ourselves, I believe the fileName variable and let's have a randomStr with STR::random(). And yep, I will concatenate this with the .webp extension. And so that's basically gonna create a random file name.

And yep, I will concatenate this with the webp extension. And so that's basically gonna create a random file name with the did that webp, which is what we want. I think we need to import the Str helper, not sure what it's not auto importing, but let's use, yep, that's the one. Eliminate support Str for string. Alright, let's go back down. So we scale the image down, we encode it to webp with a quality of 95.

So we scale the image down, we encode it to webP with a quality of 95. We then create a file name for that file. And at this point we are ready to store the image. Now remember we were storing the path to the image in this path variable and this represents the whole path and the file name and the extension. So let's recreate this path because we are going to store the file in a different way.

So let's recreate this path because we are going to store the file in a different way. So here I will go $path equals, and we basically want it to be puppies for the puppies directory and then concatenate that with the file name. And as it tends to do, co-pilot has completely ruined the surprise. The change we want to do is instead of doing request()->file('image')->store, we are going to reach

The change we want to do is instead of doing request file image store, we are going to reach for the public Storage disk and use the put method. And what we are going to put in there is that path to the image and the file name and the actual content that we put is this wetp encoded string that we've prepared here. So essentially these two things are doing a similar thing. They are storing an image inside the public directory.

So essentially these two things are doing a similar thing. They are storing an image inside the public directory. It's just a different way to go about it. And technically from that point forward I think we might be good. The only thing I would do different is not use the path here to see if we have a problem, but instead maybe have a $stored variable and then check here. If we were not able to store, then we would return back with errors.

If we were not able to store, then we would return back with errors. Alright, I don't think the implementation was that bad and I think the results will really make it worth it. So let's go through a quick recap of the code changes we've done and then let's go and try it out. So if I scroll back up a little bit, instead of just soaring the image, if we have one, we have first read it with the Image facade.

of just soaring the image, if we have one, we have first read it with the Image facade and then tried to scale it down. If it's too big, we then have encoded it to WebP with a quality of 95. We've then created a random file name and then created a $path variable that we want to store in the image URL field. And then we try to store that image in the public disk. So we take that $path

And then we try to store that image in the public disc. So we take that path and then pass the webP encoded string. If all goes well, we get past this check and we set the file path to the imageUrl field. This is how it was before. And so nothing after this should change. I just realized that we are not using the puppy variable here, so I can technically delete that. And so this remains identical,

here, so I can technically delete that. And so this remains identical, but hopefully the image URL here, not the path, but the file stored in the storage is much smaller. Let's check it out. Alright, so to compare fair and square, I will upload the same image once again. Let's go to the bottom and we'll call this one small_image_tiny. And let's go find the same Braves hoodie. You can see here 3.4 megs.

And let's go find the same Braves hoodie. You can see here 3.4 megs and we are going to upload this file one, two seconds, sleep and up we go. And so here's a big image and a small image. Yeah, you might be able to tell that this image is slightly sharper than this one. This might be the 95% quality we've chosen, but honestly I think that's good enough, at least for teaching purposes.

but honestly I think that's good enough, at least for teaching purposes. And so let's compare the sizes now. So this is our big image. It's a PNG image and it's 3.4 megs. You can see the size was 2030 pixel in width. And so this is definitely going to be resized. And now let's inspect this image. First observation, you can see it's a webp extension, and if I hover, you can see the width of a thousand pixel.

First observation, you can see it's a webp extension, and if I hover, you can see the width of a thousand pixel. It's been scaled down and the file size is 114 kilobytes instead of 3.4 megs. That is a massive, massive change. And I definitely think that it was worth the effort in the code changes and the slight reduction in the quality of the images. And of course you can go and play with the settings,

And of course you can go and play with the settings, maybe have 1,200 pixels in width and the quality at a hundred percent if you really want to keep it super sharp. But with what we've set up, we've done great results and I'm super happy with that.