homefinance blog
¿Qué optimiza la imagen? A menudo escuchamos la optimización de la imagen de la frase en el contexto de construir y mantener el sitio, pero ¿qué significa exactamente? La optimización de la imagen está comprimiendo el tamaño del archivo de una imagen (su peso) sin cambiar su tamaño (su ancho y altura). Algunas optimizaciones reducen la calidad de la imagen: esto se llama compresión de “pérdidas”, y otras dejan la calidad intacta, y esto se llama compresión de no pérdida. ¿Qué te enseñará este artículo? Este artículo discutirá por qué nos gustaría optimizar las imágenes en nuestro sitio web de WordPress, qué complementos debe usar para optimizar las imágenes de su sitio y terminaremos con una función básica que aborde el problema.
Mi búsqueda fue encontrar el mejor optimizador de imágenes en WordPress y probé y probé tres complementos gratuitos principales:
Smush – Imágenes de carga perezosa, optimización y compresión de imágenes
Optimizador de imagen EWWW
TinyPng – Compress JPEG y imágenes PNG
Elegí estos tres porque son los complementos más conocidos centrados exclusivamente en la optimización y nada más, a diferencia de otros complementos, que optimizan todo el sitio, y la optimización de la imagen es solo parte de su funcionalidad. ¿Por qué nos gustaría optimizar las imágenes? La disminución de las dimensiones del archivo de imagen, es decir, la optimización de imágenes, tiene dos beneficios:
El primero es que la velocidad del sitio aumenta, porque los archivos más pequeños se cargan más rápido.
El segundo beneficio es que ahorra espacio en el disco y, por lo tanto, si su plan de alojamiento se basa en el espacio de disco, podría ahorrar dinero.
Acelerar WordPress: cómo optimizamos el rendimiento del sitio en wpshoutcucucum que entendemos la motivación, profundicemos en las diversas opciones que el depósito de complementos de WordPress ofrece de forma gratuita. Mientras probaba los complementos para probar los complementos, descargué imágenes de tres sitios: Pixabay, Frepik y Unssplash.
Descargué imágenes en 2 dimensiones: una imagen más pequeña con un ancho de 640 píxeles y una imagen más grande con un ancho de 1920 píxeles. Cuando esas dimensiones no estaban disponibles, redimensionamos la imagen descargada usando Paint.net. Imagen de Pixabay
Imagen de Florian Pircher de Pixabay 640 × 426 píxeles Tamaño de imagen original: 30.4 kb. (Sin ahorros)
1920 × 1280 píxeles Tamaño de imagen original: 322.3 KB
Diseño de FreepikVector creado por historias – www.freepik.com Freepik no le permite elegir el ancho. En cambio, le permito descargar un archivo zip que contiene una imagen grande, además de otros formatos de imagen (principalmente Photoshop y/o ilustrador de Adobe). Por lo tanto, utilicé pintar.net para cambiarle el tamaño a 640 píxeles de ancho.
640 × 640 píxeles Tamaño de imagen: 58.6 kb.
<
tr>
1920 × 1280 píxeles Tamaño de imagen: 256.8 kb. Full
Unsplash ImagePhotography por Nguyen Dang Hoang NHU en Unsplash 640 × 426 Pixels Tamaño de imagen: 52.8 KB
<
1920 × 1280 píxeles Tamaño de imagen:
393.4 kb
| full | 0 (sin ahorros) | 0 (sin ahorros) | 203.9 KB (51.83%) |
| (850 × 567) | 2.0 kb (2, 8%) | reducido en 2.8%(2.0 kb) | 14.7 kb (18.26%) |
| medio_large (768 × 512) | 1.7 kb (2.8%) | reducido en 2.8%(1.7 kb) | 14.5 kb (21.64%) |
| medio (600 × 400) | 1.2 kb (3%) | reducido en 3.0%(1.2 kb) | 6.7 kb (14.92%) |
| minată (350 × 350) | 748.0 b (3.2%) | reducido en 3.2% (748 b) | 0 ( sin ahorros) |
| total | 7 pequeñas dimensiones por 14.1 kb. Ahorros totales 3.0%. | 7 pequeñas dimensiones por 14.1 kb. Ahorros totales 1.7%. | 7 pequeñas dimensiones. Ahorros totales 36%. Que iría con eso. Sin embargo, tiene la desventaja de optimizar solo 500 imágenes por mes, este número incluye las diferentes dimensiones que WordPress crea a partir de la imagen original. Por lo tanto, si sabe que tiene muchas dimensiones, he encontrado arados que crean una gran cantidad de dimensiones, entonces este complemento puede no hacer el trabajo. Otra desventaja es la necesidad de abrir una cuenta en tintpng.com. Es gratuito, pero el proceso en sí se interrumpe, por lo que debe tener en cuenta ese tiempo al instalar el complemento. Si está presionado por el tiempo, este puede no ser el complemento para usted. Sin embargo, si instalaría un enchufe de optimización en un sitio existente, que ya tiene muchas imágenes, podría ir con una de las otras dos. Como puede ver, tanto Smush como EWWW dan los mismos resultados en reducir el tamaño de la imagen. Entonces, ¿cómo puedes elegir entre ellos? Tengo algunas reglas básicas que uso para decidir entre los complementos. En la siguiente sección lo detallaré sobre ellos, y luego investigaremos las características adicionales de los tres complementos. Como elijo entre complementos en general cuando tengo algunos complementos que hacen más o menos lo mismo y tengo que elegir uno, estos son los parámetros que considero: Instalaciones activas: la popularidad de un complemento es una consideración importante. No se necesitan números exactos, pero miro dos: el orden de tamaño y relatividad: ¿el número está en cientos? Miles? Los cientos de miles? Si todas las descargas de los complementos están en el mismo orden de tamaño, me inclinaría a la que tenga la mayor cantidad de descargas. Las razones por las cuales el número de descargas es una consideración principal son las siguientes: Como regla general, diría que cuanto más un complemento tenga más descargas, más indica la satisfacción del cliente. Aunque no todos los que descargaron el complemento estaban necesariamente satisfechos con él, si las cifras tienen una magnitud más alta, dice algo sobre la satisfacción pública. Varias pruebas y pruebas de pruebas: más personas usan un complemento, más casos de uso y más errores encuentran estas personas y, con suerte, el autor remedió. Una nueva o una con algunas descargas aún podría ser difícil en los bordes, a diferencia de un complemento que ha estado en la naturaleza durante algún tiempo y ha sido perfeccionado y mejorado. Autor: La pregunta que desarrolló el complemento también es una pista de la calidad de la calidad. del complemento. ¿El complemento está desarrollado por Automatic? Esto generalmente sugeriría un complemento estable que puede ser confiable de que funcionará mucho. Si el desarrollador es una persona natural, ¿qué otras cosas ha hecho en WordPress? El nombre de un desarrollador siempre es un enlace a su página de perfil, donde puede ver otros complementos y/o temas que han desarrollado, ya sea que contribuya al código básico de WordPress y toda su actividad en wordpress.org. Por lo general, cuando un desarrollador con conocimiento y experiencia está involucrado en un complemento, este es un buen indicador de un complemento bien escrito y bien mantenido. Evaluación: El número de estrellas y en cuántas revisiones se basan también puede ayudarlo en su decisión si usa o no el complemento. Sin embargo, ha habido casos en los que las revisiones han demostrado ser falsas, por lo que este no puede ser su parámetro principal. Otro uso de las evaluaciones es en aquellos con estrellas bajas: ¿es bueno saber de antemano cuáles son las deficiencias del complemento? ¿Son fundamentales para su uso o son marginales? ¿Se aplica en su caso de uso? Si sabe de antemano de qué cuidar, está mejor preparado para hacer frente a las desventajas del complemento si aún decide usarlo. Hay algunas maneras de entender si este es el caso en el complemento que está pensando en usar: El número de problemas resueltos es un buen indicador de la actitud de mantenimiento del complemento. Un alto porcentaje de casos resueltos sugiere que los desarrolladores de arados están dedicados a sus clientes y que el complemento aún se mantiene. Esto se puede combinar con la última fecha de actualización y la versión probada, donde cuanto más tarde sea la fecha y la versión, más actualizado es el complemento. Sin embargo, debe verificar que los autores del complemento no sean problemas de marcado en masa como se resuelve. Otra indicación para un complemento activo son muchos problemas de asistencia y que muchos de ellos están resueltos. El software activo tiene errores: esto es algo determinado. Si un complemento tiene muy pocos problemas, podría significar que no tiene muchos usuarios. |
| autor | wpmu dev | exactamente www | tinypng |
| instalaciones activas | 1+ millones al momento de escribir este artículo | 800.000+ en el momento de escribir este artículo | 200.000+ al momento de escribir este artículo |
| evaluación | 5 estrellas basadas en 5440 revisiones | 4.5 estrellas basadas en 956 revisiones | 4.5 estrellas basadas en 138 revisiones |
| soporte | 34 de 47 problemas resueltos en Los últimos dos meses | 11 de 16 problemas resueltos en los últimos dos meses | 0 de 5 problemas resueltos en los últimos dos meses |
Como puede ver , Smush y Ewww están muy cerca en todos los parámetros, así que profundicemos en las características adicionales que ofrecen y TinyPng.smush – Carga perezosa, optimización y compresión de la descripción de las imágenes del complemento Optimizar las imágenes, un Corta la carga perezosa, cambia de tamaño, comprimir y mejorar la velocidad de la página de Google. Smush comprimirá imágenes sin una disminución visible en la calidad. Sobre el complemento
Autor: WPMU Dev
Instalaciones activas: 1+ millones al momento de escribir este artículo
Evaluación: 5 estrellas basadas en 5440 revisiones
Apoyo: 34 de 47 problemas resueltos en los últimos dos meses
El complemento de características adicionales ofrece mejoras en el proceso de optimización básica. Derribé algunos de ellos, pero esta no es una lista exhaustiva en absoluto.
Optimización de bloques Además de optimizar cualquier imagen cargada, Smush le permite optimizar todas las imágenes que se han cargado antes de la instalación. La única desventaja aquí es que está optimizado en 50 lotes, por lo que debe presionar el botón “Continuar” hasta el final de la optimización. La optimización selectiva le permite seleccionar qué tamaño de imagen se puede optimizar. Las fotos metadificadas a menudo almacenan la configuración de la cámara en el archivo, es decir, la distancia focal, la fecha, la hora y la ubicación. La eliminación de estos datos reduce el tamaño del archivo. Si le preocupa el daño a la imagen como resultado de esta eliminación, Smush agrega una nota que dice: “Estos datos se agregan al tamaño de la imagen. Aunque esta información podría ser importante para los fotógrafos, no son necesarios para la mayoría de los usuarios y son seguros para ser eliminados “. El cambio de tamaño de la imagen detecta imágenes de gran tamaño innecesariamente grandes en sus páginas para reducir su tamaño y reducir los tiempos de carga. Comenzando con WordPress 5.3, las cargas de imágenes grandes se redimensionan a un amplio ancho y altura especificados. Si necesita imágenes superiores a 2560 PX, puede reemplazar esta configuración aquí. Nota: El cambio de tamaño de la imagen ocurre automáticamente cuando carga accesorios. Para aceptar los dispositivos Retina, recomendamos usar dimensiones dos veces más grandes que el tamaño de su imagen no se redimensionará porque perderán su animación. Utilice una herramienta como HTTP:
//gifgifs.com/resizer/ para cambiar el tamaño, luego recarga. Versión Pro porque solo me refiero a complementos gratuitos, solo seré breve sobre las características de la versión Pro. Estos incluyen: la optimización del bloque de todas las imágenes de un solo clic, la optimización utilizando pérdidas, la eficiencia de las imágenes de CDN, la activación de imágenes automáticas y el soporte de WebP, la optimización de imágenes originales a tamaño completo, conversión automática de PNG en JPEG (con pérdidas) y más. Cómo usar el complemento Si desea aprender a usar el complemento, tenemos una excelente guía para la optimización de imágenes usando Smush IT: cómo optimizar las imágenes para WordPress usando Smush It
Descripción del optimizador de imágenes EWWW del complemento con EWWW Puedo optimizar todas las imágenes existentes, desde cualquier complemento, y luego dejar que EWWW IO se trate automáticamente con nuevas imágenes. Sobre el complemento
Autor: Exactamente www
Instalaciones activas: más de 800,000 al momento de escribir este artículo
Evaluación: 4.5 estrellas basadas en 956 revisiones
Apoyo: 11 de 16 problemas resueltos en los últimos dos meses
El complemento de características adicionales ofrece mejoras en el proceso de optimización básica. Derribé algunos de ellos, pero esta no es una lista exhaustiva en absoluto. JPG en PNG permite la conversión de JPG en PNG. También permite eliminar los originales. Muestra imágenes optimizadas Muestra una lista de todas las imágenes optimizadas y versiones redimensionadas. Elimine los originales Cuando WordPress reduce imágenes grandes, conserva el disco original para la generación en miniatura. EWWW le permite eliminarlos para ahorrar espacio en disco. Optimización en el bloque Además de la optimización de cualquier imagen cargada, EWWW le permite optimizar todas las imágenes que se han cargado antes de la instalación. Además, ofrece 2 funciones adicionales: la posibilidad de forzar la re-optimización: las imágenes previamente optimizadas se omitirán implícitamente, pero si verifica un cuadro de selección antes del escaneo, EWWW ejecutará el optimizador nuevamente.
El complemento EWWW también ofrece una explicación cuando hay una gran cantidad de imágenes para optimizar: ¿por qué hay tantas imágenes?
La capa EWWW completa le permite optimizar todo en su sitio, no solo en la biblioteca de medios de WordPress. Versión Pro porque solo me refiero a complementos gratuitos, solo seré breve sobre las características de la versión Pro. Estos incluyen: Auto-Webb, Lazy Load, Auto-Scale, JS/CSS Optimize, CDN y muchos más. Tinypng-Compress JPEG y PNG Images Descripción del complemento Haga que su sitio sea más rápido optimizando las imágenes JPEG y PNG. Este complemento optimiza automáticamente todas sus imágenes integrando con los populares servicios de imagen TinyJPG y TinyPng. Nota: El uso del complemento requiere la creación de una cuenta para obtener una clave API. Es gratuito y no requiere detalles de pago, sin embargo, el proceso agrega otro paso para instalar el complemento, porque no puede ejecutar el complemento sin él. Otra nota: la versión gratuita de este complemento limita el número de imágenes optimizadas a 500 por mes. Esto significa que cuando se cuentan las variaciones de imagen y se supone un promedio de 5 variaciones en la imagen, solo se pueden procesar 100 imágenes cargadas por mes. Esto está bien si comienza a usar el complemento antes de tener muchas imágenes en su biblioteca de medios, sin embargo, si lo ha instalado después de tener cientos o miles de imágenes, puede llevar muchos meses optimizarlas todas. Acerca de Pluginautor: Tinypng
Instalaciones activas: más de 200,000 al momento de escribir este artículo
Evaluación: 4.5 estrellas basadas en 138 revisiones
Soporte: 0 de 5 problemas resueltos en los últimos dos meses
El complemento de características adicionales ofrece mejoras en el proceso de optimización básica. Derribé algunos de ellos, pero esta no es una lista exhaustiva en absoluto. La optimización masiva permite la optimización del bloque de las imágenes cargadas antes de la instalación de este complemento. Debido a que el complemento se limita a 500 imágenes al mes, le muestra cuánto costarían las imágenes restantes de la optimización de su sitio, TinyPng le permite decidir cuándo deben comprimirse nuevas imágenes: en el fondo o durante la carga. La optimización selectiva le permite seleccionar qué tamaño de imagen se puede optimizar. Le permite optimizar la imagen de metadatos original elimina los metadatos de forma predeterminada, permite la fecha y la hora de la creación, la información de derechos de autor y la ubicación del GPS. Una breve revisión del complemento que presenté este complemento en las herramientas de categoría hace unos años: compresión automática sin compresión para imágenes de WordPress con complemento TinyPng
Qué complemento elegir como vi antes, el mejor optimizador es TinyPng, pero tiene 2 desventajas: solo 500 imágenes por mes y el requisito de registro. Si estos están bien para usted, debe ir con TinyPng. Sin embargo, si estas desventajas son un problema, entonces el mejor complemento, en mi opinión, es EWWW. Aunque sus valores son ligeramente más bajos que los de Smush, todavía están en la misma pasantía, y sus características adicionales son mejores que las ofrecidas por Smush:
JPG en PNG, muestra imágenes optimizadas, permite que los originales se eliminen, y su optimización en el bloque se ejecuta sin interrupciones. Sin embargo, Smush tiene la ventaja de permitirle seleccionar qué imágenes optimizar y detectar imágenes demasiado grandes y cambiarlas. Uno por uno, experimentamos los tres complementos en diferentes sitios en diferentes momentos y cada uno tenía sus méritos y características adicionales que otros no ofrecen. Manipulación básica de imágenes grandes Esta sección está destinada a los desarrolladores, ya que describe una característica básica y cómo deshabilitarla o reemplazarla. WordPress 5.3 presenta una nueva forma de administrar estas imágenes detectando imágenes grandes y generando un “tamaño máximo optimizado para la web”. Cuando se carga una nueva imagen, WordPress detectará si es una imagen “grande” al verificar si su altura o ancho está sobre una gran imagen Big_image. El valor umbral predeterminado es 2560 PX, filtrándose con el nuevo filtro Big_image_Size_threshold. Si la altura o el ancho de una imagen está sobre este umbral, se reducirá, el umbral se utiliza como un valor máximo de altura y ancho máximos. La imagen reducida se utilizará como el tamaño más grande disponible. En este caso, el archivo de imagen original se almacena en el directorio de carga, y su nombre se almacena en otra tecla Matrix de la imagen Meta-Matriz:
