Guía suprema para optimizar la imagen para WordPress

Las imágenes son uno de los elementos más importantes en su sitio y su corrección puede ser la diferencia entre un sitio popular que ofrece una experiencia extraordinaria para el usuario y uno que no registra tráfico o conversiones. Pero las imágenes son, bueno, complicadas. Hay mucho que hacer para obtenerlos perfectos para que obtenga los mayores beneficios. En esta última guía de optimización de imágenes de WordPress, le daré toda la información que necesita para optimizar sus imágenes. Pasaremos por todos:
Cómo preparar sus fotos antes de cargar
Cómo optimizar WordPress para sus imágenes
Cómo identificar las imágenes para mejorar su SEO
Cómo transmitir las imágenes de manera efectiva
Cubriremos todos los temas e información importantes que hemos compartido en nuestras publicaciones de optimización de imágenes anteriores de la manera más concisa posible (incluida nuestra guía de SEO completa) para que se convierta en un optimizador de imágenes de WordPress en el más corto. Si desea una explicación mucho más detallada de estos temas, hemos incluido enlaces en esta publicación a nuestros tutoriales en profundidad.
Preparación de imágenes
La composición de las imágenes
El tamaño y el corte de imágenes
Cómo transmitir imágenes en la escala
Cortar las imágenes
Uso de formato de imagen adecuado para el trabajo
Acerca de archivos de imagen
Imágenes vectoriales
Imágenes de ráster
Compresión con pérdidas
Sin compresión de pérdida
Tipos de archivos de imagen
Jpeg
Png
Webp
SVG
Gif
Títulos de imagen
Editores de imágenes de matón
Optimización de imágenes en WordPress
Las dimensiones de imagen de WordPress predeterminadas
Imágenes receptivas
Imágenes de retina
Archivos WebP de la imagen de nueve generacionesseo
El título de la imagen
Otro texto
Imagen de leyenda
Otros elementos en la página cerca de la imagen
Sitemaps
Etiquetas de redes sociales
Servir imágenes
Carga lenta
El caché del navegador en caché
Redes de entrega de contenido, CDN
Si se pregunta cuál es el mejor optimizador de imágenes de WordPress, no se vea más allá de nuestro propio Smush Pro. Combínelo con Hummingbird y SmartCrawl SEO, porque los tres pueden mejorar drásticamente el rendimiento de sus imágenes. Puede probar los tres en su sitio con un intento sin riesgos. ¿Le gustaría optimizar las imágenes en un sitio de tráfico bajo, individual o de pasatiempos? También tenemos una versión gratuita de Smush disponible en WordPress.org. Cómo optimizar las imágenes antes de cargar una imagen en WordPress, debe asegurarse de que su imagen sea la mejor cuando lo haga. Debe componerlo correctamente, dimensionarlo perfectamente, usar el formato de imagen apropiado y darle un nombre de archivo descriptivo.
Hacer la pregunta más importante al crear sus imágenes es la siguiente: ¿se requiere esta imagen? Las imágenes requieren muchos recursos para entregar a los visitantes. Son un sitio activo “costoso”, por lo que no debe usarlos solo para llenar un espacio. Cree imágenes originales que mejoren su contenido y usen activos baratos, como títulos y texto, en lugar de imágenes para comunicarse y agregar estilo siempre que sea posible. Nunca agregue texto a sus imágenes. Esta práctica no cumple con las mejores prácticas de accesibilidad y si sus imágenes disminuyen para responder a los dispositivos móviles, entonces el texto será más pequeño y más difícil de leer. Además, las imágenes de texto deben tener una calidad mucho mejor para mantener los detalles finos de las letras. No desperdicie recursos, cree el texto sobre sus imágenes con CSS, para obtener mejores resultados. Renuncio a las imágenes es difícil, lo sé. Pueden hacer que su sitio se vea genial, pero de acuerdo con la investigación del rendimiento del sitio, las sesiones que convierten a los usuarios tenían un 38% menos de imágenes que las sesiones que no se convirtieron, por lo que no se agregan más imágenes al resultado final. El tamaño y el corte de imágenes cuando se trata de imágenes, ¡el tamaño importa! Y más grande no es mejor. Gtmetrix y Google PageSpeed ​​Insights recomiendan escalar imágenes para que coincidan con el contenedor en el que vivirán para mejorar el rendimiento.
Si no hace nada más para optimizar la imagen, al menos escalera sus imágenes. Hará una gran diferencia si ha hecho mal.
El navegador debe reducir las imágenes de gran tamaño para su contenedor. Esto desperdicia tiempo y datos al cargar sus páginas web, sin dar ningún beneficio en rendimiento y calidad. Cómo reducir el tamaño de la imagen en WordPress El primer paso es usar desarrolladores de navegadores para descubrir los diversos tamaños de contenedores. Las imágenes en su sitio siguen Nuestro tutorial rápido sobre cómo detectar imágenes incorrectas en WordPress. Luego use un editor de imágenes para cambiar el tamaño de la imagen para que se ajuste al contenedor más grande que vivirá en su sitio si desea usar imágenes de retina en su sitio, deberá duplicar tanto el ancho, así como la altura del contenedor más grande. Hablaremos más sobre las imágenes a continuación.

