¿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
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:
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í 😉
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?