Cómo optimizar, cambiar el tamaño y transmitir correctamente las imágenes con WordPress

Servir las escaleras es una de las formas más pasadas con el mejor rendimiento del sitio. ¿Sus fotos mantienen su sitio de WordPress? Las imágenes ocupan mucho espacio para el tamaño del archivo, especialmente si están hinchadas y de gran tamaño. Por lo tanto, las imágenes deben ser número uno en su lista de cosas para optimizar si intenta mejorar la velocidad, las conversiones o las ventas de la página. En esta publicación, nos centraremos en cómo transmitir imágenes en escala con WordPress. Aprenderá cómo dimensionar adecuadamente las imágenes en WordPress de varias maneras diferentes y cómo mejorar enormemente el flujo de trabajo de optimización de imágenes con Smush Pro.
¿Cuáles son las imágenes en la escala? Las imágenes en la web deben caer en el área de Ricitos de Oro. No demasiado grande, no demasiado pequeño. Tienen que estar bien. Si son demasiado pequeños y extendidos, no estarán claro.

Esta imagen es demasiado pequeña y se ha ampliado con el atributo de ancho HTML
Por otro lado, si una imagen es demasiado grande, el navegador la reducirá al tamaño correcto. Esto no afecta cómo se ve la imagen, pero se agregará al tamaño del archivo de página. La guía completa para dominar la optimización de la imagen porque no puede ver un cambio en la calidad, el peso adicional de los archivos de imagen se vuelve fácil de pasar por alto. Y dado que la mayoría de las personas no saben que hay un problema, no lo resuelven. Continúan confiando en el navegador para proporcionar el tamaño correcto, porque ese es el navegador, ¿verdad?
Equivocado.

Cuando tenga la oportunidad de “Magini con el tamaño correcto” en Google PageSpeed ​​Insights, sabrá que es hora de escalar algunas imágenes. Según Google … idealmente, su página nunca debe transmitir imágenes más grandes que la versión representada en la pantalla del usuario. Cualquiera más grande … solo conduce a pérdidas de bytes y ralentiza el tiempo de carga de la página. (Fuente: desarrolladores.google.com) Ofrecer una imagen demasiado grande lo duele de varias maneras. En primer lugar, distraiga el navegador, obligándolo a realizar solicitudes adicionales de servidores. En lugar de entregar una página web lo antes posible, deben detenerse y cambiar el tamaño de la imagen. Esto requiere tiempo para mis amigos, especialmente si sus páginas web son ricas en fotos.
En segundo lugar, si cobra una selfie de tamaño completo directamente desde el teléfono, pero la muestra como un pequeño grave, entonces pierde el tiempo y los datos descargando una imagen excesivamente grande.
Un ejemplo de una sugerencia en Hummingbird para comprimir y cambiar el tamaño de una imagen.

Ingrese imágenes en la escala. Una imagen en la escala es una imagen que ha sido dimensionada para que coincida exactamente con las dimensiones para las que la usa. A diferencia de Cutting, que en última instancia puede cambiar las proporciones de una imagen, la escala conserva las dimensiones.
Si lee esta publicación en una pantalla de tamaño completo, entonces el cuerpo de esta publicación tiene un ancho de 600 PX. Debido a que estamos completamente sobre la optimización aquí en WPMU DE, cuando creo imágenes para publicaciones de blog, las hago exactamente de 600px de ancho. Este es el tamaño exacto que necesito para que el navegador no haga ningún trabajo adicional y no necesita usar más datos. Mega Supreme Guide para acelerar los optimizadores de velocidad del sitio de WordPress, como Hummingbird, Gtmetrix y Google PageSpeed ​​Insights, recomendarán escalar imágenes. Demasiado grande y ralentice su página, transmitido
¿Deberían los atributos de SCSET y tamaño no deben cuidar el cambio de tamaño de la imagen? Si y no. Quieres la máxima optimización, ¿verdad? Si hace esto, SRCSET y tamaño lo ayudarán a acercarse al tamaño de imagen ideal, pero no siempre le darán el tamaño exacto que necesita y no reducirá el exceso al tamaño más grande. El atributo SRCSET funciona proporcionando la URL para la imagen y luego dando al navegador una lista de imágenes para elegir en diferentes tamaños. Este conjunto de fuentes para esa selfie en el teléfono móvil que mencioné anteriormente se vería así:

