Procesamiento digital de imágenes en CodeIgniter 4

- Andrés Cruz

EN In english

Procesamiento digital de imágenes en CodeIgniter 4

La manipulación de imágenes en el backend es una de esas funcionalidades que tarde o temprano necesitas: redimensionar imágenes subidas por usuarios, recortar thumbnails, optimizar peso para mejorar velocidad o incluso rotarlas automáticamente.

En esta guía te voy a enseñar cómo hacerlo en CodeIgniter usando su librería de imágenes. No solo veremos el código, sino cuándo usar cada método y cómo evitar errores comunes.

Vamos a conocer como podemos realizar operaciones sobre imágenes en CodeIgniter 4; en otras palabras, el procesamiento digital de imágenes; vamos a conocer las comunes.

Qué es la manipulación de imágenes en backend

Cuando hablamos de manipulación o procesamiento digital de imágenes en backend, nos referimos a modificar imágenes directamente en el servidor usando PHP.

Esto incluye:

  • Rotar imágenes
  • Redimensionarlas
  • Recortarlas
  • Reducir su calidad
  • Generar thumbnails
  • Ajustar proporciones

La mayoría de veces he necesitado esto para optimizar imágenes subidas por usuarios. Suben fotos enormes (4000px o más) y si no las procesas, tu servidor y tu rendimiento web lo van a notar.

Librerías disponibles: GD vs Imagick

En CodeIgniter 4 puedes trabajar con:

  • GD (por defecto en muchos servidores)
  • Imagick (más potente y flexible)

GD

  • Más común.
  • Suficiente para operaciones básicas.

Imagick

  • Mejor rendimiento en operaciones complejas.
  • Más opciones avanzadas.
  • Ideal para crop precisos y procesamiento profesional.

Si tu proyecto requiere procesamiento intensivo, Imagick suele ser mejor opción.

Cómo funciona la librería Image en CodeIgniter 4

Para todas las operaciones, siempre tenemos que cargar la imagen que queremos procesar; para eso, tenemos un servicio en CodeIgniter 4:

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

De por medio, tenemos la operación que queremos realizar, rotar, escalar, crop...

Y finalmente, guardamos el resultado con:

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

El flujo es siempre el mismo:

cargar → procesar → guardar

Este patrón es clave. De hecho, siempre trabajo así: primero preparo el archivo, luego aplico la operación que necesito (rotar, escalar, crop…) y por último guardo el resultado.

Preparando nuestras operaciones sobre la manipulación de imágenes

Vamos a crear un archivo controlador y su respectiva clase en donde registramos estas operaciones:

class ImageManipulation extends BaseController
{
}

Ya con esto estamos listos para realizar cada una de las operaciones; entre las principales tenemos:

Rotar imágenes

Para rotar imágenes en 360 grados, tenemos la función llamada rotate la cual recibe los grados que deseas rotar:

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');
}

El parámetro indica los grados (0–360).

Rotar imágenes suele ser necesario cuando los usuarios suben fotos desde el móvil con orientación incorrecta. Aplicar un rotate(270) o rotate(90) resuelve el problema rápidamente.

Redimensionar imágenes: resize vs fit

La función llamada resize recibe tres parámetros:

  1. Escalado en el eje X
  2. Escalado en el eje Y
  3. Si deseas mantener las proporciones de la imagen o el 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');
    }

Parámetros:

  • Ancho
  • Alto
  • Mantener proporciones (true/false)

Si colocas false, puedes deformar la imagen.

O

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');
    }

Este método:

  • Ajusta proporciones automáticamente
  • Recorta lo necesario
  • Centra la imagen

En la práctica, casi siempre uso fit() cuando necesito thumbnails cuadrados. Me ha evitado deformaciones visuales en galerías.

¿Cuándo usar cada uno?

 

  • Mantener proporciones estrictas → resize(true)
  • Crear thumbnails perfectos → fit()
  • Reducción rápida sin precisión → resize(false)

Recortar imágenes (crop) correctamente

Para recortar una porción de la imagen, tenemos la función de image_crop, la cual le tienes que especificar una librería; generalmente se usa la de 'imagick' la cual nos permite hacer este tipo de operaciones fácilmente; la función crop recibe 4 puntos, que equivalen a la posición 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');

Calcular offsets dinámicos es mucho mejor que usar valores fijos. Puedes obtener propiedades de la imagen y centrar el recorte automáticamente.

Reducir calidad y peso de imágenes

Bajar la calidad de las imágenes es útil para reducir el peso sobre las mismas:

   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);
    }

El Factor, en este ejemplo 15 determina la calidad de la imagen, en donde 0 es lo menos posible y 100 por ciento es la calidad máxima.

El segundo parámetro indica calidad:

  • 0 → mínima calidad
  • 100 → máxima calidad

Suelo trabajar entre 60 y 80 para equilibrio entre calidad visual y peso.

Reducir calidad puede disminuir drásticamente el tamaño del archivo sin afectar perceptiblemente la imagen.

Código completo del controlador

Finalmente, el código completo del ejercicio:

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');
    }
}

Buenas prácticas y errores comunes

  • No deformar imágenes sin intención.
  • No guardar siempre con calidad 100.
  • Validar que el archivo exista antes de procesarlo.
  • Usar Imagick si el servidor lo permite.
  • No sobrescribir imágenes originales sin backup.

Preguntas frecuentes sobre manipulación de imágenes

  • ¿Cómo rotar una imagen en CodeIgniter 4?
    • Usando el método rotate(grados) antes de guardar.
  • ¿Cómo mantener proporciones al redimensionar?
    • Usa resize(ancho, alto, true) o mejor fit().
  • ¿Cómo reducir el peso de una imagen?
    • Ajustando el segundo parámetro de save().
  • ¿CodeIgniter usa GD o Imagick?
    • Puede usar ambas. GD es común; Imagick es más potente.

Conclusión

La manipulación de imágenes en CodeIgniter 4 es sencilla cuando entiendes el flujo básico: cargar, procesar y guardar.

La clave no está solo en saber usar rotate(), resize() o crop(), sino en entender cuándo usar cada uno y cómo optimizar resultados para rendimiento y calidad.

Si aplicas estas prácticas correctamente, podrás:

  • Optimizar peso
  • Mejorar rendimiento web
  • Generar thumbnails profesionales
  • Evitar imágenes deformadas

Y todo directamente desde el backend.

Puedes ver el código completo, este material forma parte de mi curso completo de CodeIgniter 4:

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

El procesamiento digital de imágenes son mecanismos que siempre existen al momento de trabajar con las imágenes en aplicaciones web, re-escalar, reducir la calidad, rotar entre otras las podemos hacer en CodeIgniter 4.

Acepto recibir anuncios de interes sobre este Blog.

Andrés Cruz

EN In english
CodeIgniter PHP Imagen

Su experiencia en este sitio será mejorada con el uso de cookies.