Cómo editar y optimizar imágenes dentro de HubSpot

Última actualización: December 29, 2016

Al agregar imágenes a una página, blog, correo electrónico o posts de redes sociales haces mucho más atractivo tu contenido. Las imágenes pueden ayudar a aumentar las tasas de visitas a un sitio web en los posts en redes sociales y los correos electrónicos, así como a mantener por más tiempo a los usuarios en tus páginas y posts.

Si bien la infraestructura de última generación que utiliza HubSpot para servir al contenido optimiza los tiempos de carga para los usuarios de todo el mundo, cargar demasiados archivos de imagen de alta resolución a tu sitio web puede aumentar los tiempos de carga de tus páginas y hacer que los usuarios las abandonen. Del mismo modo, incluir varios archivos grandes de imágenes en un correo electrónico también aumentará las probabilidades de que este quede atrapado en un filtro de spam. Y aunque puedes ajustar el tamaño de visualización de una imagen utilizando HTML o un editor WYSIWYG de HubSpot, esta acción no reduce el tamaño del archivo. Por eso muchos especialistas en marketing confían en herramientas como Adobe Photoshop y Pixlr.com  para cambiar el tamaño, recortar, agregar texto, filtrar y guardarlos para la web, pero hay que dedicar tiempo a aprender otras aptitudes del software.

Gracias a HubSpot ahora es fácil editar y cambiar el tamaño de las imágenes para tus páginas, posts y posts para redes sociales directamente desde el interior del editor de contenidos, Administrador de archivosEditor para redes sociales. Algunas aplicaciones útiles del editor de fotos incluyen:

  • Reducir las dimensiones y el tamaño del archivo de imágenes para disminuir los tiempos de carga de páginas y asegurar el máximo ancho adecuado de las imágenes.
  • Recortar imágenes para que encajen mejor en tu contenido.
  • Agregar texto, calcomanías y dibujos a las imágenes para ayudar a explicar o resaltar áreas de una imagen.
  • Ajustar el brillo y el contraste de una foto para asegurar la claridad de la imagen.

Optimización de imágenes para la web

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

  • Las imágenes en las páginas o correos electrónicos con capacidad de respuesta de HubSpot se ampliarán hasta alcanzar su tamaño natural; por lo tanto, generalmente no se necesita que una imagen sea más amplia que el contenido principal de la página (generalmente 980px-1280px) o correo electrónico (generalmente 600px). Una excepción donde tal vez quisieras una imagen de alta resolución mayor, es cuando se usan grandes imágenes de fondo.
  • 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 correo electrónico).
  • Agregar texto alternativo o descripciones a las imágenes puede ayudar a los motores de búsqueda y los lectores de pantalla a interpretar tus imágenes y comprender tu contenido. Usa palabras clave específicas pertinentes identificadas con la herramienta Palabras clavepara mejorar la SEO de tu contenido.
  • Cuando la imagen alcance su tamaño natural correcto, puedes seguir ajustando el tamaño con el editor de contenidos WYSIWYG de HubSpot.

Instrucciones

Es posible acceder al editor de imágenes cuando se adjunta una imagen a un post para redes sociales, al subir una imagen a Administrador de archivoso al agregar una imagen a través del editor de contenido. Si bien las opciones de edición son las mismas sin importar cómo se accede a la imagen, este tutorial se enfoca en cómo agregar una imagen a través del editor de contenido. Sigue estas instrucciones para editar una imagen, cuando la agregues a una página web, correo electrónico, página de destino o post.

Acceder al editor de contenido

Mediante este ejemplo, vamos a acceder al editor de contenido editando una página web (desde Contenido > Sitio web), aunque los siguientes pasos serán los mismos para correos electrónicos, páginas de destino o posts.

Haz clic en Agregar imagen

Puedes agregar una imagen a varios tipos diferentes de módulos; en este ejemplo, se agrega una imagen a un módulo de texto enriquecido. Haz clic en el icono Insertar/editar imagen.

Captura de pantalla del artículo Ayuda de HubSpot

Subir o elegir una nueva imagen

Puedes subir una nueva imagen o editar una imagen existente. HubSpot también te proporciona una carpeta de fotos de archivo.

Captura de pantalla del artículo Ayuda de HubSpot

Haz clic en Clonar y Editar

Haz clic en el icono de engranaje y selecciona Clonar y editar.

Captura de pantalla del artículo Ayuda de HubSpot
La imagen debe ser guardada como un archivo JPG o PNG para ser editable con el editor de fotos de HubSpot. Si usted no ve la opción de clonar y editar, asegúrese de que la imagen se guarda como el tipo de archivo correcto con la extensión correcta (.jpg o .png).  

Editar la imagen

El editor de fotos tiene varias funciones avanzadas para editar fotos que pueden utilizarse de forma individual o en conjunto. El editor de fotos tiene las siguientes funciones:

