Cómo transmitir imágenes en formatos de generación junto a WordPress

Justo cuando todos creían que las imágenes de WebP habían terminado, volvieron en gran medida. Las imágenes de WebP están justo en el medio de su historia de regreso, ahora que Firefox y Microsoft Edge recientemente han comenzado a aceptar imágenes webp. ¿Qué es WebP? Es el mejor formato de imagen que nadie ha escuchado, pero esto está a punto de cambiar. En esta publicación, le mostraré cómo comenzar a usar imágenes WebP en su sitio web de WordPress. Analizaremos cómo convertir sus imágenes en la webp y cómo transmitirlas para navegadores compatibles. También le mostraré cómo Smush Pro puede ocuparse de esto por usted si no desea ingresar su código de sitio.
¿Qué son las imágenes de nueva generación? Los GIF se inventaron en 1987. El primer estándar JPEG se lanzó en 1992, y PNG se convirtió en una recomendación W3C en octubre de 1996. Sé que los 90 no se sienten tanto, pero hemos tenido casi 30 años y aún usamos la misma imagen formada ! ¿No es el momento de una actualización? Ingrese la siguiente generación de formatos de imagen. JPEG 2000, JPEG XR y WebP están formados por una imagen moderna, con capacidades de compresión superiores y con una calidad notable para agradecer a los nativos web. Esto significa que producen archivos de imagen mucho más pequeños, por lo que puede mejorar enormemente su página utilizando formatos de nueva generación.
WebP es el más débil y generalmente alcanza un 30% más de compresión que JPEG y JPEG 2000, por lo que este es el formato que concentraremos hoy. ¿Qué es WebP? WebP es el formato de imagen de código abierto de Google. Utilizan la extensión del archivo .webp Hay varias variantes de imágenes webp, se usa pérdidas y es comparable a las imágenes JPEG, pero con un tamaño de archivo en un 25-34% más pequeño. Las imágenes de WebP con pérdida también aceptan transparencia, lo que JPEGS no puede hacer. El otro es el formato WebP de pérdidas, que es similar al formato de imagen PNG, pero con un tamaño de archivo de 26% más pequeño. Las imágenes WebP también son versátiles, porque tienen las capacidades de GIF, JPEGS y PNG-URI a un formato de un solo formato . Podrá optimizar y simplificar. Si eso no despierta alegría, nada lo hará.
Aquí hay una breve recapitulación de la funcionalidad

WebP acepta lo siguiente:
Animación
Sin compresión de pérdida
Compresión con pérdidas
La transparencia del canal alfa
Esto significa que puede convertir PNG, GIF y JPEGS en un formato conveniente para beneficiarse de los beneficios del rendimiento. Para una comparación directa de diferentes formatos de archivo, consulte esta publicación. No olvide obtener la hoja descargable mientras lo hace.
Webp gratis ahora malas noticias. No todos los navegadores todavía aceptan imágenes webp. Pero esta es una historia de recuperación, ¿recuerdas? Mozilla ingresó a bordo en diciembre de 2018, por lo que hace solo unos meses, y le dio a las imágenes de IMBP un ​​impulso tan necesario. Ahora estamos esperando en gran medida a Safari, aunque Internet Explorer y Firefox para Android aún no aceptan WebP. Sin embargo, dado que un gigante como Google se ha comprometido a hacer que la web sea más rápido y admitir el proyecto, es una apuesta bastante segura de que las imágenes de WebP son el futuro.
De hecho, si ha utilizado recientemente Google PageSpeed ​​Insights, es posible que haya notado el mensaje de oportunidad “Servir imágenes en formatos de próxima generación”. Este es el modo de Google para instarlo a adoptar imágenes webp. (Si recibe un mensaje “Imágenes con el tamaño correcto” en Google PageSpeed ​​Insights, intente escalar las imágenes).

Cómo agregar imágenes WebP a WordPress Si desea ser un usuario temprano y usar imágenes webp en WordPress, también notará que la biblioteca de medios de WordPress no le permite cargar imágenes WebP por razones de seguridad. No dejes que eso te asuste. Esta no es una situación de SVG. WordPress.com permite las imágenes WebP y puede activar esta función en su sitio de WordPress autoestagonante.
Lo siento, no lo siento
Hay varias formas de evitar estos problemas de adopción temprana en WordPress para que pueda comenzar a usar imágenes WebP. Para hacer esto, necesitaremos una solución que:

Use un convertidor webp para convertir las imágenes existentes de su biblioteca de medios a WebP, así como en futuras cargas
Ser capaz de determinar si el navegador del visitante acepta imágenes de WebPDistribute de imágenes WebP si se aceptan o un formato de archivo anterior, como PNG o JPEG, si no
Alerta de spoiler, si no desea seguir todos estos pasos y pasar por los problemas para cambiar los archivos del sitio y optimizar sus imágenes, Smush Pro es una solución todo en uno que puede convertir sus imágenes en WordPress y servirlas en navegadores compatibles con algunos interruptores. Puede obtener un intento gratuito para que pueda probar los beneficios de rendimiento aquí.
Imágenes de conversión a WebP para WordPress Aunque puede convertir sus imágenes en nueva generación antes de cargarlas en su biblioteca de Media WordPress, esto no es práctico si tiene muchas imágenes. Si necesita seguir esa ruta (es posible que desee probar el rendimiento de diferentes tipos de imágenes), puede usar un convertidor webp, como image.online-convert.com/convert-to-webp. Simplemente cargará el archivo JPEG, PNG o GIF, esperará a que cree una webp y luego descargue la nueva imagen.
Uno hacia abajo, sigo siendo mil
Adobe Photoshop no exporta archivos a WebP de forma predeterminada, pero puede agregar esta funcionalidad con un complemento. Esto no es lo mismo que un complemento de WordPress. Este es un complemento que descarga y agrega a la carpeta Adobe Photoshop en su computadora.
También puede descargar e instalar la prisión web para Mac o WebPConv para Windows. Ambas pueden hacer conversiones JPEG en WebP o PNG en WebP. Para las imágenes WebP WordPress, puede usar SFTP para cargar los archivos WebP directamente en la carpeta de carga, sin pasar por alto la biblioteca de medios. Por razones para la comodidad, también puede pagar la webp en la biblioteca de medios de WordPress cambiando el archivo con las funciones de su sitio. Imágenes web para WordPress Si tiene un sitio maduro con muchos conversos, necesitará un instrumento mejor, para que pueda convertir Las imágenes en formatos de próxima generación. Puede usar un complemento como Smush Pro para servir versiones WebP de todas sus imágenes con su CDN. Smush deja las imágenes originales intactos y hace la conversión antes de entregar la imagen. Esto significa que el Smush Pro CDN no cambia directamente sus imágenes y no las daña de ninguna manera. Si apaga la opción de conversión de WebP, el servidor ya no convertirá sus imágenes en WebP, y su sitio volverá al uso del formato de archivo original que tenía cuando se cargó.

Smush Pro también le brinda la opción de convertir imágenes en otras carpetas, por lo que puede optimizar los fondos e iconos del tema, por ejemplo.
Analizaremos cómo configurar Smush Pro CDN más adelante en esta publicación. También puede usar la línea de comando. Ver este tutorial. Cómo transmitir imágenes en los siguientes formatos de generación Algunos complementos de optimización de imágenes convierten solo las impulsos de imagen, pero no asuman la responsabilidad de dar a los visitantes la imagen correcta. Para esto, es posible que deba usar un complemento adicional o seguir uno de los pasos a continuación. Smush Pro, trata con ambos, la conversión en el formulario web de WordPress y servirlo en navegadores compatibles, para que pueda omitir todas estas tonterías. 1. Use JavaScript para detectar el soporte de WebP, puede hacerlo escribiendo su propio código personalizado que intenta decodificar una imagen webp. Si la prueba es exitosa, puede enviar imágenes WebP adicionales. Aquí hay una manera de hacerlo. También puede usar una biblioteca JavaScript, como Modernizer, que detecta el soporte de WebP de la misma manera. Probar las capacidades reales del navegador también lo exime del trabajo adicional para reescribir su código una vez que los navegadores incompatibles comienzan a aceptar WebP. Entonces, por ejemplo, una vez que Safari acepta imágenes WebP y pasa la prueba de decodificación de WebP, los usuarios de Safari recibirán imágenes webp sin tener que reescribir la lógica del código para incluir Safari.
2. Use el navegador Aceptar los encabezados El navegador de visitantes enviará un encabezado de solicitud de “aceptar”, lo que indica qué formatos de imagen aceptarán del servidor web (Lovefox). Si alguna vez has hecho un pedido de comida con un amigo, hiciste algo similar cuando le dices que te traiga algo de pasta, pero nada con camarones porque eres alérgico. En esta analogía, su amigo es el servidor y usted es el navegador que especifica lo que aceptará. Si el navegador indica que aceptará imágenes WebP, el servidor web sabe que puede enviar WEBP de manera segura. Este es el método que usa Smush Pro CDN para detectar qué navegadores aceptarán imágenes webp. 3. Cambie el archivo de acceso de hipertexto (.htaccess) en WordPress para que su archivo .htaccess esté en el directorio raíz y es un archivo único por varias razones: comienza con un punto (.), Lo que significa que es un archivo oculto. No lo verá si no ha visible los archivos ocultos
No tiene extensión de archivo

