Cómo optimizar imágenes para utilizarlas en nuestra web

11 Jun, 2020
Autor: Yolanda

¿Por qué optimizar las imágenes que queremos subir a nuestra web?

El hecho de optimizar imágenes es vital para nuestra web, ya que las imágenes se interrelacionan tanto con el diseño como con la maquetación, la programación y, ahora también, con la inclusión de la velocidad como factor de posicionamiento en Google.

Por eso hoy me gustaría hablar de las imágenes, de por qué es importante optimizarlas y cómo hacerlo, de dónde y cómo podemos obtener imágenes gratuitas para utilizar en nuestra página web o para los diseños que vamos a publicar en las redes sociales en nuestra marca.

Cómo medir el tamaño que necesito en la web de una fotografía

En el siguiente vídeo mostramos el proceso a seguir para instalar la extensión MeasureIt, la cual os permitirá conocer el ancho y el alto de cualquier elemento de una página web.

Dónde buscar imágenes gratuitas

Como diseñadora de páginas web, salto de alegría cuando me tropiezo con sitios que ofrecen iconos e imágenes gratuitas, que además han sido diseñados con gusto y maestría. No importa si eres diseñador o no, pero probablemente estarás de acuerdo conmigo, que hay días en los que simplemente no se tiene tiempo para crear ciertos elementos desde 0. Tanto para los expertos en diseño web, como para aquellos que por primera vez están pensando en llevar a cabo un proyecto web, es importante disponer de catálogos gráficos de buena calidad. Por este motivo quiero mostrarte algunos de los sitios que me gustan.

 

Freepik:

Cuenta con una tonelada de imágenes gratuitas. Puedes buscar en su base de datos imágenes vectoriales gratuitas, iconos, archivos PSD y fotos, además está añadiendo nuevas fuentes todos los días. Algunas de las imágenes requieren alguna forma de atribución, así que asegúrese de comprobar los requisitos de la licencia antes de utilizarlas. 

Flaticon:

Con cerca de 70.000 iconos en su sitio, tienen la mayor base de datos de iconos vectoriales gratis en la web.  Estos iconos los vamos a encontrar en los formatos VG, EPS, PSD y PNG y en los tamaños 16, 24, 32, 64, 128, 256 y 512 píxeles. Para obtenerlos podemos obtar por la descarga directa de los mismos o si somos usuarios de Adobe Photoshop, Illustrator o After Effects, podemos obtenerlos directamente en estos programas a  través de una extensión. Además también nos da la posibilidad de utilizarlos como fuentes.

IconFinder:

A diferencia del anterior, en IconFinder podermos encontrar tanto iconos gratuitos como de pago. Una vez que busquemos los iconos deseados por nuestros términos de búsqueda (debemos introducir la palabra o palabras en inglés), nos aparecerá a la izquierda un menú donde tendremos que marcar la opción “FREE” para que sólo nos muestre aquellos que sean gratuitos. Tenemos la opción de encontrar iconos de hasta 512 píxeles y de cambiar el fondo de transparente a gris, negro o blanco. Cada icono o grupo de iconos viene con una licencia diferente para su uso. Algunos son absolutamente libres de usar y no se requiere la atribución del autor, mientras que otros ponen diferentes restricciones sobre lo que se puede o no se puede hacer con ellos. De cualquier manera el sitio es increible para obtener iconos.  

Cómo redimensionar/recortar imágenes

En este vídeo te mostramos como redimensionar y/o recortar imágenes para adaptarlas al tamaño que necesitas para tu web.

Cómo optimizar las imágenes

Opción 1: RIOT

La siguiente opción que presento en el vídeo es a través de un programa de escritorio que me va a permitir optimizar el peso de mis imágenes antes de subirlas a mi sitio web.

Opción 2: https://compressor.io/compress

Si no queremos instalar ningún programa tenemos la opción de comprimir el tamaño de nuestra imagen de manera online. El compressor.io comprime nuestra imagen reduciendo el peso de la misma.

Cómo quitar el fondo de una imagen fácilmente y sin descargar programas

Remove.bg

En el siguiente vídeo os muestro una forma muy simple de quitar el fondo a una imagen de una manera muy sencilla y rápida.

Muchas veces nos encontramos con la necesidad de utilizar una imagen sin el fondo y con la siguiente herramienta lo conseguiremos en cuestión de unos pocos segundos.

Recursos y descargas:

Artículos relacionados

Eliminar aviso de sitio peligroso en nuestra web

Eliminar aviso de sitio peligroso en nuestra web

Si cuando alguien quiere entrar a tu sitio web recibe la pantalla roja con el mensaje de error “El sitio al que vas a acceder contiene programas dañinos” o «El sitio al que vas a acceder contiene software malicioso» lo más seguro es que tu sitio web haya sido hackeado...

PrestaShop vs WooCommerce: ¿Cuál es la opción ideal?

PrestaShop vs WooCommerce: ¿Cuál es la opción ideal?

Antes de acometer el desarrollo de una tienda online es muy importante saber valorar las diferentes opciones que tenemos a nuestro alcance para ser capaces de seleccionar aquella que se ajuste con mayor precisión a lo que necesitamos. Tomar la decisión apropiada en...

¿Por qué montar mi tienda con PrestaShop?

¿Por qué montar mi tienda con PrestaShop?

Voy a montar mi tienda online, pero aún no tengo claro la plataforma ¿Por qué me recomendáis PrestaShop? Llevamos 20 años llevando de la mano a personas que han montado su tienda online. Hemos probado muchas plataformas y en los últimos años nos decantamos por...

Comentarios

2 Comentarios

  1. Paco Gómez

    Genial estos consejos para la creación de mi pagina web, a ver si carga mas rápido y la dejo mas bonita.
    Seguid así 😉

    Responder
  2. sevein

    La extensión de Google Pager Ruler Redux ya no está disponible, las alternativas nada que ver. Q¿ue otra opción hay para esto mismo?

    Responder

Enviar un comentario

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