Optimizar Imágenes & Fotos para un sitio web de WordPress más rápido

1. Introducción: La gente dice que son importantes en cada sitio web para el problema es que si subes una foto que es un tamaño de archivo muy grande, eso ralentizará tu sitio web. Eso es malo para todos los que visitan, pero también es malo para tu puntuación SEO, tu puntuación de búsqueda de Google. Entonces, ¿cómo mantenemos el tamaño del archivo pequeño, pero mantenemos alta la calidad de imagen? Te mostraré aquí mismo. Hola, soy John Wolfgang nella. Ahora soy diseñador profesional desde hace 20 años, y he trabajado para algunos grandes clientes como Fox TV aquí en Australia. Las tres reglas importantes para cada foto subes un tamaño de archivo, ratio y nombre de archivo. Ahora, en esta clase, te mostraré cómo conseguir que las tres perfectas usando Photoshop o usando el programa fotográfico preinstalado en tu laptop. De acuerdo, empecemos. 2. Speed/Ideal sitio web: Las imágenes son muy importantes para cada sitio web. Quieres que se vean impresionantes para que tu sitio se vea impresionante. El problema es que si los subes incorrectamente, puede ralentizar masivamente tu sitio web. Aquí estamos en uno de los sitios web de pruebas de velocidad, métricas GT. Entonces entra aquí y escribe tu URL. Esta no es una buena puntuación. Hay muchas cosas que pueden ralentizar tus sitios web. Algunos de ellos sí necesitan un poco más de asistencia técnica, pero sólo vamos a mirar imágenes. Entonces en esta página, si venimos aquí a estructurar, podemos ver algunos problemas en torno al tamaño de la imagen. Este primero de aquí abajo, dimensionar adecuadamente las imágenes. Si hago clic en esta, esto me está diciendo cada imagen que potencialmente es demasiado grande en mi sitio web por aquí, o te digo el tamaño de la imagen y los gastos generales, te dice el tamaño que debe ser para acelerar tu sitio web. Y una cosa más que mirar aquí. Aquí donde dice Servir imágenes en formatos de próxima gen. Esto se debe a que estamos usando una imagen JPEG en nuestro sitio web, pero podríamos estar usando una de estas o WebP Image. Hablaré de eso más adelante en esta clase. Pero antes que nada, solo echemos un vistazo a tamaños de imagen y veamos cómo podemos mejorar eso. Toda imagen que subas a un sitio web se sienta dentro de un contenedor. Y ese contenedor tiene un cierto tamaño. Tiene un ancho de píxel y una altura de píxel. Estos de arriba son bastante pequeños, lo que significa que la imagen que he subido probablemente sea demasiado grande para el contenedor. ¿ Cómo averiguas el tamaño que debe ser? Bueno, eso es muy sencillo. Basta con hacer clic derecho en cualquier imagen y vaya a Inspeccionar. Y cuando aparezca esta ventana, haga clic aquí, y luego pase el cursor sobre el elemento que desea comprobar. ser los números de abajo que te estamos mostrando el tamaño de la imagen. Lo más probable es que haya hecho este demasiado grande para ese spot. Entonces abramos nuestras imágenes y empecemos a redimensionarlas. 3. Edición de imágenes: Photoshop y más más: Ahora estamos en Photoshop. Toda imagen que subas debe seguir tres reglas. El número 1 es la relación. Eso es importante para mantener cada tamaño de imagen consistente en su sitio web. Eso significa que las cosas se alinean correctamente y hace que tu sitio web se vea bonita y limpia. El número dos es el tamaño del archivo. Queremos que la calidad de imagen sea alta, pero queremos que sea lo más pequeña posible porque entonces nuestro sitio web es más rápido. Y el número tres es el nombre final. Como puedes ver por el momento, estas dos imágenes solo tienen un número aleatorio al final de ellas, eso no va a ayudar a nadie que busque en Google. Si agrega palabras clave a su nombre de archivo, eso ayudará a su puntuación de búsqueda de Google. Empecemos con este más pequeño. Cuando miramos el sitio web, podemos ver cuál era la relación ideal para éste. Tenía 360 píxeles de ancho y 240 píxeles de alto. Entonces esa es una relación es de tres por dos. Para cambiar la relación en cualquier imagen simplemente pase el cursor por aquí y haga clic en la herramienta de recorte. Como se puede ver aquí arriba, eso ya está fijado en cuatro por tres. Pero quiero cambiar eso a tres por dos. Para mantenerse consistente en todo el sitio web. Hago todas las imágenes de paisaje tres por dos proporción. Entonces en esta pequeña ventana que se desplaza hacia arriba donde se puede mover la imagen en segundo plano para obtener un mejor recorte y hacer doble clic. Ahí vamos. Ahora la imagen tiene una proporción de tres por dos. Ahora exportaré este y echaré un vistazo al tamaño del archivo y al nombre del archivo. Así que sube aquí a Archivo y ve a Exportar. Y Exportar Como. En la ventana emergente, verás que el formato ya es un JPEG. Si tienes algo que necesita un fondo claro, haz ese PNG. Pero para una imagen cuadrada normal, Vamos a mantener eso como JPEG. Aquí abajo verás cuál es ya el tamaño de la imagen. El ancho es de 910 píxeles y la altura es de 607. Queremos que este sea 360 por 240. Entonces, sólo cambiemos la altura a 240. Cuando hago eso, automáticamente cambia el ancho también. Ha cambiado un solo píxel aquí. No te preocupes por eso. Eso no va a marcar una gran diferencia. Sigue siendo la relación correcta. Ahora lo siguiente a mirar es por aquí a la izquierda, este número aquí, este es el tamaño del archivo que es de 840 kilobytes. Eso no es demasiado grande, pero puede ir mucho más pequeño. Por aquí verás la calidad que está al 100%. En el desplegable, juega con este pequeño botón y baja la calidad. Aquí, lo he bajado al 49 por ciento. Y se puede ver eso como un tamaño de archivo mucho más pequeño. ¿ Eso es de calidad lo suficientemente alta? Dará clic aquí abajo y podrá acercar la imagen para ver cómo se ve. Eso me parece bien. Pero si quiero hacerlo un poco más fuerte, Eso es sólo arriba en un poco. De acuerdo, y a este tamaño ahora viene en 34 kilobytes. Así que intenta mantener cada imagen que subes un menor a 100 kilobytes. Este tiene 34, así que está bien. Vamos a hacer clic en Exportar. Y en este pop-up, aquí es donde se puede cambiar el nombre del archivo. Como puedes ver en la parte superior, aún tiene el nombre de archivo original. Pero quiero que esto incluya palabras que la gente puede estar buscando en Google para que mi imagen se muestre. Entonces voy a llamarlo así. Y luego guardar. Si no tienes Photoshop, solo tienes que utilizar el editor de fotos preinstalado en tu portátil. Yo uso un Mac, así que solo estoy usando fotos de Apple aquí. Simplemente voy a elegir la imagen que quiero editar. Y en esta ventana pasa el cursor hacia arriba y elige Editar. Tienes muchas opciones aquí dentro, pero elijamos cosecha. Todavía queremos que esta sea una proporción de tres por dos, y tenemos todas estas opciones aquí en el lado derecho. Escojamos tres por dos. Y haga clic en Listo. Y luego pasa el cursor aquí hasta File Export and Export una foto. Puedes cambiar el tipo de foto y queremos que sea JPEG. Calidad. Juega con esto, ve qué funciona para ti. Voy a elegir medio aquí sólo para ver cuál es la calidad. Ahora mi ancho, quiero que sean 360 pixeles. Y aquí abajo dice nombre de archivo, elige éste y escribe lo que te gustaría que fuera atrapado. Y exportar. Ahora encuentra la carpeta. Y verás que ha tomado el nombre que le hemos dado, pero se pone este guión y uno al final. Entonces solo borra eso. Como se puede ver el tamaño del archivo aquí. Bueno, son bastante similares, pero solo intenta conseguirlo lo más bajo posible y simplemente juega con la calidad verás lo que funciona mejor para ti y el tipo de sitio web que estás ejecutando. Ahora estas imágenes están listas. Vamos a subirlos todos a WordPress. 4. Optimización extra: imágenes de WebP: Este es un servicio llamado pixel corto. Lo que esto hace es que comprime todas tus imágenes a un tamaño IV o menor. Si quieres darle una prueba rápida y gratuita, solo ven aquí y escribe la URL de tu sitio web. Y si uso este servicio para comprimir aún más mis imágenes, e incluso haremos que el sitio web funcione 44% más rápido si solo tienes un sitio web muy pequeño, bueno, haz clic aquí, Ver Detalles. Esto te dirá qué imágenes se han redimensionado. Simplemente puedes descargar la versión más pequeña y subir eso. Pero si tienes un sitio web grande con muchas imágenes, vas a necesitar instalar el plug-in y pixel corto tener dos plugins. Uno comprime el tamaño de los jpegs que has subido. Y número dos, esa es una que te ayuda a crear la página web, una versión de tus imágenes. Eso son imágenes solo web. Por lo tanto, son aún más pequeños y hacen que su sitio funcione aún más rápido. Entonces echemos un vistazo a eso. Entra en tu panel de WordPress y ve a Añadir Plugins, escribe en píxel corto. Y verás a estos dos en la parte superior. Uno es el Optimizador de imagen que hace que tus jpegs sean lo más pequeños posible. Y esta es imágenes adaptativas que convierte cada imagen en la versión de la página web. Entonces vamos a instalarlos ambos. Y luego sólo pasa por todo el proceso de configuración. Cuentan con una versión gratuita que te permite redimensionar hasta un 100 imágenes de forma gratuita. O sí tienen algunas versiones pagadas. Si tienes un sitio web mucho más grande con miles de imágenes. Simplemente consulta la sección Acerca aquí. Si tengo alguna oferta de esta empresa, incluiré algunos enlaces ahí dentro. Cuando lo tengas todo configurado, ve al optimizador de imágenes, plug-in, rellena todos los detalles, y luego pulsa aquí en Guardar. Y aquí se puede ver que optimizará ciento, doscientos treinta y ocho de mis imágenes. Eso se debe a que tengo un sitio web bastante grande aquí, pero solo tienes que hacer clic en esto. Cuando eso haya terminado, ven aquí a Configuración y elige el que es el proceso de IA de píxeles cortos que atraviesan. Nos aseguraremos de que su sitio web sea adecuado para este cambio a las imágenes WebP. Puedes ejecutar algunas pruebas o puedes configurarlo todo y solo ver si está funcionando y si no está pegado el plugin. Cuando se llega a esta página por aquí, dice Web PIE Support. Tan solo asegúrate de que todos sean textos y eso cambiará cada imagen, subió tu sitio web a una versión de página web. Después entra en tu sitio web y haz clic en el icono de píxel corto en la parte superior. Y verás que CDN sube en la parte superior de algunas imágenes. Haga clic en eso. Y luego verás lo que ha hecho el servicio. Tiene imagen optimizada y escalada de 1000 píxeles a 334. Ese es el tamaño correcto que necesita ser. Como se puede ver, eso ha reducido el tamaño y 32 KV a 5.9 KB. Entonces eso es mucho más pequeño. Ahora cuando miras esto, podrías irte, realidad esa no es la calidad de la imagen que quiero. Entonces tienes un montón de opciones aquí para excluir una imagen como esta. Si solo hace clic en Excluir esta URL de imagen, eso significa que la imagen no se incluirá en esta optimización. Pero eso me parece bien. Entonces sigamos con eso. Y si nos desplazamos aquí abajo, click en las otras imágenes. Verás que cada imagen de aquí abajo ha sido redimensionada. Por lo tanto deberías tener un sitio web mucho más rápido. Entonces volvemos a las métricas de deber y volvemos a probar la velocidad del sitio. Y se puede ver que todo ahora está corriendo mucho más rápido. Y eso es sólo porque ahora las imágenes en nuestro sitio ocupan mucho menos espacio. Y si volvemos al sitio, mientras la calidad se ve igual de alta que antes, nada ha cambiado. Y tenemos una página web mucho más rápida. Y todos los sitios web están configurados de una manera diferente. Y puede ser un caso de usar ambos plug-ins aquí no funciona en tu sitio web si ese es el caso, Esto es lo que recomiendo. Elimina el i1 y pasa al píxel corto regular. Después ven a esta página, demasiado avanzada, y bajo donde dice imágenes de próxima generación, haz clic en este recuadro. Entonces el de abajo que dice entregar que las versiones de próxima generación en el front end. Y tendrás un par de opciones aquí. Destruye todos estos para ver cuál va a funcionar en tu página web y obtén los mejores resultados. Dale una oportunidad. Desplázate aquí abajo y lo guardas, y luego tendrás el sitio web perfecto para trabajar rápido. 5. Gracias: Gracias por ver toda esta clase. Si tienes alguna duda sobre la subida de la foto, presentarlas aquí abajo en la sección de discusión. Además, mientras estés ahí, asegúrate de dar click en mi nombre y echa un vistazo a mi perfil de Skillshare. Aquí verás todas mis clases sobre la construcción de un sitio web. Había uno perfecto para principiantes sobre el uso del constructor de páginas Elementor y otro sobre la construcción de tu propio portafolio en línea. Pero ambos, no necesitas saber ni un solo poco de codificación. Todo se trata de diseño creativo. Además, asegúrate de seguirme y recibirás notificaciones cada vez que suba una clase completamente nueva. Está bien, eso es todo. Que tengas un gran día.