Tabla de contenidos
Importancia de la optimización de imágenes
Aunque cada vez nuestros ordenadores, móviles y tablets son cada vez más potentes, las páginas web que visitamos cuentan cada vez con más contenido y de mayor calidad para un mejor experiencia del usuario. Esto significa que, si visitamos una de estas páginas web que tienen contenido multimedia (fotos, videos, etc) y el servidor tiene componentes hardware limitados, veremos cómo el tiempo de carga de la web será mayor si se siguen utilizando los formatos convencionales de contenido multimedia.
Las imágenes que contiene una página web son una de las mayores responsables de que su página web cargue más lento. Si a esto le añadimos que una sola página puede contar con un montón de imágenes de gran calidad, entonces la cosa se puede complicar.
Sin embargo, hace unos años comenzó a usarse el formato WebP, una forma más eficiente para las imágenes en Internet.
¿Qué es WebP?
Webp es un formato de archivo creado por Google para reducir el tamaño de las imágenes y así disminuir el tiempo de carga de estas. Algo que, por otra parte, se ha convertido en una necesidad debido a que hoy en día, la mayor parte del tiempo que navegamos por Internet, lo hacemos desde el móvil. De esta manera se produce un ahorro en el ancho de banda y, por lo tanto, una carga más rápida de las imágenes de aquellas webs que utilizan este formato de imagen.
Presencia en navegadores web
Google Chrome fue el primer navegador web en soportar de forma nativa el formato WebP en 2010, no es de extrañar puesto que fue el propio gigante de Internet el que desarrolló este formato. El segundo navegador web en utilizarlo fue Opera 11.10 que, tras unos años de ausencia, vuelve a utilizarlo intensivamente para comprimir imágenes cuando se activa el modo turbo de navegación.
Posteriormente fue adoptado gradualmente por la mayoría de navegadores web, como Microsoft Edge, Mozilla Firefox, Baidu, Opera Mobile y Opera Mini y Android Browser. Finalmente, el navegador de Apple, Safari, fue el último en adoptar la compatibilidad con este formato dentro de la guerra de plataformas entre los gigantes de Internet.
WebP animado
Google no solo pretende ser el estándar que sustituya al formato JPG para imágenes comprimidas sino que le ha declarado la guerra al formato GIF para imágenes animadas. Es la alternativa perfecta a formatos como GIF o APNG. Combina la ventaja de la alta compresión explicada más arriba con otras características destacables como la profundidad de color de 24 Bits y el canal alfa de 8 Bits.
Las propiedades de este formato animado siguen siendo las mismas que con la forma estática. La compresión se puede realizar con pérdida o sin ella a diferencia de las extensiones mencionadas, y también se pueden incluir metadatos en los archivos. En este tipo de formatos animados, la compresión sin pérdida podría suponer una reducción del 19% del tamaño de archivo en comparación con sus rivales, si la compresión es con pérdida, la reducción aumentaría hasta el 64%.
Implementación de WebP en PHP
Explicación de la función imageWebP
Para poder implementar imagenes WebP en PHP, disponemos de la función en PHP imagewebp. La función se la puede enviar 3 parámetros:
- Imagen física
- Ruta donde se guardará la imagen
- Calidad de imagen (opcional)
Explicación de la función que convierte imágenes a WebP en PHP
Paso 1: Creamos un objeto e identificamos el nombre y extensión de la imagen.
Llamaremos a nuestra función convertImgtoWebP, cuyo parámetro de entrada será la URL de la imagen. En ella vamos a convertir nuestra imagen en un objeto y vamos a recoger la siguiente información:
- Extensión del fichero
- Nombre del fichero
- Array de las extensiones que vamos a permitir
//Recogemos nombre y ext. de la imagen por separado
$Fimg = new SplFileInfo($img);
$extImg = $Fimg->getExtension();
$nombreImg = $Fimg->getBasename('.'.$extImg);
//Mostramos el listado
$listExt = array('jpeg','jpg','gif','png','bmp');Paso 2: Detectamos la extensión de la imagen y dirigimos a una función específica
Recorremos el listado de extensiones permitidas (array) y comparamos con la extensión de la imagen. Si existe, según la extensión nos va a dirigir a una función según la extensión. La nueva imagen la vamos va a tener el mismo nombre con extensión .webp .
//Extensiones permitidas
$listExt = array('jpeg','jpg','gif','png','bmp');
//Recorremos el Array y vemos si coincide con la ext. de la imagen que vamos a convertir
foreach ($listExt as $ext) {
if($ext == $extImg){
//Identificamos la extensión y la redirigimos a la función según la ext.
switch ($extImg){
case 'jpeg':
imagewebp(imagecreatefromjpeg($img),$nombreImg.'.webp');
break;
case 'jpg':
imagewebp(imagecreatefromjpeg($img),$nombreImg.'.webp');
break;
case 'gif':
imagewebp(imagecreatefromgif($img),$nombreImg.'.webp');
break;
case 'png':
imagewebp(imagecreatefrompng($img),$nombreImg.'.webp');
break;
case 'bmp':
imagewebp(imagecreatefrombmp($img),$nombreImg.'.webp');
break;
}
}
}
Paso 3: Llamamos la función con una foto del sistema
Llamamos la función convertImgToWebP y ponemos la URL de la foto que queremos convertir las imagenes en WebP en PHP:
convertImgToWebP('lacodigoteca.jpg');
Código completo
<?php
function convertImgToWebP($img){
//Recogemos nombre y extensión de la imagen por separado
$Fimg = new SplFileInfo($img);
$extImg = $Fimg->getExtension();
$nombreImg = $Fimg->getBasename('.'.$extImg);
//Mostramos el listado
$listExt = array('jpeg','jpg','gif','png','bmp');
foreach ($listExt as $ext) {
if($ext == $extImg){
switch ($extImg){
case 'jpeg':
imagewebp(imagecreatefromjpeg($img),$nombreImg.'.webp');
break;
case 'jpg':
imagewebp(imagecreatefromjpeg($img),$nombreImg.'.webp');
break;
case 'gif':
imagewebp(imagecreatefromgif($img),$nombreImg.'.webp');
break;
case 'png':
imagewebp(imagecreatefrompng($img),$nombreImg.'.webp');
break;
case 'bmp':
imagewebp(imagecreatefrombmp($img),$nombreImg.'.webp');
break;
}
}
}
return;
}
convertImgToWebP('lacodigoteca.jpg');
?>
Espero que os haya servido útil este artículo de convertir cualquier imagen a WebP en PHP 😉 si queréis ver más utilidades en PHP, os recomiendo que visitéis el siguiente enlace.