Si comete un error al editarlo, su servidor puede funcionar defectuoso, ¡así que edítelo solo si sabe lo que hace!
En WordPress, este archivo se usa comúnmente para reescribir la URL. En este caso, se cambia la URL de la imagen y se agrega una extensión .WEBP.
Este suele ser un archivo de WordPress. Htaccess.
En el código Vincent Orback en GitHub, por ejemplo, el archivo .htaccess se modifica. Las URL de las imágenes JPEG y PNG se modifican si hay una versión webp en la misma carpeta y si el navegador acepta WebP. La responsabilidad de servir a la imagen correcta, en este caso, radica en el servidor web Apache. 4. Servir más de tamaño y HTML 5 tamaños 5 de una de las mejores formas de transmitir imágenes webp es confiar en su navegador para elegir la mejor imagen y usar el elemento HTML5 para comunicar las diversas imágenes disponibles para el navegador a elegir. No solo puede usar el elemento para proporcionar diferentes formatos de imagen, sino también diferentes dimensiones para dispositivos móviles y retina. Vea este lindo ejemplo. Mientras que el HTML de una imagen se verá así:

El elemento tiene muchas cosas que hacer:

Vea cómo está vestido con el elemento ? Los navegadores que no aceptan imágenes WebP volverán a la imagen especificada en el elemento . En realidad
Es un requisito (o la imagen no se reproducirá) y el último debe aparecer. Cómo transmitir imágenes de nueva generación usando Smush Pro Si esto está sobre su cabeza, hay una manera más simple de convertir sus imágenes en WebP y transmitirlas a navegadores compatibles con Smush Pro. En primer lugar, deberá activar Smush Pro CDN. En la configuración de Smush, vaya a la sección CDN y presione el botón .smush CDN se incluye con Smush Pro
Después de activar el CDN, desplácese hacia abajo a la conversión de CDN de CDN y active.
Bueno, fue fácil

¡Eso es todo! Si desea probar Smush Pro sin riesgos, regístrese para un intento gratuito. Ir a la optimización para ser pionero no está exento de desafíos, por lo que facilité comenzar con WebP sin todo el drama. Es solo cuestión de tiempo hasta que las imágenes de WebP se conviertan en la norma, por lo que bien podría comenzar. Las imágenes hinchadas a menudo son responsables de reducir la velocidad de la página. Sus visitantes esperan imágenes grandes, hermosas y claras en sus dispositivos masivos y también quieren que se carguen al instante. Las imágenes de WebP pueden ayudarlo a lograr este alto nivel. Si necesita ayuda para optimizar las imágenes, consulte nuestras otras publicaciones sobre cómo elegir el formato de imagen correcto y escalar las imágenes. Y ciertamente intentas Smush Pro si aún no lo has hecho. Hemos agregado muchas funciones nuevas, como el soporte de WebP para que pueda permanecer en la parte superior para optimizar la imagen.
¿Ha probado las imágenes WebP en su sitio? Cuéntame más sobre cómo va tu trabajo.
Etiquetas:

CDN
galería

imágenes