Srcset = “selfie-100×100.png 100W, selfie-200×200.png 200w, selfie-400×400.png 400w” arriba, WordPress le dice al navegador, usted sabe más sobre el usuario que yo, aquí está la imagen que desea en 3 tamaños diferentes , elija el que funcione mejor. Cuando el navegador tiene que mostrar una gravatar de 75 x 75 píxeles junto a un comentario, elegirá la primera opción en el conjunto y la cambiará ligeramente. Si el usuario tiene un dispositivo retiniano, elegirá la segunda opción. Esto reduce los desechos, pero la escala le permitirá obtener un rendimiento adicional. Cómo transmitir imágenes en la escala en WordPress para comenzar, debe conocer las dimensiones de las imágenes que se utilizarán en su sitio. Me refiero a imágenes de banner, imágenes de héroes, imágenes en blog, gravary, etc. Advirtiendo nuestro tutorial rápido sobre Cómo detectar imágenes de tamaño incorrecto en WordPress. Queremos saber cuál es la dimensión más grande a la que se mostrará cada imagen, porque sabemos que todo sobre este umbral es inútil. Por ejemplo, suponga que quiero usar una foto del océano en la página inicial de mi sitio. La imagen en su estado sin cambios tiene 4534px x 3023px.
No hice nada para cambiar el tamaño de la fotografía … aún por una imagen en el cuerpo de una publicación de blog, probablemente tendrá que transmitir una imagen con ancho entre 600 px y 960 px, y para las imágenes presentadas con héroes que se extienden En el ancho de una pantalla de computadora de escritorio, mire algo con un ancho de rango de 1600 PX.
Además, tenga en cuenta que deberá duplicar estas dimensiones para alojar las pantallas de Retina. La dimensión más grande que debe tener la imagen de 1600 PX es 3200 PX. Para encontrar el tamaño que la imagen debe tener que encajar perfectamente, buscaremos la imagen en el sitio y abriremos las herramientas de desarrolladores del navegador. Si usa Chrome, haga clic en la imagen y vaya a inspeccionar. En Firefox, seleccione Inspeccionar el elemento. También puede usar CTRL + Shift + I
En Chrome, cuando pasa con el mouse sobre la URL de la imagen, verá el tamaño en el que se muestra la imagen con la imagen “natural” original en los soportes. Ese archivo de imagen grande es lo que descarga a sus visitantes.

La imagen es de más de 3000 píxeles demasiado grandes, qué desechos.
Esto es similar en Firefox. Una vez que inspeccione el elemento, notará que al lado de la imagen están las dimensiones.

Esto nos dice el tamaño de la imagen que necesitamos
Ahora que sabemos qué tamaño debe tener la imagen, podemos cambiar el tamaño correctamente de las imágenes en WordPress de varias maneras diferentes. Corte las imágenes en la biblioteca de medios para cortar una imagen manualmente, vaya a la biblioteca de medios y haga clic en la imagen que desea cortar. Luego, haga clic en el botón de imagen para abrir la interfaz de edición.

Vea los detalles de adjuntar una imagen, luego haga clic en el botón de imagen.
SCAL o corte la imagen según sea necesario utilizando las opciones correctas apropiadas. Tenga en cuenta que si escala la imagen para que coincida con el ancho que necesita, la altura puede ser más pequeña o más larga que la dimensión definida en su tema, dependiendo de las dimensiones de la imagen originales. Si elige escalar la imagen, permanece en proporción a la imagen original. Por otro lado, si decide cortar la imagen, es posible que no necesariamente se edite proporcionalmente, dependiendo de las dimensiones que elija. Puede escalar su imagen escribiendo el ancho y la altura, luego haciendo clic en el botón de escala o si lo prefiere Para cortar la imagen, puede hacer esto haciendo clic y tirando del mouse sobre la imagen y seleccionando el área que desea ser visible. Luego suelte el clic del mouse para revelar la selección. 9 Funciones ocultas de la biblioteca de medios de WordPress solo usuarios poderosos saben que puede hacer clic y dibujar cuadrados desde los bordes y los lados para hacer los ajustes necesarios al ancho y la altura o puede ingresar las dimensiones exactas en el campo de selección correcto. También tiene la opción de ingresar la relación de aspecto deseada para la imagen:

La relación de aspecto es la relación entre ancho y altura. Puede mantener la relación de apariencia manteniendo la tecla de cambio mientras cambia el tamaño de la selección. Use el cuadro de entrada para especificar la relación de apariencia, por ejemplo 1: 1 (cuadrado), 4: 3, 16: 9, etc.
También puede hacer clic y extraer el área seleccionada para moverla al área exacta que desea ver. Si ha cortado la imagen seleccionando un área con el mouse, haga clic en el icono de corte a través de la imagen. Omita o corte la imagen para que coincida con el tamaño definido por su tema.

Luego elija el tamaño predefinido de la imagen a la que desea aplicar los cambios en la configuración en miniatura. Esta opción puede ser útil si desea editar la imagen mientras retiene la miniatura.
Por ejemplo, es posible que desee tener una miniatura cuadrada que solo muestre una sección de la imagen. Cuando haya terminado de hacer cambios, haga clic en el botón Guardar en su imagen.
Seleccione qué tamaños de imagen desea aplicar el cambio de tamaño, luego haga clic en Guardar.
También puede cambiar el tamaño manual de las imágenes mientras edita una publicación o página haciendo clic en el botón Agregar contenido de medios sobre el editor. Luego haga clic en la pestaña Biblioteca de medios y elija una de las imágenes enumeradas. Luego haga clic en el enlace Editar imagen a la derecha para acceder a la misma interfaz de edición mencionada anteriormente.
También puede cambiar el tamaño manual de una imagen mientras edita una publicación o página.

¿Cómo cambia las imágenes de WordPress con la configuración de los medios? Si las imágenes que necesita cambiar el tamaño manualmente son los valores predeterminados creados por WordPress, puede intentar editarlas a través de la configuración de los medios en la Junta Administrativa. Las dimensiones implícitas de las imágenes de WordPress son miniaturas, medianas, grandes y grandes, sin embargo, la dimensión completa se refiere a las dimensiones originales de las imágenes cargadas y no se puede modificar en la configuración de los medios. Para editar la imagen original, consulte los detalles de arriba. Para cambiar el tamaño manual de las dimensiones de imagen predeterminadas, vaya a Configuración> Medios e ingrese el ancho máximo y la altura máxima que necesita para el tamaño de imagen aplicable que desea cambiar en los campos apropiados. Si necesita cambiar el tamaño de la miniatura, también puede mantener el cuadro de selección seleccionado opcional para cortar la miniatura a las dimensiones exactas que especifica. Normalmente, las miniaturas se editan automáticamente en proporción. Cuando haya terminado, haga clic en Guardar los cambios en la parte inferior de la página. Edite la imagen predeterminada de WordPress por configuración de medios.
Tenga en cuenta que estas dimensiones se pueden usar en varios lugares de su tema, por lo que puede editar imágenes que no desea cambiar el tamaño.También puede agregar dimensiones personalizadas a WordPress.Una vez que haya guardado los cambios, instale y active las miniaturas del complemento de regeneración para cambiar el tamaño de las imágenes que ha cargado previamente para cumplir con las nuevas dimensiones que acaba de configurar.Edite el archivo en pintura Abra su imagen en pintura, Adobe Photoshop o el editor de imágenes deseado.Usaremos las dimensiones que hemos creado en las herramientas de desarrolladores. Cómo cambiar el tamaño de una imagen en pintura

En pintura, acceda al cambio de tamaño en la pestaña inicial. Se abrirá una caja que le permitirá ingresar las nuevas dimensiones. Seleccione el botón de radio Pixel y luego edite las dimensiones horizontales. Las dimensiones verticales se cambiarán automáticamente si el cuadro de selección se verifica para mantener la relación de apariencia. Eso es lo que queremos. Si la casilla no está marcada, deberá hacer el cálculo usted mismo. Cuando termine de ajustar las dimensiones, haga clic en Aceptar. Luego puede guardar el archivo en pintura, recargar en WordPress y reemplazar la imagen con el nuevo archivo. Optimizar imágenes con Smush Smush y Smush Pro puede ahorrarle mucho tiempo cuando comienza a optimizar sus imágenes. La detección del tamaño incorrecto tanto Smush como Smush Pro tienen la opción de detectar el tamaño incorrecto en la configuración del complemento. Si eres como yo y olvida cambiar el tamaño de tus imágenes de vez en cuando, esta característica te ayudará a ver qué fotos disminuyo. Cuando visite su sitio, las imágenes que son demasiado grandes o demasiado pequeñas aparecerán con un contorno amarillo. Cuando abre la pestaña de información (consulte el icono amarillo “I”?) Smush anunciará lo que está mal con el tamaño de la imagen. ¡Gracias Smush! Solo los administradores verán una imagen resaltada y un mensaje de error

