La guía definitiva para la gestión de imágenes de WordPress

  1. 1. Actualmente leyendo: La guía definitiva para la gestión de imágenes de WordPress
  2. 2. 3 consejos de gestión de imágenes menos conocidos en WordPress
  3. 3. Errores de SEO en la imagen de WordPress y cómo solucionarlos

El impacto visual es una de las características más importantes cuando se trata de un plan de marketing de contenido impactante. Bienvenido a una nueva serie de publicaciones: la guía definitiva para la administración de imágenes en WordPress.


Está diseñado para brindarle las herramientas necesarias para administrar sus activos de imagen en WordPress, directamente desde optimizaciones técnicas, SEO, integración de CDN y administración de bibliotecas. En esta guía multiparte, solo recomendaremos los métodos, tutoriales, complementos y temas que hemos probado o que recomendamos expertos de la industria..

También evitaremos sugerir ciegamente complementos que tienen un alto uso en el repositorio de WordPress. Más bien, recomendaremos los que tocan el acorde perfecto entre la propuesta de valor y la optimización del rendimiento..

Quizás se pregunte cómo haríamos para hacer eso. Más de 24,000 descargas de nuestro tema de WordPress Total – Responsive multipropósito en ThemeForest podrían no ser un gran indicador.

Bueno, hemos buscado los mejores blogs de las empresas de alojamiento de WordPress líderes en la industria (como WPEngine y Pagely) y aprendí qué ellos aprendido cuando se publican miles de millones de páginas vistas en miles de clientes de alto perfil. Hemos comprimido toda esta información para usted en pequeños párrafos y viñetas para su éxito en línea. Ahora comencemos, ¿deberíamos??

Consejos técnicos y de optimización del rendimiento para imágenes de WordPress

Hay bastantes opciones de optimización de imágenes disponibles en WordPress que hacen no poner carga innecesaria en el servidor web. Veremos algunos de los consejos de optimización de imágenes más comunes que todos debería seguir, junto con algunos otros que vienen útiles en ocasiones especiales.

JPG o PNG? Usando el formato de imagen correcto

El primer paso en la optimización de imágenes es un buen comienzo. Dicen que un trabajo bien comenzado está a medio hacer. Ese es exactamente el caso cuando se trata de la optimización de imágenes en WordPress. Todo comienza con la elección del formato de imagen correcto. JPG y PNG son los dos formatos de imagen más comunes utilizados en línea en el marketing de contenidos..

El truco es entender qué formato elegir para cada tipo de imagen. Elegir el incorrecto provoca un aumento monumental en el tamaño de la imagen. Estas son las reglas.

Cuándo usar el formato PNG?

Para imágenes planas, como vectores, ilustraciones, fuentes, logotipos, pancartas, formas, pancartas, etc., todo lo que se cree en formato vectorial, como EPS o Adobe Illustrator (.AI), utilice un PNG. Obtendrá una imagen optimizada con una pérdida de calidad casi nula. Si usa un JPG en este caso, no comprometerá el tamaño, pero podría quedarse sin calidad. De hecho, a resoluciones más altas, el PNG sería más ligero sin pérdida de calidad. El JPG sufriría.

Toma su ejemplo. Crearemos una imagen plana a 5000 px y la guardaremos como JPG y PNG.

Imagen de muestra utilizada para la prueba

Imagen plana
JPG233 KB
PNG42 KB

En pocas palabras, la imagen JPG fue 455% más alta que PNG para la misma resolución.

Cuando usar el formato JPG?

Para todo lo demás, use un JPG. Cualquier otra cosa que no sea una imagen plana o vectorial, use JPG. Fotos de personas, lugares, cosas, etc. – use JPG. Casi todas las fotos de archivo de esta categoría usan JPG. Si usa PNG en lugar de un JPG, se encontrará con algunos problemas serios de rendimiento.

Debe tener mucho cuidado en este caso. Si usa un JPG en lugar de un PNG, habrá poco o ningún daño. Sin embargo, si usa un PNG sangriento en el caso de un JPG, crea mucho espacio para el daño. Echale un vistazo a éste ejemplo.

Preparar: He descargado esta imagen de Shutterstock, que pesa alrededor 10.3MB en una resolución de 6149 × 4562 – esencialmente una foto de archivo de 28MP. A menos que estemos preparando algo así como un folleto listo para imprimir, no utilizaremos la resolución completa de la foto en nuestros blogs. Digamos que tenemos un tamaño de imagen máximo fijo de nuestro blog de 1600px.

Experimentar: Redimensionaremos la imagen de origen a 1600px y crearemos cuatro versiones – dos para formato PNG y dos para JPG. Para cada formato (JPG / PNG), utilizaremos la (a) configuración de compresión recomendada y (b) la configuración de compresión máxima.

Imagen de muestra para el experimento JEPG

Resultados: Aquí están los resultados en un buen cuadro para que lo sigas:

Imagen original (KB)

10870
Resolución objetivo1600px
FormatoConfiguracionesTamaño (KB)% De reducción
JPGProgresivo, Calidad = 8523198%
No progresivo, calidad = 8523998%
PNGCompresión = 0557549%
Compresión = 6185283%
Compresión = 9175084%

A primera vista, uno podría pensar que el 84% de compresión de PNG es suficientemente bueno frente al 98% alcanzado en JPG. Eso no es del todo cierto. Si observa de cerca los tamaños de imagen, verá que el PNG pesa un poco más de 1.7MB mientras que el JPG es 0.22MB. Lo que significa que el PNG es 8 veces más pesado que el JPG versión de la misma imagen con la misma resolución. En otras palabras, para la misma imagen y resolución, la versión JPG es un 700% más ligera que la PNG!

Para la misma imagen y resolución, la versión JPG es un 700% más ligera que la PNG!

Como regla general, use PNG para imágenes planas y JPG para todo lo demás..

Lista de verificación para cargar fotos de archivo en blogs

Hay toneladas de blogs donde los editores cargan directamente la versión de resolución completa de la imagen en sus publicaciones de blog. Aquí hay algunos consejos para subir fotos de archivo a blogs. Utilizo un software gratuito llamado IrfanView que tiene muchas características increíbles. Ilustraré cada uno para ti.

1. Cambia el tamaño de tu imagen

En primer lugar, debe decidir una resolución máxima para todas sus imágenes en su sitio de WordPress. Cualquier imagen por encima de esa dimensión se redimensionará, a menos que, por supuesto, sea más pequeña.

IrfanView tiene un Conversión por lotes función (presione B después de iniciar la aplicación) que puede aplicar una lista de funciones a un montón de imágenes de una sola vez. Para nuestros propósitos, las funciones incluyen cambiar el tamaño, recortar, agregar una marca de agua, etc..

2. Eliminar datos EXIF

Las fotos en las que se hace clic en una cámara normal tienen muchas metadatos – que no es más que pequeños (pero útiles) fragmentos de información sobre la imagen. Los ejemplos de dicha información incluyen las coordenadas GPS del lugar donde se hizo clic en la imagen, la configuración ISO, el modelo de cámara, etc..

Información EXIF ​​de una foto aleatoria en mi iPhone

A menos que hagamos un blog fotográfico, generalmente no queremos esa información en la imagen de una publicación de blog. Cuando guarda o convierte imágenes por lotes en IrfanView, los datos EXIF ​​generalmente se eliminan. Esto ayuda a preservar su privacidad, especialmente su ubicación física. La diferencia de tamaño para la mayoría de las fotos es de aproximadamente 200-300 KB por imagen.

3. Guardar como JPG progresivo

IrfanView guardó los JEPG como progresivos por defecto

Una imagen JPG progresiva carga la imagen capa por capa, acelerando así el tiempo de carga. Las redes de entrega de contenido como KeyCDN han comenzado convertir automáticamente JPG a JPG progresivos para acelerar la entrega de imágenes y optimizar el almacenamiento.

4. Establezca el DPI en 72

DPI o puntos por pulgada es una medida de la calidad de la imagen. Se utiliza un valor de DPI alto para el material de impresión. Para la web, un valor de 72 es perfecto.

Bien, resumiendo lo anterior, a continuación están mis configuraciones. Ejecuto esta función una vez que he compilado todas las imágenes para mi publicación de blog, antes de subir las imágenes a WordPress.

Configuración de conversión por lotes en IrfanView para un blog típico de WordPress

5. Optimiza tus imágenes

No importa si ha usado JPG o PNG, debe optimizar su imagen. Hay muchas herramientas en línea realmente impresionantes que lo ayudan a optimizar sus imágenes y guardar un lote del espacio.

Estoy hablando de servicios como TinyPNG o TinyJPG que simplemente optimiza tus imágenes PNG / JPG con algunos algoritmos avanzados.

Imágenes optimizadas en TinyPNG

Para ser honesto, no sé cómo funcionan los algoritmos, pero lo hacen y siempre he podido obtener una reducción del 50-70%, sin importar la mejor manera de guardarlos..

También puedes comprar el versión Pro del servicio como un complemento de Photoshop por $ 50 USD. Ambas versiones de Windows y Mac están disponibles. Para mis propósitos, la versión en línea (junto con el Guardar en dropbox característica) funciona mejor.

Complementos de optimización de imagen en WordPress

Hasta ahora, hemos aprendido los pasos para obtener empezado Derecha. ¿Qué sucede si te has topado con esta publicación ahora y ya has subido cientos de imágenes? Bueno, aquí hay algunos complementos para ayudarte con eso:

EWWW Cloud Image Optimizer

Este complemento es una bifurcación del original y muy popular EWWW Image Optimizer enchufar. Acumulando más de 500,000 descargas, estos complementos de optimización de imágenes le permiten optimizar las imágenes a medida que se cargan en WordPress.

Lo que lo distingue de la competencia es su capacidad para optimizar las imágenes existentes en su base de datos, lo que resulta en un gran aumento de rendimiento. También ahorra costos significativos de ancho de banda ya que la mayoría de su tráfico proviene de artículos antiguos. También puede optar opcionalmente por habilitar la compresión de imagen con pérdida (que apenas es visible a simple vista) pero puede ahorrar mucho espacio y ancho de banda. En términos de tecnología de optimización, puede usar TinyPNG o la API de TinyJPG para optimizar imágenes nuevas y existentes..

Pero aquí está el problema. Muchos hosts (incluido WPEngine) no permiten el complemento EWWW Image Optimization ya que pone mucha carga adicional en el servidor. Si de alguna manera logra pasar por alto las restricciones del servidor, puede correr el riesgo de que su cuenta se suspenda debido a violaciones de la política.

Aquí es donde el EWWW Cloud Optimizer Plugin viene a jugar. Descarga todos los cálculos necesarios para optimizar las imágenes a la nube y simplemente reemplaza las imágenes no optimizadas por las optimizadas. Dado que prácticamente no se utiliza la potencia de la CPU para la compresión, no hay carga adicional en el servidor. Esto es válido para todas las conversiones de imágenes nuevas y existentes en su sitio de WordPress.

Planes y precios: Como era de esperar, el complemento no es gratuito ya que el desarrollador debe pagar las facturas de computación en la nube. sin embargo, el fijación de precios es extremadamente razonable y cuesta $ 9 USD por 3000 optimizaciones de imagen para una suscripción prepaga.

El complemento EWWW Cloud Optimizer está diseñado maravillosamente. El escáner de medios le indica cuántas imágenes necesita optimizar antes de realizar una compra. Según las imágenes de su servidor, puede comprar un plan prepago relevante.

Complemento TinyPNG WordPress

Este es otro gran complemento de optimización de imágenes que se integra directamente con el servicio TinyPNG / JPG. Se carga automáticamente imágenes nuevas y existentes en la biblioteca multimedia de WordPress. Este complemento ofrece un plan gratuito de 100 optimizaciones de imagen por mes.

Freddy había compilado una lista de complementos de optimización de imágenes hace un tiempo. Lean si desean obtener más información sobre el tema..

Conclusión

Esto nos lleva al final de la primera publicación de esta serie. En el siguiente artículo, aprenda cómo algunos consejos y trucos de optimización de imágenes menos conocidos, como evitar el hotlinking, recuperar imágenes de servidores remotos y similares. ¿Tienes algunos consejos debajo de empezar bien ¿categoría? Háganos saber en los comentarios a continuación.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map