Si está escalando una nueva imagen para su sitio, todo lo que queda es cargar la imagen y usarla en el contenedor para el cual ha sido dimensionado. Si corrige una imagen existente en el sitio, cargue la imagen y reemplace la URL de la imagen anterior con la nueva. Smush Pro puede cambiar el tamaño automáticamente de sus imágenes. Entonces, si tiene un sitio maduro con muchas imágenes, deje que Smush lidie con la escala. Prueba el Free Smush Pro. Cortando las imágenes al cortar las imágenes, intente crear cortes más cercanos y cortar el exceso de detalles y espacio en la imagen. Las relaciones 4: 3 y 16: 9 son mejores para SEO para imágenes, por lo que si su objetivo es clasificar la imagen en busca de imágenes, apunte a una imagen que no sea panorámica o alta y débil.
Usando el formato de imagen correcto para el trabajo, ¿usa PNG para algo? Se honesto. La mejor manera de optimizar las imágenes en WordPress sin un complemento es usar el formato de imagen correcto. Cada tipo de archivo ha sido diseñado para un caso particular de uso y tiene sus propias fortalezas y debilidades. Las capacidades adicionales de los archivos de imagen (como la transparencia), los detalles innecesarios y demasiados colores, todos agregan hinchazón a sus imágenes. A veces, son necesarios, a veces no. La clave es usar el archivo de imagen apropiado, con las capacidades correctas para sus necesidades. ¡Creamos una hoja de trucos PDF descargable a la que puede consultar! Haga clic aquí para obtener su copia
Use la guía Smush para formatos de archivo para encontrar el mejor tipo de archivo para sus imágenes.
Compresión del cambio de tamaño de imagen de WordPress Hay dos tipos de tipos de imágenes gráficas, imágenes vectoriales e imágenes de trama. Las imágenes vectoriales son formas geométricas generadas matemáticamente que se pueden cambiar el tamaño sin pérdida de calidad. Las imágenes de trama consisten en pequeños bloques llamados píxeles dispuestos en una cuadrícula. Las imágenes de trama aparecen de alta calidad solo al tamaño que estaban destinados a mostrarse o más pequeños. De lo contrario, la imagen aparecerá pixelada.
Comprimir la imagen de WordPress Otra cosa a tener en cuenta al elegir el archivo de tipo de imagen es el tipo de compresión de imagen que usa cada uno, ya que afectará la calidad de la imagen cuando esté decodificada y aparece en su sitio. La compresión con pérdida elimina permanentemente los datos de la imagen Cuando la imagen se comprime. Algunos detalles son imperceptibles para el ojo humano, por lo que esto no siempre crea una pérdida visible de calidad. En general, la compresión con pérdidas entre el 75-100% mantendrá la integridad y la alta calidad de la imagen, pero al 75% la imagen es medio mayor. La mayoría de las redes sociales comprimen sus imágenes entre 70-85% cuando las cobra. La compresión sin pérdida mantiene todos los datos, de modo que no se pierde nada y la imagen se puede reproducir exactamente, sin pérdidas de calidad. La desventaja es un tamaño mucho mayor del archivo. Aquí hay una comparación. Los tipos de archivos de imagen JPEG son los mejores para fotos grandes.
Los JPEG son el tipo de archivo estándar producido por cámaras y dispositivos móviles.

Los JPEG pueden contener millones de colores y usar pérdidas para producir un archivo pequeño.
Son aceptados en todos los principales navegadores.
JPEG no acepta transparencia o animación.
Las imágenes de PNG PNG son las mejores cuando se es esenciales los detalles (como el texto de captura de pantalla).
Los PNG usan compresión sin pérdida de imagen, por lo que son más grandes que los JPEG comparables.
Hay 3 tipos de PNG:
PNG-8 acepta 256 colores indexados y es como PNG GIF.
PNG-24 acepta colores de 24 bits para crear una paleta de millones de colores, por lo que es más como un jpeg.png-32 acepta colores de 24 bits más un canal alfa adicional para capacidades avanzadas de transparencia.
Los tres tipos de PNG aceptan transparencia, pero lo hacen de diferentes maneras. Puede obtener una explicación completa de diferentes tipos de PNG y cómo manejan la transparencia en esta publicación.
WebP WebP es el formato de imagen de código abierto de Google que combina los mejores elementos JPEG y PNG, pero con un tamaño de archivo mucho más pequeño. Están cerca de ser apoyados a gran escala. Hay dos tipos de archivos de imagen webp
El primero se conoce simplemente como webp y usa pérdidas. Es como la versión webp de un JPEG.
El segundo tipo se conoce como WebP sin pérdida y se asemeja al equivalente de PNG, porque no utiliza compresión de pérdida.
Si se pregunta cómo crear archivos webp de WordPress, puede usar un complemento para hacerlo por usted. De hecho, Smush Pro CDN convierte imágenes en WebP. Si alguien visita su sitio en un navegador que acepta WebP, Smush convertirá sus imágenes y transmitirá imágenes WebP. Si están en un navegador que no acepta WebP, recibirán JPEG o PNG todos los días. SVG SVG es un lenguaje de marcado basado en XML que le permite crear dos formularios dimensionales para crear gráficos vectoriales. Es más adecuado para formas simples, como logotipos, gráficos, banderas, iconos y formas geométricas.
Los SVG no funcionan bien para las fotos.
Son compatibles con todos los navegadores.
Debido a que técnicamente son un lenguaje de marcado, WordPress no permite que los SVGs eviten la inyección de malware.Solo debe permitir a los usuarios de confianza que entiendan los riesgos de usar SVG la oportunidad de usarlos en su sitio. Los GIF gif son geniales para animar meme estúpido y no muchos más.
Los GIF producen archivos excepcionalmente grandes, especialmente si la imagen incluye animaciones.Para animaciones, los archivos MP4 o WebM tienen un tamaño más pequeño.
Los GIF tienen una paleta de colores limitada de 256 colores y aceptan transparencia.
Son compatibles con todos los navegadores.
No hay consenso sobre cómo pronunciarlos, entonces, ¿quién los necesita?
Aquí hay una breve recapitulación de la funcionalidad.
Títulos de imagen Después de seleccionar el formato correcto para guardar su imagen, debe cambiar el título de imagen predeterminado generado por su cámara, le da a sus imágenes títulos breves y descriptivos. Use palabras clave si describo correctamente la imagen. Si las palabras clave no describen su imagen, no las use en el título de la imagen. Te mostraré un lugar más adecuado para ellos en la sección SEO de esta publicación. Imágenes de imagen Vracous La creación de un lote de imágenes para un nuevo sitio o regresa para remediar todos los problemas con las imágenes actualmente en su sitio puede llevar mucho tiempo. Afortunadamente, hay varias herramientas que pueden ayudarlo a procesar su imagen a granel. Lightroom Classic ha sido diseñado para administrar ediciones no destructivas de sus imágenes. Úselo para escalar en el bloque, cortar o cambiar el nombre de las imágenes JPEG en su cámara Photoshop puede ayudarlo a editar archivos PNG o JPEG. Use el procesador de imágenes o cree acciones personalizadas de Photoshop para grabar una secuencia de edición compleja y luego aplicarlas a otras imágenes. Optimizar las imágenes en WordPress la preparación correcta de imágenes puede evitar muchos problemas antes de comenzar. Una vez que haya preparado las imágenes, WordPress tiene algunas funciones extraordinarias que lo ayudarán a administrar sus imágenes y hacer que se vean lo mejor posible. Las dimensiones de imagen de WordPress predeterminadas cada vez que sube una imagen en la biblioteca de medios de WordPress, WordPress predeterminado es la siguiente dimensión de imagen adicional: miniatura
ambiente
Medio-alto
Grande
Las dimensiones implícitas de la imagen de WordPress, excepto el promedio grande, que están ocultos de forma predeterminada. Si su imagen específica dimensiones para su página de archivo, página de inicio, etc. WordPress también los crea. WordPress también conserva el tamaño original que carga y llama completo como en tamaño completo.
Para hacer menos trabajo, cambiar el tamaño manual de las imágenes para diferentes contenedores en su sitio, puede ajustar la configuración predeterminada en la sección de medios> Configuración o puede agregar dimensiones personalizadas, para que tenga más opciones para elegir. Evite pasar por encima y crear imágenes para cada propósito imaginable; de ​​lo contrario, grabará el espacio de disco en su servidor de alojamiento. Al hacer un cambio en cómo WordPress crea imágenes adicionales, no actualice imágenes que ya estén en su biblioteca de medios. Para cambiar las imágenes que ya ha subido, deberá usar las miniaturas de regeneración populares. Deberá regenerar miniaturas si hace alguna de las siguientes cosas:

