Acá es importante entender qué tipo/formato de imágenes necesitamos subir para una determinada función, por ejemplo, si queremos trabajar logos o imágenes con transparencia, utilizaremos el formato .PNG. Estas imágenes generalmente son muy pesadas, por lo que no se recomienda su uso masivo en la web, como en un producto, por ejemplo. Si cargamos fotos de productos, lo recomendable es que sean en un formato .JPG o .JPEG, ya que son formatos más livianos. En cuanto al tamaño, este depende de lo que necesitamos. Si vendemos telas y necesitamos que nuestros clientes hagan zoom-in en las fotos para ver la tele con lujo de detalles, entonces estaría bien cargar fotos de 3.000 pixeles de ancho o alto, pero si vendemos productos de belleza como labiales, esmaltes, tinturas para el pelo o similares, entonces no necesitamos fotos más grandes que 1.000 pixeles de ancho o alto.

En Woocommerce, la página de detalle del producto se le conoce como single product page y en este podemos ver la foto en grande (versus el catálogo que se muestra pequeño), cuyo tamaño aproximado, si bien puede ser variable, no suele exceder los 600 pixeles de ancho y alto. Dicho esto, si subimos una foto de 1000x1000 como ejemplo, la persona que visite el detalle del producto verá una foto de 600x600 de todas formas. Si está habilitada la función Zoom-In, podrá quizás ver ese detalle de los 1000x1000 al hacer zoom, pero si no nos interesa o no tendremos la función de zoom en la foto, entonces bastará con cargar fotos de 600x600 o 700x700 en nuestro directorio multimedia (directorio de imágenes y otros archivos de Wordpress).

Importante saber que Wordpress genera copias de las imágenes que subimos en versiones más pequeñas, por un tema de optimización (esto no es visible en nuestro directorio de archivos multimedia). Esto quiere decir que podríamos subir una foto de 6000x6000 pixeles y Wordpress generará una copia de 1000x1000, otra de 500x500 y otra de 200x200 pixeles, por dar un ejemplo, entonces tendremos nuestra foto original más 3 copias o quizás 10 copias adicionales (esto depende del Theme instalado y la configuración de Wordpress que tengamos).

Desde el plan Emprende 2, Segurihost provee una herramienta en su versión PRO llamada WP-Smush, que permite una optimización de las imágenes manteniendo las originales por seguridad, pero depender de esta herramienta en un 100% es un error. La razón es que detrás de todo esto hay un hosting (alojamiento web con un espacio limitado), por lo que, si cargamos fotos que pesan 6 MB o más, esas fotos originales que quedan guardadas por seguridad, igual quedan en el disco y en definitiva estaremos usando espacio en el hosting sin ningún sentido lógico. Hagamos una multiplicación sencilla: Tenemos 100 productos y 1 sola imagen en cada producto (poco probable ¿cierto?), Wordpress ya sabemos que genera copias de las imágenes que subimos (por lo que leímos anteriormente), entonces si subimos fotos de 6 MB de peso, ya estaremos solo en archivos de imagen utilizando un DESDE de 600 MB. Si sumamos las copias más pequeñas, podría ser que, por cada producto ocupemos 7 u 8 MB en imágenes, es decir, un total de 700 a 800 MB en fotos. En la realidad subimos entre 2 a 3 imágenes por cada producto si vendemos ropa, en ese caso estaríamos usando más de 2 GB en hosting solo en fotos.

¿Qué podemos hacer con lo anterior?

Comprimir y redimensionar antes de cargar las fotos, aunque WP-Smush ya haga su trabajo. Para ello existen herramientas online que nos pueden ayudar, como por ejemplo https://www.iloveimg.com/. Este sitio nos permite recortar, redimensionar, comprimir, convertir a jpg, etc., todo lo que necesitamos y, lo mejor de todo, podemos cargar un directorio lleno de fotos para que haga el trabajo masivo que necesitemos de forma gratuita.

Con esto, esas imágenes que quizás pesaban 6 MB o más, seguramente ahora pesan no más de 300 KB, y cuando las carguemos en Wordpress, WP Smush guardará esa copia de 300 KB como el original. Ya estaremos ahorrando más de un 80% en imágenes.

DATO: WP-Smush guarda las copias originales que cargamos sin tocarlas (esas imágenes de 6 MB o más), por si desistimos de usar la herramienta y así restaurar las copias originales.

 

Dato: Como otra opción de optimización manual tenemos https://cloudconvert.com, donde podemos convertir nuestras imagenes a WEBP, logrando una optimización mucho mayor.

Si manejamos imágenes en PNG sin transparencia, una buena práctica sería transformarlas a JPG en https://www.iloveimg.com/, luego comprimir y finalmente en https://cloudconvert.com pasarlas a WEBP. Comparamos el peso del archivo JPG ya comprimido y la calidad visual. Si el archivo WEBP mantiene buena calidad y tiene un peso menor que su versión en JPG, entonces deberemos cargar esta en nuestro sitio web.