Digital image processing in CodeIgniter 4

- Andrés Cruz

ES En español

Digital image processing in CodeIgniter 4

Backend image manipulation is one of those features that you need sooner or later: resizing user-uploaded images, cropping thumbnails, optimizing weight to improve speed, or even rotating them automatically.

In this guide, I will teach you how to do it in CodeIgniter using its image library. We won't just look at the code, but also when to use each method and how to avoid common mistakes.

We are going to learn how to perform operations on images in CodeIgniter 4; in other words, digital image processing; we are going to explore the most common ones.

What is backend image manipulation

When we talk about image manipulation or digital image processing on the backend, we refer to modifying images directly on the server using PHP.

This includes:

  • Rotating images
  • Resizing them
  • Cropping them
  • Reducing their quality
  • Generating thumbnails
  • Adjusting proportions

Most of the time I have needed this to optimize images uploaded by users. They upload huge photos (4000px or more) and if you don't process them, your server and your web performance will notice.

Available libraries: GD vs Imagick

In CodeIgniter 4 you can work with:

  • GD (default on many servers)
  • Imagick (more powerful and flexible)

GD

  • More common.
  • Sufficient for basic operations.

Imagick

  • Better performance in complex operations.
  • More advanced options.
  • Ideal for precise crops and professional processing.

If your project requires intensive processing, Imagick is usually a better choice.

How the Image library works in CodeIgniter 4

For all operations, we always have to load the image we want to process; for that, we have a service in CodeIgniter 4:

$image = \Config\Services::image()
    ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png');

In between, we have the operation we want to perform: rotate, scale, crop...

And finally, we save the result with:

save(WRITEPATH . 'uploads/imagemanipulation/image_rotate.png');

The flow is always the same:

load → process → save

This pattern is key. In fact, I always work like this: first I prepare the file, then I apply the operation I need (rotate, scale, crop…) and finally I save the result.

Preparing our operations for image manipulation

We are going to create a controller file and its respective class where we register these operations:

class ImageManipulation extends BaseController
{
}

With this, we are ready to perform each of the operations; among the main ones we have:

Rotating images

To rotate images up to 360 degrees, we have the function called rotate, which receives the degrees you wish to rotate:

public function image_rotate()
{
    $image = \Config\Services::image()
        ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
        ->rotate(270)
        ->save(WRITEPATH . 'uploads/imagemanipulation/image_rotate.png');
}

The parameter indicates the degrees (0–360).

Rotating images is often necessary when users upload photos from mobile devices with incorrect orientation. Applying a rotate(270) or rotate(90) solves the problem quickly.

Resizing images: resize vs fit

The function called resize receives three parameters:

  1. Scaling on the X axis
  2. Scaling on the Y axis
  3. Whether you want to maintain the image proportions or the aspect ratio
public function image_resize()
 {
       $image = \Config\Services::image()
           ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
           ->resize(100, 100,false)
           ->save(WRITEPATH . 'uploads/imagemanipulation/image_resize.png');
 }

Parameters:

  • Width
  • Height
  • Maintain proportions (true/false)

If you set it to false, you might distort the image.

OR

fit()

public function image_fit()
 {
       $image = \Config\Services::image()
           ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
           ->fit(100, 100, 'center')
           ->save(WRITEPATH . 'uploads/imagemanipulation/image_fit.png');
 }

This method:

  • Automatically adjusts proportions
  • Crops what is necessary
  • Centers the image

In practice, I almost always use fit() when I need square thumbnails. It has saved me from visual distortions in galleries.

When to use each one?

 

  • Maintain strict proportions → resize(true)
  • Create perfect thumbnails → fit()
  • Quick reduction without precision → resize(false)

Cropping images (crop) correctly

To crop a portion of the image, we have the image_crop function, for which you must specify a library; generally 'imagick' is used as it allows us to perform these types of operations easily; the crop function receives 4 points, which are equivalent to the position x1,y1 - x2,y2

$xOffset = 100;
$yOffset = 100;

$image = \Config\Services::image()
    ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
    ->crop(50, 50, $xOffset, $yOffset)
    ->save(WRITEPATH . 'uploads/imagemanipulation/image_crop.png');

Calculating dynamic offsets is much better than using fixed values. You can get image properties and center the crop automatically.

Reducing quality and weight of images

Lowering the quality of images is useful for reducing their file size:

   public function image_quality()
 {
       $image = \Config\Services::image()
           ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
           ->fit(300, 300, 'center')
           ->save(WRITEPATH . 'uploads/imagemanipulation/image_quality.png', 15);
 }

The Factor, in this example 15, determines the image quality, where 0 is the lowest possible and 100 percent is the maximum quality.

The second parameter indicates quality:

  • 0 → minimum quality
  • 100 → maximum quality

I usually work between 60 and 80 for a balance between visual quality and weight.

Reducing quality can drastically decrease the file size without perceptibly affecting the image.

Full Controller Code

Finally, the complete code for the exercise:

class ImageManipulation extends BaseController
{
   public function image_fit()
   {
       $image = \Config\Services::image()
           ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
           ->fit(100, 100, 'center')
           ->save(WRITEPATH . 'uploads/imagemanipulation/image_fit.png');
   }
 
   public function image_rotate()
   {
       $image = \Config\Services::image()
           ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
           ->rotate(270)
           ->save(WRITEPATH . 'uploads/imagemanipulation/image_rotate.png');
   }
   public function image_resize()
   {
       $image = \Config\Services::image()
           ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
           ->resize(100, 100,false)
           ->save(WRITEPATH . 'uploads/imagemanipulation/image_resize.png');
   }
   public function image_quality()
   {
       $image = \Config\Services::image()
           ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
           ->fit(300, 300, 'center')
           ->save(WRITEPATH . 'uploads/imagemanipulation/image_quality.png', 15);
   }
   public function image_crop()
   {
       /* $info = \Config\Services::image('imagick')
       ->withFile(WRITEPATH.'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
       ->getFile()
       ->getProperties(true);
       $xOffset = ($info['width'] / 2) - 25;
       $yOffset = ($info['height'] / 2) - 25;*/
       $xOffset = 100;
       $yOffset = 100;
       $image = \Config\Services::image()
           ->withFile(WRITEPATH . 'uploads/movies/5/1575128863_4acadf20ebe48354c5c3.png')
           ->crop(50, 50, $xOffset, $yOffset)
           ->save(WRITEPATH . 'uploads/imagemanipulation/image_crop.png');
   }
}

Best Practices and Common Mistakes

  • Do not distort images unintentionally.
  • Do not always save at 100 quality.
  • Validate that the file exists before processing it.
  • Use Imagick if the server allows it.
  • Do not overwrite original images without a backup.

Frequently Asked Questions on Image Manipulation

  • How to rotate an image in CodeIgniter 4?
    • Using the rotate(degrees) method before saving.
  • How to maintain proportions when resizing?
    • Use resize(width, height, true) or better yet, fit().
  • How to reduce the weight of an image?
    • By adjusting the second parameter of save().
  • Does CodeIgniter use GD or Imagick?
    • It can use both. GD is common; Imagick is more powerful.

Conclusion

Image manipulation in CodeIgniter 4 is simple once you understand the basic flow: load, process, and save.

The key is not just knowing how to use rotate(), resize(), or crop(), but understanding when to use each and how to optimize results for performance and quality.

If you apply these practices correctly, you will be able to:

  • Optimize weight
  • Improve web performance
  • Generate professional thumbnails
  • Avoid distorted images

And all directly from the backend.

You can see the full code; this material is part of my complete CodeIgniter 4 course:

https://github.com/libredesarrollo/curso-codeigniter-4/blob/main/app/Controllers/ImageManipulation.php

Digital image processing are mechanisms that always exist when working with images in web applications, re-scaling, reducing quality, rotating, among others, can be done in CodeIgniter 4.

I agree to receive announcements of interest about this Blog.

Andrés Cruz

ES En español
CodeIgniter PHP Imagen

Your experience on this site will be improved by allowing cookies.