...
✅ Noticias, temas, complementos de WEB y WordPress. Aquí compartimos consejos y las mejores soluciones para sitios web.

Optimización de imágenes mediante el paquete artisansweb / image-optimizer

44

Han pasado 4 años y ahora estoy ejecutando este blog. Junto con este blog, también tengo un canal de YouTube donde comparto videos que muestran cómo implementar mis artículos.

Creo en el código abierto. En mi sitio web no tengo ninguna membresía paga, no vendo libros electrónicos ni cursos. Me gusta mantener los recursos libres. Con eso en mente, creé mi primer paquete de GitHub artisansweb / image-optimizer que hace la tarea de optimizar las imágenes para su sitio web.

Escribí algunos artículos sobre optimización de imágenes en el pasado. Hasta ahora, TinyPNG era mi favorito y aún lo es. Pero la limitación con TinyPNG es que permiten optimizar 500 imágenes gratuitas por mes. Por encima de 500 imágenes, se cobrará por imagen.

Pocos artículos anteriores sobre optimización de imágenes:

También hay otros paquetes, pero requieren que instalemos software como JpegOptim, Optipng, etc. en nuestra máquina. Esa tampoco es una solución factible.

El año pasado estuve trabajando en el proyecto de un cliente que tiene miles de imágenes necesarias para comprimir. Buscábamos un servicio de código abierto y eficiente que pudiera hacer nuestro trabajo. Luego conocimos reSmush.it, que es un servicio completamente gratuito para optimizar imágenes.

Aunque escribí un artículo sobre reSmush.it, creo que puedo crear un paquete de GitHub a partir de él y así lo hice. Si lees mi artículo sobre reSmush.it, encontrarás que es necesario agregar entre 25 y 30 líneas de código. Pero si opta por el paquete, puede hacerlo en 5-6 líneas.

Dicho esto, analicemos cómo instalar y usar el artisansweb/image-optimizerpaquete.

Optimización de imágenes usando PHP

Al principio, debe instalar el paquete utilizando Composer ejecutando el comando:

composer require artisansweb/image-optimizer

Tras la instalación del paquete, puede optimizar la imagen utilizando el siguiente código.

<?php
require_once "vendor/autoload.php";
 
use ArtisansWebOptimizer;
 
$img = new Optimizer();
 
$source = 'SOURCE_PATH_OF_IMAGE';
$img->optimize($source);

Aquí, debe pasar la ruta completa del directorio de la imagen de origen y su imagen de origen se optimiza automáticamente. A veces, es necesario conservar la imagen original y almacenar la versión optimizada en otro directorio. En ese caso, puede utilizar un segundo parámetro para el destino.

<?php
$source = 'SOURCE_PATH_OF_IMAGE';
$destination = 'DESTINATION_PATH_OF_IMAGE';
$img->optimize($source, $destination);

Usando el código anterior, puede optimizar sus imágenes que están dentro de su directorio. Sin embargo, recomendaría optimizar la imagen en la carga para que no necesite realizar tareas de optimización por separado.

El usuario puede optimizar la imagen en la carga de la siguiente manera.

<?php
require_once "vendor/autoload.php";
 
use ArtisansWebOptimizer;
 
if (isset($_POST['submit'])) {
    $img = new Optimizer();
    move_uploaded_file($_FILES['file']['tmp_name'], 'images/'.$_FILES['file']['name']);
    $img->optimize('images/'.$_FILES['file']['name']);
}
?>
 
<form method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" name="submit" value="Submit" />
</form>

Aunque reSmush.it comprimió miles de millones de imágenes hasta ahora, es posible que su servicio no funcione por alguna razón. Manejé este escenario en el paquete. Por alguna razón, si el paquete no obtiene la versión optimizada de reSmush.it, entonces, como alternativa, usa los métodos nativos de PHP como imagecreatefromjpeg, imagecreatefrompng, imagecreatefromgif, imagejpeg para la optimización.

Hay varias características nuevas en progreso que agregaré en el paquete y lo lanzaré pronto.

Estaré encantado si usa el paquete y me deja saber cómo está funcionando en la sección de comentarios a continuación. Comparta sus comentarios para que juntos podamos mejorar este paquete que ayudará a la comunidad.

Fuente de grabación: artisansweb.net

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More