Optimizar imágenes para web | Blog de Hosting WordPress

¿Por qué razón optimizar imágenes para web es una labor tan relevante y prácticamente indispensable que debes efectuar?

Da igual el tipo de web que tengas, es un hecho que cada vez empleamos y subimos más imágenes a nuestras webs, es una tendencia en alza irrefrenable.

Al mismo tiempo, desde hace años es mayor la relevancia que Google le da al WPO de una web para posicionarla.

También te puede interesar: Guía de optimización WPO

En esa optimización de los tiempos de carga de una web los elementos que más peso acostumbran a tener y también repercusión en los tiempos de carga acostumbran a ser las imágenes.

Así puesto que, este es uno de los primordiales factores por los que la optimización de imágenes es clave.

A lo largo de este blog post veremos de qué manera podemos optimar adecuadamente todas de las imágenes que tengas en tu web.

el mejor hosting wordpress
Índice

    ¿En qué momento se estima que una imagen está optimada?

    Una imagen optimada es esa que tanto su peso como su tamaño son los precisos y adecuados para ser mostrada en distintos tamaños de pantalla de diferentes dispositivos.

    O lo que es exactamente lo mismo, una imagen optimada debe mostrarse adecuadamente en cualquier clase de dispositivo.

    La forma de optimar las imágenes se fundamenta en 2 labores clave a realizar:

    • Reducción de su tamaño: ajustar su tamaño al límite que se marcha a enseñar pantalla
    • Reducción de su peso: comprimir el fichero sin que sea observable una pérdida de calidad en su visualización

    Tenemos que tomar en consideración que asimismo afectan al peso los formatos del propio fichero.

    Los más frecuentes en web son los siguientes:

    Por otro lado debemos tomar en consideración que este proceso es plenamente relativo en dependencia del propio empleo que vayamos a hacer de las imágenes y dónde se muestren.

    Por ejemplo, no es exactamente el mismo empleo el de una imagen que vamos a emplear en el slider del encabezado primordial de una web a ancho completo que el de la imagen interna de un blog post como este que lees ya.

    Evidentemente, la imagen del slider debe tener un mayor tamaño para que se muestre adecuadamente y por consiguiente asimismo va a ser ineludible que pese más.

    Si la imagen de ese slider tiene el ancho máximo al que se marcha a enseñar, tiene un formato apropiado, y se ha comprimido al límite posible su peso, la vamos a tener optimizada.

    En cambio, una imagen como la del blog post si no la reducimos de tamaño al ancho del propio weblog en el que se muestra, y esta es mayor, si bien la comprimamos y el peso final sea inferior a la imagen del slider, esa imagen no estará optimizada.

    Por tanto, no se trata de conseguir el menor peso posible en cualquier caso.

    ¿Qué métodos podemos emplear para optimar las imágenes?

    Podemos distinguir 2 formas de hacer todo el proceso de optimización.

    Método manual

    Es el que realizamos y que aplicamos en esta web, además de esto va a ser el que te explicaremos ampliamente a lo largo de este blog post.

    Es un proceso absolutamente manual cuyas labores de optimización efectuamos de forma anterior a la subida de las imágenes a nuestra web.

    Por tanto, en el momento en que subimos las imágenes a nuestra web ya están a la perfección optimados y listas para ser mostradas.

    Este procedimiento tiene una ventaja esencial que deseamos destacar:

    • Nos deja tener un control total sobre todo el proceso de optimización de las imágenes

    Por contra, la primordial desventaja que tiene:

    • Es más pesado y requiere ciertas rutinas

    Método de automatización en servidor

    Es el proceso por el que optimizamos las imágenes una vez subidas al servidor donde está alojada nuestra web.

    Su optimización se puede hacer en WordPress de forma automática a través de complementos que se hacen cargo de alterar el tamaño, comprimir el peso o bien aun mudar los formatos de las propias imágenes, creando copias aun.

    La primordial ventaja de este método:

    • No precisamos hacer prácticamente nada, salvo una configuración inicial para todo el proceso.

    Y la primordial desventaja:

    • Estamos usando recursos del propio servidor que asimismo requiere tu web para otros procesos

    Optimización de imágenes de forma manual

    A continuación te explicaremos los pasos que realizamos frecuentemente para hacer una optimización manual ya antes de subir las imágenes al servidor de la web.

    1- Reducir el tamaño de las imágenes

    Este es el paso inicial de todos, mas ya antes precisamos conocer el tamaño máximo al que se marchan a enseñar nuestras imágenes.

    En general nos será suficiente con conocer el ancho máximo para establecer el tamaño final al que ajustar cada imagen.

    Para conocer ese ancho máximo nos podemos servir de la funcionalidad «inspeccionar» (lleva por nombre de esta forma en Google Chrome) mas la tienes libre asimismo en otros navegadores.

    Simplemente sitúate en esa sección de tu web en la que irá tu imagen y activa esta funcionalidad de tu navegador.

    Inspector Google Chrome

    De este modo puedes conocer el tamaño preciso en pixeles de tus imágenes cuando se muestran.

    Te puede Interesar  7 herramientas para probar tu web en dispositivos móviles

    Una vez tenemos esas medidas ya podemos emplear la herramienta que más nos interese emplear, como Photoshop, Gimp, Paint, Canva o bien alguna herramienta en línea gratis como esta que te mostramos ahora.

    Se trata de Picresize y reduce el tamaño de nuestra imágenes de forma individual o bien en lotes.

    Entre los beneficios de esta herramienta se hallan que podemos alterar tanto el ancho como el alto con las medidas exactas para ese sitio mas asimismo que podemos seleccionar cambiar el formato original por otro más apropiado y que pese menos.

    optimizar imágenes con picresize

    ¿Exactamente en qué casos mudar de formato?

    En la mayor parte de los casos es conveniente mudar de PNG a Jpg por el menor peso y compresión que acepta este otro formato.

    Eso sí, transforma a Jpg siempre que tu imagen no tenga fondo transparente o bien gráficos que requieran de una mayor calidad de visualización.

    Utilizar esta herramienta es muy sencillo:

    1. Accede y elige una o bien múltiples imágenes que puedes sencillamente arrastrar o bien escoger de tu equipo
    2. Sube a la herramienta esa imagen o bien imágenes
    3. Selecciona los ajustes de tamaño final y formato
    4. Selecciona «guardar en disco»

    2- Comprimir el peso de las imágenes

    Una vez tenemos las imágenes reducidas al tamaño ideal ahora es necesario comprimir esas imágenes para que pesen menos, mas sin perder calidad de forma aparente.

    Es esencial que prosigas estos pasos y no comprimas ya antes de ajustar el tamaño.

    Para comprimir el peso de nuevo puedes emplear exactamente las mismas herramientas offline que te señalábamos ya antes para alterar su tamaño o bien asimismo puedes emplear exactamente la misma herramienta en línea que usamos: Tinypng.

    Tiny png optimizar imágenes online

    Con Tinypng puedes comprimir el peso de imágenes en formato PNG o bien Jpg de forma indistinta de forma individual o bien en lote (hasta veinte ficheros al unísono) y conseguir reducciones de peso de un enorme porcentaje y sin perder en ningún caso calidad observable en nuestras imágenes.

    ¡Te desafiamos a que hagas la prueba y examines la fotografía una vez comprimida!

    Su funcionamiento es muy sencillo:

    1. Arrastramos o bien escogemos la imagen/imágenes
    2. Hacemos click en descargar de forma individual o bien en lote para descargar un .zip con todas y cada una de las imágenes

    ¡Y con esto ya tendríamos listas nuestras imágenes para subirlas optimados a nuestra web!

    El mejor Hosting para WooCommerce

    Optimización de imágenes de forma automática

    Bien, hasta el momento te hemos contado el procedimiento que acostumbramos a hacer y que es el que te invitamos a mas asimismo te vamos a señalar otros modos automáticos de optimizar una vez subidas las imágenes al servidor.

    ¿Para qué exactamente casos o bien situaciones te puede resultar útil y preciso?

    • Cuando la administración de esa web es compartida o bien se deja la subida de imágenes a otras personas. Puede ser el caso de un foro de discusión.
    • Cuando ya existen imágenes subidas previamente y se necesite optimizarlas

    Tal y de qué manera afirmábamos al comienzo de este blog post en WordPress hay complementos que nos lo ponen muy simple.

    Estas son nuestras recomendaciones.

    Litespeed Cache

    Plugin LiteSpeed Cache

    Este es uno de nuestros complementos preferidos, uno de los que te invitamos a asimismo en este blog post.

    Entre las muchas funcionalidades estupendas que trae ofrece asimismo la compresión de imágenes sin perder calidad.

    También has de saber que para aprovechar todo el potencial de este complemento tu alojamiento web debe tener libre esta tecnología desde el propio servidor.

    Por supuesto en Host-Fusión la incluimos en todos y cada uno de los planes para nuestros clientes del servicio.

    Puedes conocer más a fondo todo el potencial de este complemento acá.

    Imagify

    optimizar imágenes con plugin imagify

    Imagify es un complemento estupendo que de forma automática comprime en lote todas y cada una de las imágenes que subas a tu web pudiendo además de esto seleccionar de forma anterior la compresión que deseamos aplicar.

    Además, otra funcionalidad que nos agrada mucho y que incorpora es la conversión de las imágenes al formato WebP, de mucho menos peso, con mayor compresión y afín calidad.

    Tinypng

    tiny png plugin WordPress para optimizar imágenes

    Sí, de Tinypng te hemos hablado ya antes, mas es que además de esto de herramienta en línea asimismo disponen de complemento para WordPress (hasta para Photoshop) que comprime las imágenes igual de bien, con lo que no podíamos dejar de aconsejarlo.

    ¡Tan fácil como instalar y empezar a optimar en tu web las imágenes que subas de forma automática!

    Conclusiones

    A lo largo de este blog post te hemos contado los métodos libres para hacer una adecuada optimización mas deseamos que te quedes verdaderamente con lo más esencial que te queremos transmitir:

    Lo esencial no son las herramientas que uses sino comprendas la relevancia de contar con de imágenes optimados en tu web

    Nuevamente, si te preocupan los tiempos de carga y el posicionamiento web en buscadores de tu web no puedes prescindir de la optimización de tus imágenes.

    ¡Si no lo has hecho ya ponte con esto, aguardamos que esta pequeña guía que hemos elaborado para optimar imágenes para web te sirva!

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo Mas Información