Cómo editar y optimizar imágenes en HubSpot

Última actualización: January 24, 2018

Requisitos

Sitio web add-on

Añadir imágenes a una página, blog, correo electrónico o en publicaciones de las redes sociales hace que el contenido sea más interesante. Las imágenes pueden ayudar a aumentar las tasas de clickthrough de las publicaciones de redes sociales y los correos electrónicos, pero también mantienen a los usuarios en tus páginas y artículos por más tiempo.

Si bien la infraestructura de última generación que utiliza HubSpot para ofrecer contenido optimiza el tiempo de carga de las páginas que experimentan los usuarios de todo el mundo, cargar demasiados archivos de imágenes de alta resolución a tu sitio web puede reducir la velocidad de carga y hacer que los usuarios abandonen tus páginas. Del mismo modo, incluir varios archivos grandes de imágenes en un correo electrónico también aumenta las probabilidades de que el mensaje quede atrapado en un filtro de spam. Si bien puedes ajustar el tamaño de visualización de una imagen con un código HTML o en el editor WYSIWYG de HubSpot, esta acción no reduce el tamaño del archivo. Esto ocasiona que muchos profesionales del marketing dependan de herramientas como Adobe Photoshop y Pixlr.com para cambiar el tamaño, recortar, añadir texto, crear filtros y guardar las imágenes para usarlas en la web, pero esto implica dedicar mucho tiempo a aprender las características de otros softwares.

Gracias a HubSpot, ahora es fácil editar y cambiar el tamaño de las imágenes para tus páginas, artículos y publicaciones de redes sociales directamente desde el Editor de Contenido, Administrador de ArchivosEditor para Redes Sociales. Algunas aplicaciones útiles del editor de imágenes incluyen características para:

  • Reducir las dimensiones y el tamaño del archivo de imagen para disminuir el tiempo de carga de las páginas y garantizar que las imágenes tengan el ancho adecuado.
  • Recortar las imágenes para que se ajusten mejor a tu contenido.
  • Añadir texto, calcomanías y dibujos a las imágenes para explicar mejor o resaltar ciertas áreas de una imagen.
  • Ajustar el brillo y el contraste de una foto para que la imagen sea clara.

Optimizar las imágenes para usarlas en la web

La optimización de imágenes para la web tiene beneficios técnicos y de SEO. Estos son algunos consejos para optimizar tus imágenes en las páginas de HubSpot:

  • Las imágenes en las páginas o los correos electrónicos con diseño adaptable se pueden ampliar hasta su tamaño natural, de modo que, por lo general, no necesitarás que una imagen sea más grande que el contenido principal de tu página (suele ser de 980 px a 1280 px) o correo electrónico (suele ser de 600 px). Una excepción donde quizá debas tener una imagen con mayor resolución es al usar imágenes de fondo grandes.
  • Reducir las dimensiones y el tamaño de archivo de una imagen puede servir para evitar que los correos electrónicos queden atrapados en los filtros de spam (además de incluir más texto en el mensaje).
  • Añadir texto alt o descripciones en las imágenes puede ayudar a que los motores de búsqueda y los lectores de pantalla interpreten tus imágenes y comprendan el contenido. Usa palabras clave orientadas y relevantes que puedes encontrar con la herramienta Palabras Clave para mejorar el SEO de tu contenido.
  • Cuando la imagen tenga el tamaño adecuado, podrás realizar más ajustes con el Editor de Contenidos WYSIWYG de HubSpot.

Instrucciones

Es posible acceder al Editor de Imágenes al adjuntar una imagen en una publicación en redes sociales, cargar una imagen en el Administrador de Archivos o añadir una imagen en el Editor de Contenido. Si bien las opciones de edición son las mismas sin importar cómo accedas a la imagen, este tutorial se centra en añadir una imagen a través del Editor de Contenido. Sigue estas instrucciones para editar una imagen cuando la agregues a una página del sitio web, un correo electrónico, una página de destino o una publicación en el blog.

1. Acceder al Editor de Contenido

En este ejemplo accederemos al Editor de Contenido al editar una página del sitio web (Contenido > Páginas del Sitio Web), pero los siguientes pasos también funcionan para el correo electrónico, las páginas de destino y las publicaciones en el blog.

2. Hacer clic en Añadir Imagen

Puedes añadir una imagen en distintos tipos de módulos, pero en este ejemplo, agregaremos una imagen en un módulo de texto enriquecido. Haz clic en el símbolo de insertar/editar imagen.

HubSpot Help article screenshot

3. Cargar o seleccionar una imagen nueva

Puedes cargar una imagen nueva o editar una imagen existente. HubSpot también ofrece una carpeta de fotografías de stock.

HubSpot Help article screenshot

4. Hacer clic en Clonar y Editar