Para activar esta función en Smush y Smush Pro, vaya al menú del complemento y, en la sección del instrumento, active la detección y visualización de imágenes incorrectas. Luego, guarde para actualizar su configuración y vea imágenes de dimensiones incorrectas en el frente de su sitio.
Esta característica está disponible en la versión gratuita de Smush

RESIMENTO DE IMAGEN AUTOMÁTICO ¿Desea evitar que usted y otros carguen imágenes súper enormes para que no consuma tanto su espacio de almacenamiento? Smush y Smush Pro pueden ayudarte. En la configuración del complemento Smush Smush, vaya a la sección de cambio de tamaño de la imagen y active el cambio de tamaño de mis imágenes a tamaño completo. Antes de que se cargue una imagen en su biblioteca de medios, Smush la cambiará el tamaño para que coincida con el ancho y la altura que está especificando. Observe cómo Smush le indica cuál debería ser el tamaño de imagen más grande en el sitio: su UL y luego duplicarlo para dispositivos Retina.
Smush también le brinda la opción de mantener una copia de la imagen original.

¿Estás nervioso de enredar tus fotos? Mantenga el original
Esta característica esencialmente reduce el exceso de la imagen más grande. Uno abajo, hay cientos. Pero, ¿qué pasa si desea que todas las imágenes cargadas tengan el tamaño perfecto sin tener que pasar por los pasos de arriba y manejar cada imagen manualmente? Fácil, conviértase en un miembro de desarrollo de WPMU y obtenga acceso al Lightning Fast CDN de Smush Pro (o simplemente obtenga Smush Pro por su cuenta). Si bien su host puede incluir un CDN con su cuenta de alojamiento para mejorar el rendimiento de su sitio, Smush Pro CDN ha sido especialmente diseñado para la optimización de imágenes. Smush Pro CDN no solo le dará las imágenes a velocidades de rayo, sino que nuestro CDN también proporcionará el tamaño perfecto para sus usuarios.

Deberá configurar Smush Pro CDN con algunos pasos simples
Smush Pro CDN puede ayudarlo incluso si tiene problemas con las “imágenes de sugerencia con el tamaño correcto” de Google PageSpeed. Después del botón que comienza, llegará a la configuración de la configuración de CDN.

Simplemente active la opción de cambio de tamaño automático y el CDN le dará la imagen con el tamaño correcto, manteniendo intactas las imágenes originales. ¿Cómo es para genial? La escala de imágenes se ha resuelto como puede ver, hay varias formas de dimensionar correctamente las imágenes en WordPress, pero puede ser un proceso agotador si tiene un sitio maduro con muchas imágenes. En lugar de levantar las manos y decir “Oh, bueno, este es el problema del usuario” y deje sus imágenes como están, sugiero usar un complemento como Smush para resolver el problema en cinco minutos en lugar de cinco días. También puede probar gratis Smush Pro gratis. Tus usuarios te lo agradecerán. Y probablemente verá costos de alojamiento más bajos, porque no necesitará tanto espacio. Es un beneficio mutuo. Si no ha echado un vistazo a Smush por algún tiempo, es hora de una revisión. Hemos agregado muchas características nuevas, y Smush Pro es mucho más fuerte que antes. Smush Pro ya era el principal complemento de optimización de imágenes, por lo que eso dice mucho. Compruebe, no se sentirá decepcionado.
¿Qué trucos usas para cambiar el tamaño y comprimir las imágenes? ¿Has probado WP Smush Pro para escalar tus imágenes? Comparta su consejo en los comentarios a continuación.

Etiquetas:
apresamiento

colibrí
imágenes

actuación
Cambiar de tamaño

Rubor
WP Smush Pro