Cambiar las dimensiones de imagen de WordPress predeterminadas
Agregar dimensiones de imagen personalizadas o
Cambiar a un nuevo tema que tiene diferentes dimensiones personalizadas.
Imágenes receptivas Uno de los usos para todas las imágenes diferentes es para que WordPress pueda servir imágenes receptivas. La funcionalidad de la imagen receptiva ha sido introducida en la versión 4.4 por WordPress y se activa de forma predeterminada. Funciona utilizando el atributo SRCSET para darle al navegador una lista de varias imágenes de diferentes tamaños para elegir. En lugar de descargar y transmitir el archivo de imagen más grande cada vez, el navegador carga el archivo con el tamaño apropiado para el dispositivo. Si el visitante usa un dispositivo móvil, recibirá una imagen más pequeña en SCSET. Si visita su sitio en un dispositivo de escritorio Retina, recibirán el enorme archivo de tamaño completo para Retina. WordPress escribe el código SRCSET y agrega imágenes al conjunto automático, pero sigue siendo una buena idea que nada en su tema o complementos. Imágenes retina retina y otras pantallas de alta definición tienen 4 veces más píxeles. Para mantener los detalles y la claridad de sus imágenes en las pantallas de alta definición, debe crear las imágenes de retina con datos suficientes para llenar todos estos píxeles nuevos y luego transmitirlas solo en los dispositivos Retina. Cómo servir imágenes de retina en WordPress Paso 1: Producir imágenes de píxeles de doble tamaño para producir imágenes de retina con datos suficientes para cada píxel, debe duplicar las dimensiones de píxeles para cada imagen que cargue. Si tiene una imagen de héroe grande, que es Ancho de 1600 PX y altura de 400 px, debe producir una imagen con 3200 PX de ancho y 800 px de altura.
Si el ancho de su blog es de 800 PX, las imágenes para las publicaciones de su blog tendrán que tener un ancho de 1600 PX y así sucesivamente. Solo tiene que duplicar las dimensiones de píxeles para el tamaño más grande posible al que se mostrará la imagen .. No tiene que crear imágenes de dimensiones dobles para cada posible dimensión de respuesta. Paso 2: Servir imágenes de retina en dispositivos Retina Opción 1: Una de las mejores formas de transmitir imágenes de retina es el uso del atributo. Simplemente agregue las imágenes de retina al conjunto de fuentes que WordPress usa para generar imágenes receptivas. Opción 2: Instale y configure el complemento gratuito de WordPress Retina 2X. Paso 3: Cargue las imágenes de Retina en WordPress y úselas en su sitio web cuando use la imagen Retina en su sitio, use la variación de la imagen que es la mitad del ancho y la altura del tamaño completo.
La imagen es un ancho de 1200px, pero tendré que usar la versión que sea 600px para obtener la calidad de la retina.

Archivos WebP de nueva generación Debido a que las imágenes de próxima generación, como WebP, no son ampliamente aceptadas, también podemos usar SRCSET para servir imágenes WebP compatibles. En primer lugar, deberá usar un convertidor webp para convertir las imágenes existentes en su biblioteca de medios, así como en futuras cargas. Luego debe determinar si el navegador del visitante acepta imágenes webp. Finalmente, puede usar srcset o un método diferente para transmitir imágenes webp si se aceptan o un formato de archivo anterior, como PNG o JPEG, si no. Smush Pro puede convertir imágenes que usan
Etiquete en su sitio web en la webp y los transmita a los navegadores compatibles con su CDN. Sin embargo, deberá usar un método diferente para imágenes de fondo CSS. Obtenga una prueba gratuita y vea qué diferencia para su sitio. Mire el video a continuación para obtener un ejemplo de cómo usar un optimizador de imágenes de WordPress para transmitir imágenes de nueva generación. SEO Image Image SEO ha ganado importancia recientemente y hay muchas oportunidades para generar tráfico de tráfico. A diferencia del contenido escrito, donde el contenido duplicado está penalizado, con imágenes, la mejor imagen optimizada “ganará” en los resultados de búsqueda y será el mejor clasificado. La identificación correcta de sus imágenes utilizando los atributos HTML correctos puede ayudar a descubrir sus imágenes en busca de imágenes, sin mencionar la mejora de la accesibilidad web, lo cual es muy importante. Aquí están los atributos importantes de las imágenes que debe completar para cada imagen. Título de la imagen WordPress El título de imagen es diferente del título del nombre del archivo. El título del archivo que agrega al crear una imagen en Photoshop u otro editor de imágenes es más importante que el campo de la imagen en la biblioteca de medios de WordPress. El primero contribuye al SEO, el último puede omitirse por completo. Otro texto El texto alternativo no es importante para SEO, es importante para la accesibilidad.

Para escribir una etiqueta alternativa efectiva para su imagen, querrá escribir una breve descripción que comunique lo que contiene la imagen o lo que intentan transmitir a alguien que no puede ver la imagen, ya sea porque usa un lector de pantalla o no puede descargar el imagen.Además, el texto alternativo utilizado en el atributo de otro texto depende del tipo de imagen utilizada en su contenido. Lea nuestra guía completa para escribir etiquetas de imágenes alternativas en WordPress para lograr el equilibrio correcto entre SEO y accesibilidad.
Legend Image Legends y el otro texto que rodea su imagen proporciona el contexto de la imagen. También ayuda a Google a comprender de qué se trata en la imagen. No todas las imágenes necesitan un subtítulo, pero los subtítulos funcionan de manera similar en el texto del cuerpo. Debido a que se diferencian del resto del texto y se destacan, tienen cuatro veces más probabilidades de ser leídos. Otros elementos en la página al lado de la imagen también Google tiene en cuenta la página completa al intentar comprender sus imágenes. ¿Cuál es el título de la página? ¿Cuál es la URL? Incluso si no están directamente relacionados con su imagen, Google los usa como factor de clasificación. Incluya las palabras clave y las expresiones asociadas en el título de la página, la URL de la página y la URL de la imagen si es posible. Sitemaps de imagen Para asegurarse de que Google indexe todas sus imágenes, debe crear un mapa del sitio de imagen. Los Sitemaps son particularmente importantes si actualiza con frecuencia su contenido, tiene un sitio de comercio electrónico o si tiene un nuevo sitio y desea que Google indexe sus imágenes lo antes posible. Si desea una solución fácil, puede usar SmartCrawl para generar un mapa del sitio.
Etiquetas de redes sociales Las etiquetas de las redes sociales son una forma en que puede etiquetar su contenido, por lo que cuando alguien lo distribuya en una red social, comparta lo que desea compartir.Facebook, Twitter, LinkedIn y Pinterest aceptan todo el gráfico abierto, que es el idioma de las etiquetas para las redes sociales de Facebook.Twitter tiene sus propias meta etiquetas, pero reconocerá datos de gráficos abiertos si sus etiquetas sociales de Twitter no están disponibles.La etiqueta gráfica abierta importante para sus imágenes es OG:
Imagen y le permite especificar qué imagen desea mostrar Facebook y otras redes sociales cuando alguien distribuye su publicación. Servir imágenes Lo último que debe prestar atención al optimizar las imágenes es cómo se entregan sus imágenes. Hay varias herramientas que puede usar en WordPress para mejorar la optimización de imágenes y la velocidad de la página. Smush Pro tiene carga perezosa y su propia CDN. Hummingbird puede ayudar a memorizar el navegador en el caché. Obtenga una muestra gratuita de miembro sin riesgo y pruebe las versiones Pro de ambos en su sitio La carga perezosa es una técnica para mejorar la velocidad inicial y la carga útil al posponer la carga de activos no críticos que actualmente no se encuentran en la ventana de vista del navegador. Retrasar las imágenes fuera de la pantalla en WordPress significa prácticamente esperar para cargar las imágenes que aún no podemos ver. La memoria del navegador en la memorización de caché en caché es una forma confiable de mejorar la velocidad del sitio para sus visitantes. Al almacenar caché para una recuperación más rápida. Con la memoria en el caché HTTP, el navegador almacena una copia de los activos (como imágenes) descargados por el usuario HTTP en caché, para que puedan llevarlos sin hacer un viaje adicional al servidor. Esto mejora dramáticamente el rendimiento para los visitantes que se repiten cuando se realizan correctamente. Redes de entrega de contenido, CDN en lugar de transmitir sus imágenes en su servidor web solo en una ubicación, los CDN tienen ubicaciones en todo el mundo, por lo que la transferencia de datos necesaria para cargar sus imágenes.
Tiene lugar mucho más rápido. Una cosa para recordar si usa un CDN para transmitir sus imágenes es que querrá evitar cambiar los CDN o activar un CDN y desactivar. Esto cambiará la URL de la imagen y puede tener un impacto negativo en su imagen. Recursos adicionales para tutoriales más detallados sobre la optimización de la imagen, consulte nuestras otras publicaciones sobre este tema: cómo cambiar el tamaño y transmitir correctamente a escala con WordPress
¡Los mejores formatos de imagen para sitios web comparados! PNG, JPG, GIF y WEBP
Cómo transmitir imágenes en formatos de generación junto a WordPress
Cómo hacer imágenes preparadas para retina que no ralentizan WordPress

Las dimensiones de imagen de WordPress predeterminadas y cómo agregar dimensiones personalizadas
La guía completa de SEO para fotos

Cómo posponer imágenes fuera de pantalla en WordPress con carga perezosa
6 complementos de carga perezosa para que su sitio web de WordPress sea más rápido

Editar en el bloque de fotos para WordPress
Esto es todo lo que es para optimizar la imagen de WordPress, hay mucho en la optimización de imágenes, por lo que la forma más inteligente de comenzar es auditar su sitio y ver dónde se centran sus imágenes en las cosas más importantes, escalar imágenes y agregar texto alternativo son dos cosas que requieren mucho tiempo, pero pueden ayudarlo a hacer una mejora dramática. Otras tácticas de optimización de imágenes, como activar la carga perezosa, utilizando la memoria del navegador, agregar un CDN, crear un sitio de imagen, usar imágenes de nueva generación se pueden hacer con un solo golpe con un optimizador de imágenes de WordPress como Smush Pro. Entonces, si no tiene mucho tiempo o administra muchos sitios, usar una compresión de imagen automática de WordPress es un buen lugar para comenzar. Finalmente, el uso de editores de bloques fuertes, como Lightroom y Photoshop, puede ayudarlo a mejorar las imágenes individuales mucho más rápido. Si habla en serio para mejorar su juego de optimización de imágenes, no se vea más allá del Trifer de optimización de WPMU Dev: Hummingbird, SmartCrawl y el loco Popular Smush Pro. Smush Pro es el mejor optimizador de imágenes de WordPress porque hace todo. Puede probar los tres en su sitio con un intento gratuito. Si nunca ha tomado en serio la optimización de la imagen, ¿se sorprenderá gratamente cuánto mejorará el rendimiento de su sitio? ¿Desea agregar algo sobre la optimización de la imagen?

Etiquetas:
Imagen formada
Optimización de imágenes
imágenes
Optimizar las imágenes
retina
Webp
WP Smush Pro