Haz clic en el símbolo del engranaje y selecciona Clonar y Editar.

HubSpot Help article screenshot
Recuerda que debes guardar la imagen como JPG o PNG para poder editarla en el Editor de Fotos de HubSpot. Si no ves la opción de Clonar y Editar, asegúrate de que la imagen se haya guardado con la extensión de archivo correcta (.jpg o .png).

5. Editar la imagen

El Editor de Fotos cuenta con varias características de edición avanzadas que puedes usar de manera individual o en conjunto. El Editor de Fotos tiene las siguientes características:

Recortar

Esta característica elimina las partes exteriores de una selección y cambia la proporción de las imágenes. Es útil para cambiar la forma o eliminar el espacio adicional de una imagen.

Para recortar una imagen, haz clic en RecortarArrastra las esquinas de la selección o elige un valor predeterminado. Haz clic en Aplicar para recortar la imagen. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Cambiar el tamaño

Gracias a esta característica puedes ajustar las dimensiones de una imagen. Al reducir las dimensiones de la imagen, también reduces el tamaño del archivo y mejoras su velocidad de carga.

Para cambiar el tamaño de una imagen, haz clic en Cambiar el Tamaño, introduce las dimensiones nuevas (puedes indicar si deseas establecerlas o no) y haz clic en Aplicar. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Orientación

Esta característica te permite girar o dar vuelta una imagen. Puede ser útil si la imagen que cargaste no se orienta correctamente de manera automática.

Para cambiar la orientación de una imagen, haz clic en Orientación, haz clic en los botones Girar o Dar Vuelta y después en Aplicar. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Texto

Puedes usar la función de texto para agregar notas o texto en una imagen. Añadir texto a una imagen es una gran manera de explicar el contenido que muestra o relacionarla con el texto de la página o publicación. También es una característica útil para colocar texto en las imágenes de los correos, ya que muchos clientes de correo electrónico no admiten las imágenes de fondo.

Para añadir texto, haz clic en Texto, escríbelo y haz clic en Aplicar. Además de añadir varios cuadros de texto, también puedes cambiar la fuente y el color del texto. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Efectos

Puedes utilizar esta característica para añadir personalidad a una imagen.

Para agregar efectos, haz clic en Efectos, selecciona el efecto adecuado y haz clic en Aplicar.  Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Mejorar

Esta característica cuenta con 3 ajustes preestablecidos para mejorar la calidad de tus fotos. Mejorar contiene los siguientes modos:

  • Alta definición: perfecciona la imagen.
  • Iluminación: resuelve problemas de iluminación.
  • Ajuste de color: realiza ajustes de color de manera automática.

Para mejorar una imagen, haz clic en Mejorar, selecciona un modo y haz clic en AplicarSelecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Dibujar

Para dibujar sobre una imagen, haz clic en Dibujar, selecciona un color o una brocha, arrastra el cursor sobre la imagen y haz clic en Aplicar para añadir el dibujo a la foto. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Marcos

Para agregar un marco, haz clic en Marcos, selecciona el que más te guste y haz clic en Aplicar para añadir el dibujo a la foto. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Calcomanías

Esta característica incluye flechas, globos de ideas/diálogos y otros elementos animados que puedes añadir a tus imágenes. Para agregarlos, haz clic en Dibujo, selecciona un color o una brocha, arrastra el cursor sobre la imagen y haz clic en Aplicar para añadir el dibujo a la foto. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Brillo

Para ajustar el brillo de una imagen, haz clic en Brillo, arrastra el control deslizante y selecciona Aplicar. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Contraste

Para ajustar el contraste de una imagen, haz clic en Contraste, arrastra el control deslizante y selecciona Aplicar. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Saturación

Para ajustar la saturación de una imagen, haz clic en Saturación, arrastra el control deslizante y haz clic en Aplicar. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Calidez

Para ajustar la calidez de una imagen, haz clic en Calidez, arrastra el control deslizante y selecciona Aplicar. Selecciona Guardar para guardar la imagen clonada.
HubSpot Help article screenshot

Enfoque

Gracias a esta característica puedes difuminar los bordes de una foto. Para ajustar el enfocado de una imagen, haz clic en Enfoque, selecciona una figura, arrástrala sobre la imagen y haz clic en Aplicar. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

Reducción de ojos rojos

Para reducir los ojos rojos en una imagen, haz clic en Ojos Rojos, selecciona un tamaño de pincel, haz clic en los ojos rojos que aparecen en la imagen y presiona Aplicar. Selecciona Guardar para guardar la imagen clonada.

HubSpot Help article screenshot

6. Añadir la imagen al contenido

Después de hacer clic en Guardar, selecciona la imagen clonada que quieras utilizar y haz clic en Usar Imagen para insertarla en tu contenido.

HubSpot Help article screenshot

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: