Instalación de Starter Templates
Instalación del plugin Starter Templates con el tema Astra y Elementor.
Cuando desarrollamos un sitio web, ya sea con WordPress o con cualquier CMS, las imágenes juegan un papel muy importante en el diseño. Un sitio web sin imágenes carece de personalidad y el contenido es difícil de digerir.
Por otro lado, el exceso de imágenes tampoco es bueno en el diseño de un sitio web. Una buena imagen puede ofrecer mucha información sobre el contenido de una página o entrada pero el exceso de imágenes puede hacer que el lector pierda el foco y significado del contenido.
Para comenzar a trabajar en una página o entrada, es necesario conocer el tamaño correcto que debe tener la imagen (o imágenes) que vamos a utilizar.
Algunas veces, se suele usar imágenes irresponsablemente cuando se desarrolla un sitio web..
Esto se traduce de la siguiente manera:
El espacio asignado para una imagen suele ser asignado por el tema que utilices. Mediante HTML y CSS se marcan los límites y tamaños de las imágenes para que se vean correctamente en el sitio web.
Existe una extensión llamada Web Developer muy útil para trabajar con sitios web y se instala en los navegadores Chrome, Firefox y Opera. Puedes instalarla haciendo clic en el siguiente enlace: web developer.
Una vez instales la extensión (o complemento), en la parte superior derecha de tu navegador aparecerá un icono de rueda dentada.
Esta extensión cuenta con una serie de herramientas con las que podrás conocer cientos de parámetros de un sitio web.
Para conocer el tamaño exacto de un elemento, sigue los siguientes pasos:
Haciendo clic en cualquier elemento de la página, podrás conocer el tamaño exacto de ese elemento. El elemento que has seleccionado estará dentro de un rectángulo de borde rojo y en la ventana inferior aparecerá información relativa al elemento.
La información que nos interesa conocer son las dimensiones (ancho y alto) del elemento que se encuentra en el recuadro Layout. Las dimensiones vienen dadas en pixeles (px).
Como puedes observar en la imagen anterior, el ancho del elemento es width: 640px y el alto es height: 135px.
Por ejemplo. Vamos a insertar una imagen entre el título principal y el primer bloque de texto.
Conocemos las dimensiones del elemento que acabamos de medir: un bloque de texto. Por lo tanto, para insertar una imagen justo encima de este elemento, la imagen deberá tener 640px de ancho.
La altura de la imagen puede ser cualquiera. Ten en cuenta que en un sitio web, por lo general, los límites son horizontales.
Anuncio publicitario
Otra característica importante a tener en cuenta, antes de subir una imagen a un sitio web, es la extensión de la imagen.
Dependiendo del uso que vaya a tener la imagen, podrá tener una extensión diferente de las demás.
Las extensiones más comunes, usadas en un sitio web, son:
El formato PNG permiten crear imágenes con fondo transparente (ideal para logos e iconos) y, utilizando unas buenas herramientas de optimización, pueden llegar a pesar muy poco sin perder calidad.
Ahora que ya sabes como conocer el tamaño exacto de una imagen y la extensión vamos a buscar una imagen para nuestro sitio web.
Lo que suelen hacer algunas personas es invocar a Google y buscar en su banco de imágenes. Ten en cuenta que estas imágenes "no pertenecen a Google" sino a otros sitios web que Google ha indexado así que ve con cuidado cuando quieras utilizar una imagen que hayas encontrado en Google porque podría tener derechos de autor.
Existen varias plataformas como Shutterstock donde se pueden comprar todo tipo de imágenes y vídeos libre de derechos de autor.
También existen otros cientos de plataformas donde descargar imágenes gratis pero a cambio de una mención al autor mediante un enlace desde tu sitio web. Una de ellas es Freepik.
Otra alternativa es hacer fotogarfías. Esta es la mejor opción si estás desarrollando un sitio web de un lugar físico como un gimnasio, restaurante o una clínica, por ejemplo.
La entrada, dónde conseguir imágenes gratis, nos ofrece información relevante de varios sitios web donde descargar imágenes gratis además de una información muy completa sobre el tipo de licencias de autor (Copyright).
Así es. Las imágenes influyen en un gran porcentaje en el SEO de un sitio web. Por esta razón es muy importante que respetes y cumplas ciertas directrices para que tu sitio web se posicione correctamente.
Ten en cuenta que Google no solo posiciona un sitio web por el contenido textual. También lo hace por las imágenes y ofrece un valor añadido para que te encuentren en los resultados de las búsquedas.
Existen varios factores que Google toma en cuenta para incluir un sitio web en los resultados de las búsquedas. A continuación te enumero los más importantes y lo que tienes que hacer para optimizar correctamente tus imágenes.
La velocidad de carga de un sitio web es uno de los factores más importantes para el SEO.
Afecta directamente a tus usuarios y es motivo para que el usuario se marche de tu sitio web si tiene que esperar mucho tiempo para ver la información que le ofreces.
Para que entiendas mejor el concepto de redimensionar una imagen te pongo un ejemplo (algunos programas suelen usar el término escalar una imagen).
Supongamos que tenemos una imagen de 200px de ancho y 100px de alto. Necesitamos que la imagen tenga 100px de ancho, lo que sería la mitad de la original.
Al redimensionar una imagen, si se modifica una de sus dimensiones, la otra también lo hace proporcionalmente; es decir, si el ancho se reduce a la mitad, la altura también se reduce a la mitad. Una simple regla de tres.
Por lo tanto la imagen redimensionada tendría 100px de ancho y 50px de alto. En ningún momento hemos recortado la imagen ya que nos interesa la imagen completa sin perder nada.
Lo mismo pasaría si se modifica la altura. El ancho se reduce a la mitad.
Continuando con el ejemplo inicial, vamos a buscar una imagen que tenga un ancho mayor o igual a 640px y sea de la temática de nuestro sitio web.
La imagen que hemos descargado tiene 1920px de ancho, 1080px de alto y pesa 182KB. Ten en cuenta que al modificar las dimensiones, también cambia el peso de la imagen.
Al redimensionar la imagen, el resultado es el siguiente:
El peso se ha reducido 136KB. Pareciera no tener importancia pero, si multiplicas eso por 1000 imágenes que pudiera tener un blog, a largo plazo, 136MB (136.000 KB) es un peso que se podría evitar y mejoraría la velocidad de carga de tu sitio web.
Existen cientos de aplicaciones con las que puedes redimensionar imágenes. Una de mis aplicaciones favoritas es GIMP.
Es un programa gratis que puedes descargar e instalar en tu ordenador (computadora) y, además de redimensionar imágenes, te permite hacer casi cualquier cosa ya que es muy similar a Photoshop.
Para descargar el programa haz clic en GIMP. En este tutorial puedes aprender a redimensionar una imagen con GIMP.
Imagínate que quieres subir 3 imágenes, una al lado de la otra, como si fuera una galería. Estas imágenes tienen diferentes dimensiones y, cuando las has redimensionado, la altura de las 3 es diferente.
Lo recomendable es que recortes las 2 imágenes de mayor altura con la medida de la imagen de menor altura de manera que, cuando subas las imágenes a tu sitio web, estas tengan las mismas dimensiones.
Esto es algo que, a nivel de diseño, ofrece una simetría que visualmente es más agradable para el usuario y da un toque más profesional a tu sitio web.
En este tutorial puedes aprender a recortar una imagen con GIMP.
Para ayudar a Google a indexar las imágenes de tu sitio web, es necesario que las renombres correctamente teniendo en cuenta las siguientes reglas:
Una imagen comprimida mejora, aún más, la velocidad de carga de un sitio web.
Las imágenes suelen contener cierta información adicional que, para un sitio web, no interesa. Por esto es necesario quitar toda esa información para que el archivo pese menos y no ocupe más espacio de lo necesario en el servidor.
Existe una herramienta online llamada TinyPNG que se encarga de eliminar toda esa información innecesaria sin alterar la imagen. Puedes acceder a esta herramienta desde TinyPNG.
Selecciona la imagen (o imágenes) y arrástrala directamente al navegador. Inmediatamente el oso panda comenzará a hacer su trabajo. Una vez finalice, haz clic en download para descargar la imagen comprimida.
Como puedes observar en la imagen, TinyPNG ha reducido el peso de la imagen en un 28%. Si abres la imagen original y la imagen comprimida, verás que no existe ninguna diferencia ni se ha alterado la imagen original.
El resultado...
La imagen comprimida tiene las siguientes características:
La imagen se encuentra lista para subirla a nuestro sitio web.
Inicia sesión en WordPress y dirígete a la página o entrada donde vayas a subir la imagen.
La mayoría de entradas y lecciones de los cursos de este sitio web, están basados en el manejo del editor de contenidos: Elementor.
Si aún no conoces Elementor, puedes echarle un vistazo a la lección instalación y configuración de Elementor, para que conozcas el funcionamiento de este editor de contenidos.
Uno de los mejores editores de contenido que puedes instalar para crear un proyecto profesional con WordPress, es Elementor. Ofrece una versión gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de diseño.
Es rápido, fiable y poderoso. Se adapta perfectamente a "casi" cualquier tema y posee una estructura perfecta para el desarrollo de sitios web profesionales.
Tienes dos opciones para subir una imagen:
Antes de insertar la imagen, verás otros campos que tienes que tener en cuenta:
Teniendo claros estos puntos, haz clic en el botón Insertar medio.
En la pestaña Contenido del panel de Elementor se encuentran algunas opciones para configurar la imagen:
En la pestaña Estilo puedes encontrar otras opciones para configurar la imagen como: ancho, borde y sombra entre otros.
Si medimos la imagen veremos lo siguiente:
La imagen tiene 620px de ancho y 349px de alto. ¿Qué ha pasado?
Por defecto, algunos editores de contenido como Elementor, añaden un espacio de relleno (padding) a los widgets. Para que la imagen se adapte al tamaño completo del contenido, hay que modificar el relleno.
En la entrada, HTML y CSS para WordPress, puedes encontrar una completa información para que conozcas y comprendas en uso de los márgenes y rellenos.
De esta forma, hemos quitado el relleno que añade Elementor, por defecto, a los widgets y la imagen se adapta perfectamente al contenido del sitio web.
Como vimos en el punto 4.4, con TinyPNG podemos optimizar una imagen reduciendo su peso para no afectar la velocidad de carga de nuestro sitio web. Esta reducción se realiza externamente en la imagen antes de subirla.
Sin embargo, existen plugins de compresión de imágenes que realizan este mismo trabajo internamente con WordPress.
En ediciones anteriores, había creado esta entrada con el plugin Smush – Compress, Optimize and Lazy Load Images.
A partir de esta edición he decidido utilizar el plugin Imagify – Optimize Images & Convert WebP por las siguientes razones:
El formato de imágenes WebP, comprime las imágenes mucho más sin perder calidad y mejora la velocidad de carga del sitio web. Este formato ha sido creado por Google y se tiene muy en cuenta en los test de Google PageSpeed Insights.
https://es.wordpress.org/plugins/imagify/
Para instalar el plugin:
Una vez activo el plugin, veremos un aviso donde tenemos que realizar las siguientes acciones:
A continuación, el plugin nos redirigirá a esta página donde podemos comenzar a configurar el plugin.
También podemos acceder a este apartado desde Ajustes >> Imagify.
En esta primera opción podemos indicar el nivel de optimización de nuestras imágenes: Normal, Agresivo o Ultra. Haz clic en el enlace ¿Más información? para conocer las diferencias entre los niveles.
Es muy recomendable marcar la opción Backup de las imágenes originales para restaurarlas por si algo sale mal. De esta forma podemos restaurar las imágenes originales si el plugin no hace bien su trabajo.
La pequeña desventaja que presenta esta característica es que consumirá más espacio en el disco de nuestro servidor. Tampoco es algo para alarmarse si tenemos un sitio web pequeño pero lo más importante es tener la seguridad de que podremos recuperar las imágenes.
Las imágenes originales se guardarán en la ruta wp-content/uploads/backup/.
Si hacemos clic en ¿QUÉ PLAN NECESITO?, el plugin calculará cuántos MB usamos en función de las imágenes alojadas en nuestro sitio web y el tiempo que tenga el plugin instalado.
Nos recomendará si es necesario contratar un plan de pago o seguir con la opción gratuita.
En esta opción podemos configurar las imágenes WebP, redimensión de las imágenes grandes y los diferentes tamaños de imágenes creados por WordPress.
Adicionalmente podemos elegir si queremos optimizar las imágenes de el(los) tema(s) que tenemos instalado(s).
Marcando la casilla, el plugin añadirá un menú de acceso rápido en la barra de administración de WordPress.
Dirígete al apartado Medios >> Optimización Masiva y haz clic en IMAGIFICALO TODO para comenzar con la optimización de las imágenes en el sitio web.
Cuando el plugin haya finalizado de optimizar las imágenes, mostrará un resumen del total optimizado y el crédito disponible para optimizar más imágenes en lo que resta del mes.
Todas las imágenes que se suben a WordPress se suelen guardar en el servidor en un directorio llamado uploads que se encuentra en la ruta: wp-content/uploads/.
Además, si has configurado los ajustes de medios en el apartado Ajustes >> Medios para que se guarden en carpetas basadas en el mes y año, las imágenes se guardarán en la ruta wp-content/uploads/(año)/(mes)/.
Si necesitas saber más sobre los ajustes en WordPress, en la lección del curso de WordPress, qué hacer después de instalar WordPress, puedes encontrar una información más detallada sobre este apartado.
En los Ajustes de medios marcamos la casilla Organizar mis archivos subidos en carpetas basadas en mes y año.
Para entender mejor como funciona este ajuste, te pongo un ejemplo:
El día 8 de enero de 2019 has publicado un artículo que habla sobre peces dorados y subes una imagen con el nombre peces-dorados.png.
Esta imagen se ha alojado en el servidor con la ruta wp-content/uploads/2019/01/peces-dorados.png (2019 el año y 01 el mes).
Luego el día 10 de febrero de 2019 publicas otra entrada que también habla de peces dorados y subes otra imagen con el nombre peces-dorados.png.
Esta imagen se ha alojado en el servidor con la ruta wp-content/uploads/2019/02/peces-dorados.png.
Lo normal es que no existan 2 imágenes con el mismo nombre en la misma ruta ya que no es lógico pero, al tener esta casilla activada, WordPress la alojará en diferentes directorios por lo que no habrá conflictos con los nombres de las imágenes.
Igualmente, si subes dos imágenes con el mismo nombre, el mismo mes y el mismo año, WordPress te permitirá subirla pero modificando el nombre de la última imagen: wp-content/uploads/2019/01/peces-dorados.png (primera imagen) y wp-content/uploads/2019/01/peces-dorados-1.png (segunda imagen).
En WordPress, en el apartado Medios, puedes ver en formato lista o cuadrícula, todas las imágenes que componen tu sitio web. Desde este apartado puedes editar y borrar las imágenes que ya no utilices.
Muy importante...
Intenta siempre borrar las imágenes desde WordPress, ya sea desde el apartado Medios o desde cualquier página o entrada.
Nunca borres las imágenes desde el servidor ya que las imágenes también se guardan en la base de datos y, si las borras desde el servidor, la base de datos no sabrá que ya no existen y se convertirán en errores 404 muy penalizados por Google.
Anuncio publicitario
Con este sencillo tutorial podrás comenzar a trabajar con tus imágenes en WordPress correctamente. Recuerda que las imágenes cumplen un papel fundamental en el SEO de tu sitio web. Pueden ser tan útiles como llegar a convertirse en un dolor de cabeza si no las gestionas y optimizas adecuadamente.
Te estaría muy agradecido si pudieras valorar esta entrada y compartirla en tus redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.
(14 votos, promedio: 4.9 de 5)
Todo el contenido que puedes encontrar en este sitio web es gratis y siempre lo será pero, mantenerlo, requiere de muchos cafés y muuuuchas horas . Si te gusta mi trabajo y te está ayudando, considera invitarme un café para apoyarme y apoyar este proyecto. ¡Te invito un café!.
No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.
Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.
Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.
Instalación del plugin Starter Templates con el tema Astra y Elementor.
Aprende a configurar los impuestos en WooCommerce: especial Unión Europea.
Si has instalado un tema PREMIUM sin licencia, aprende a actualizarlo con un 'clic'.
Aprende a subrayar y justificar texto en WordPress.
Aprende a ocultar avisos de licencia de los temas y plugins PREMIUM de prueba.
Copyright © 2024 Curso de WordPress
Hecho con Venezolano!
Desarrollado con WordPress y diseñado con Hello Theme y Elementor.
Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.
La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.
Dejar esta cookie activa nos permite mejorar nuestra web.
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!
Más información sobre nuestra política de cookies.
Gracias Gian solucione el problema con el logo muy explicito
Hola Eduardo, me alegra que lo hayas solucionado. Gracias a ti por escribir. Saludos!
Hola Gian muy buena entrada, tengo un problema con el tamaño de mi logo no se si me podrás ayudar. Estoy usando el tema Hestia y cuando subo el logo se ve muy chico pero no se porque. He visitado páginas que usan el mismo tema y su logo es mucho más grande. Probe con tamaños de imagen de 2000px hasta 400px pero sigue igual. Desde ya muchas gracias
Hola Facundo, no conozco mucho el tema Hestia pero lo he instalado y he hecho una prueba con un logo de 275x75 pixeles y se ve bastante bien. Lamentablemente Hestia no ofrece la opción de variar el ancho del logo (o al menos no la he encontrado) como el tema Astra que es el que uso en el curso de WordPress. Es muy raro que tu logo no se vea bien. En tal caso, si usas Elementor PRO para el diseño, puedes crear una cabecera personalizada con Elementor y pasar de las opciones de cabecera de Hestia. He comenzado un curso de Elementor donde veremos todo lo que se puede hacer con este editor de contenidos. Lo puedes comenzar aquí: curso de Elementor o desde mi canal de YouTube donde comenzaré en unos días. Recuerda suscribirte al blog y al canal para mantenerte informado. Un saludo!
Okay gracias Gian, ahora voy a ver probando con el tamaño de 275x75 y si no bueno me tendre que hacer con elementor Pro y modificar la cabecera desde ahí. Muchas gracias saludos!