Recortar

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

Para recortar una imagen, haz clic en Recortar.Arrastra 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.

Captura de pantalla del artículo Ayuda de HubSpot

Cambiar el tamaño

Cambiar el tamaño te permite ajustar las dimensiones de una imagen. Al reducir las dimensiones de la imagen, también reduces el tamaño del archivo de la imagen y mejoras su velocidad de carga.

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

Captura de pantalla del artículo Ayuda de HubSpot

Orientación

La función de orientación te permite girar o dar vuelta una imagen. Puede ser útil si la imagen que subas no está orientada correctamente de forma 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 luego haz clic en Aplicar. Selecciona Guardar para guardar la imagen clonada.

Captura de pantalla del artículo Ayuda de HubSpot

Texto

Puedes utilizar la función de texto para hacer anotaciones o agregar leyendas a una imagen. Agregar texto a una imagen es una excelente manera de explicarla o asociarla con el texto de la página o del post. También es una característica útil para poner texto sobre imágenes en los correos electrónicos, ya que muchos clientes de correo electrónico no admiten las imágenes de fondo.

Para agregar texto, haz clic en Texto , escribe el texto y haz clic en Aplicar.  Además de agregar varios cuadros de texto, puedes cambiar el tipo de letra y el color del texto. SeleccionaGuardar para guardar la imagen clonada.

Captura de pantalla del artículo Ayuda de HubSpot

Efectos

Puedes utilizar efectos para agregar personalidad a una imagen.

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

Captura de pantalla del artículo Ayuda de HubSpot

Mejorar

Mejorar te ofrece tres ajustes preestablecidos para mejorar la calidad de tus fotos. Mejorar tiene los siguientes modos:

  • Alta definición define tu imagen.
  • Iluminar resuelve problemas de iluminación.
  • Ajustar color hace ajustes automáticos de los colores.

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

Captura de pantalla del artículo Ayuda de HubSpot

Dibujar

Para dibujar sobre una imagen, haz clic en Dibujarselecciona un color/pincel, arrastra el mouse sobre la imagen y haz clic enAplicar para agregar tu dibujo a la foto. Selecciona Guardarpara guardar la imagen clonada.

Captura de pantalla del artículo Ayuda de HubSpot

Marcos

Para dibujar en un marco, haz clic en Marcos selecciona un marco y haz clic en Aplicar para agregar tu dibujo a la foto. Selecciona Guardarpara guardar la imagen clonada.

Captura de pantalla del artículo Ayuda de HubSpot

Calcomanías

Las calcomanías incluyen flechas, globos de ideas y de diálogo y otros divertidos objetos de dibujos animados que pueden agregarse a las imágenes. Para agregarlos, haz clic en Dibujarselecciona un color/pincel, arrastra el mouse sobre la imagen y haz clic en Aplicar para agregar tu dibujo a la foto. Selecciona Guardar para guardar la imagen clonada.

Captura de pantalla del artículo Ayuda de HubSpot

Brillo

Puedes ajustar el brillo de una imagen haciendo clic en Brillo, arrastra el regulador y haz clic en  Aplicar.Selecciona Guardarpara guardar la imagen clonada.

Captura de pantalla del artículo Ayuda de HubSpot

Contraste

Puedes ajustar el contraste de una imagen haciendo clic enContraste, arrastra el regulador y haz clic en Aplicar . Selecciona Guardar  para guardar la imagen clonada.

Captura de pantalla del artículo Ayuda de HubSpot

Saturación

Puedes ajustar la saturación de una imagen haciendo clic en Saturación, arrastra el regulador y haz clic en Aplicar. Selecciona Guardar para guardar la imagen clonada.

Captura de pantalla del artículo Ayuda de HubSpot

Calidez

Puedes ajustar la calidez de una imagen haciendo clic en Calidez, arrastra el regulador y haz clic enAplicar. Selecciona Guardar para guardar la imagen clonada.
Captura de pantalla del artículo Ayuda de HubSpot

Enfocado

La característica de enfocado te permite difuminar los bordes de una foto. Puedes ajustar el enfocado de una imagen haciendo clic en Enfocado, selecciona una forma, arrástrala sobre la imagen y haz clic en Aplicar. Selecciona Guardar para guardar la imagen clonada.

Captura de pantalla del artículo Ayuda de HubSpot

Efecto de ojos rojos

Puedes reducir el efecto de ojos rojos de una imagen haciendo clic en Ojos rojos, elige un tamaño de pincel, haz clic en los ojos de la imagen y presiona Aplicar. Selecciona Guardar para guardar la imagen clonada.

Captura de pantalla del artículo Ayuda de HubSpot

Agregar la imagen a tu contenido

Después de hacer clic en Guardar , elige la imagen clonada y selecciona  Usar imagen  para insertarla en tu contenido.

Captura de pantalla del artículo Ayuda de HubSpot

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: