Source: http://es.wpbeginner.org/beginners-guide/speed-wordpress-save-images-optimized-web/
Timestamp: 2018-01-18 23:34:42+00:00

Document:
Acelerar su WordPress - Cómo guardar imágenes optimizadas para la Web
WPBenginner»Blog»Guía para principiantes»Acelerar su WordPress - Cómo guardar imágenes optimizadas para la Web
ultima actualizacion en 3rd mayo, 2014 by El personal editorial
¿Está guardando imágenes equivocadas? La mayoría de los principiantes no saben cómo guardar las imágenes correctamente que pueden tener un enorme impacto en la velocidad del sitio web. En este artículo, le mostraremos cómo guardar correctamente las imágenes optimizadas para la web.
Cada experto en blogs le dirá que las imágenes ayudan a aumentar el compromiso. Sin embargo, lo que no le dicen es que no optimizar las imágenes para la web puede ralentizar su sitio. De acuerdo a Strangeloop, Un retraso de un segundo puede costar 7% de ventas, 11% menos visitas de página y 16% disminución en la satisfacción del cliente.
Al guardar imágenes, debe considerar dos cosas: Formato de archivo de imagen y compresión. Al elegir la combinación correcta, puede reducir su tamaño de imagen mediante 5x.
Para la mayoría de nosotros, los únicos dos formatos de imagen que importan son JPEG y PNG. Para simplificar, utilice JPEG para fotografías o imágenes con mucho color y utilice PNG para imágenes más sencillas o cuando necesite imágenes transparentes.
Para aquellos que no saben la diferencia, el formato de imagen PNG está descomprimido, lo que significa que es una imagen de mayor calidad. La desventaja es que el tamaño del archivo es mucho mayor. Por otro lado, JPEG es un formato de archivo comprimido que reduce ligeramente la calidad de imagen para proporcionar un tamaño de archivo significativamente menor.
Lo siguiente es la compresión, que significa usar una herramienta para guardar imágenes optimizadas para la web. La compresión puede hacer una gran diferencia.
Vea la tabla abajo que destaca las pocas combinaciones que podríamos haber usado para guardar la imagen de Strangeloop usada en este artículo.
Photoshop Optimizado JPEG Alto 33 KB
JPEG no optimizado máximo 119 KB
Herramientas de compresión de imágenes para los bloggers
Ahora que ha visto la diferencia de cada tipo de compresión hace, a continuación es cómo puede guardar correctamente las imágenes optimizadas para la web y acelerar su sitio.
Esto abrirá una pantalla de guardar. A la derecha, puede configurar diferentes formatos de imagen. Para el formato JPEG, verá diferentes opciones de calidad. Cuando seleccione sus opciones, también le mostrará el tamaño del archivo en la parte inferior derecha.
Nota: Entendemos que Photoshop es bastante caro. GIMP Es una alternativa gratuita que los usuarios pueden usar. Otros productos de Adobe, como Fireworks, pueden hacer el trabajo como bien.
TinyPNG es una aplicación web gratuita que utiliza la técnica de compresión inteligente con pérdidas para reducir el tamaño de los archivos PNG. Todo lo que tienes que hacer es ir a su sitio web, y subir sus imágenes. Ellos comprimen la imagen, y le dan el enlace de descarga.
JPEGmini utiliza una tecnología de recompresión que reduce significativamente el tamaño de las imágenes sin afectar su calidad perceptual. Puede usar su versión web de forma gratuita o comprar el programa para su computadora. También tienen una API pagada para automatizar el proceso para su servidor.
ImageOptim es una utilidad Mac que te permite comprimir imágenes sin perder calidad al encontrar los mejores parámetros de compresión y eliminar perfiles de color innecesarios.
Windows alternativa a esto es Trimage.
Como se puede ver que hay varias herramientas que puede utilizar para optimizar las imágenes para la web. Al usar la compresión de Photoshop, vimos los mejores resultados en tamaño sin embargo la calidad se vio afectada. TinyPNG fue un claro ganador para guardar cualquier tipo de PNG en la web.
Algunos sugieren que puede utilizar una combinación de TinyPNG o JPEG Mini y Image Optim para obtener resultados aún mejores. Sin embargo, ejecutar dos herramientas independientes para cargar imágenes puede aumentar su carga de trabajo un poco.
Si no estás guardando imágenes optimizadas para la web, entonces empieza a hacerlo ahora. Puede hacer una gran diferencia en la velocidad de su sitio, y sus usuarios se lo agradecerán. Asegúrese de que la calidad de la imagen podría disminuir ligeramente, pero la mayoría de los usuarios no lo notarán.
Si está buscando imágenes de calidad, consulte nuestra guía sobre Cómo encontrar imágenes libres de derechos Para sus entradas de blog.
Por último, pero ciertamente no menos importante, el uso de un CDN para servir imágenes para su sitio WordPress puede acelerar significativamente su sitio. Echa un vistazo a esta infografía para ver Qué es un CDN, Y utilice nuestra guía en Cómo configurar CDN Para su sitio. Estamos usando MaxCDN Para nuestro sitio.
Esperamos que haya encontrado este artículo útil.
¿Tienes amigos bloggers que están guardando imágenes equivocadas? Comparta este artículo con ellos, para que puedan acelerar su sitio. Te lo agradecerán.
Si tiene alguna pregunta, por favor deje un comentario a continuación. También no olvide seguirnos Twitter E Google+
Ratan Kumar dice:
Sep 14, 2017 en 11: 00 am
Esta publicación es impresionante y realmente añadir valor a mi sitio. Sin embargo, recientemente he intentado guardar imágenes de flipkart, pero se guardó en muy bajo formato de píxeles. Me pregunto si puedes ayudarme a averiguar cómo hacerlo.
Aug 18, 2017 en 9: 46 am
Ya he subido imágenes de productos 1500 a granel que estaban conectados a urls de imagen que encontré en Internet.
Ahora que tengo esas imágenes 1500 ya en mi biblioteca de medios, ¿cómo puedo volver a cambiarlas de tamaño y comprimirlas?
Además, estoy confundido acerca de si cambiar el tamaño significa cambiar el tamaño de las imágenes como se muestran en el sitio web, o cambiar el tamaño del tamaño del archivo.
Sara Lewis dice:
Jul 18, 2017 en 1: 50 pm
¿qué pasa con el optimizador de imágenes ewww de plugin?
Jul 18, 2017 en 8: 02 pm
Sí, es una buena alternativa. Sin embargo, para obtener mejores resultados, recomendamos optimizar las imágenes en el programa de edición de imágenes antes de subir a WordPress.
Jul 11, 2017 en 7: 10 pm
Voy a viajar a un lugar donde la conectividad a Internet es limitada y costosa. Por lo tanto, quiero reducir el tamaño de archivo de mis fotos antes de ir en línea para subirlas a mi blog. ¿Puede alguien por favor recomendar para mí qué resolución y dpi sería bueno usar? La aplicación que estoy planeando utilizar pide tres medidas:
resolución - desde 200 a 2048
DPI - de 72 × 72 a 300 × 300
calidad jpeg (nivel de compresión) - de 0.00 a 1.00
Diciembre 6, 2016 9 en: 40 am
En el video cambia su foto. Entiendo la pantalla en PS. Pero usted no ha explicado qué debe el ancho y la altura en píxeles para WP el límite es 2mb. ¿Cuál sería un buen estándar para los deslizadores, etc para un sitio del wp?
Sep 7, 2016 en 8: 56 am
Lo siento por ser el tonto en la esquina, pero alguien podría aclarar una cosa? He instalado el WP Smush it plugin y han estado trabajando lentamente a través de todas las fotos que he subido a mi sitio para los últimos años 2. Estoy haciendo 50 a la vez, el límite libre. Sin embargo, ahora que tengo el complemento, para futuras subidas de fotos, ¿significa que no tengo que usar ningún otro programa para cambiar el tamaño de mis fotos antes de subirlas a mi sitio WP? Si tengo una foto de 8 MB y la subo a mi sitio, el plugin lo hace todo para mí? Sólo quiero confirmar que la foto original todavía no se ha cargado y guardada en mi servidor host, SiteGround. Mi sitio es malo lento, he ejecutado toneladas de diagnósticos, y todavía no puedo entender por qué, excepto que todo apunta a mis fotos. ¡Gracias!
Tony Squibb dice:
Diciembre 30, 2016 2 en: 55 am
Hola Carrie, estoy defo no un experto en cualquier forma, pero tengo experiencia con WP Smush y sí, futuras cargas deben ser auto 'smushed'. Hay una pequeña notificación en la galería de medios al hacerlo.
Para comprobar las causas de su sitio lento usted puede utilizar GTmetrix y después abrir la página de la cascada donde demostrará las épocas de los artículos individuales de las páginas cargando. Una vez que sepas cuál es el problema, puedes abordarlo.
Espero que ayude de un 'burro' a otro
Ene 2, 2017 5 en: 46 am
Gracias por sopesar! Desafortunadamente desinstalé WP Smush y probé EWWW Image Optimizer junto con el complemento Thumbnail Regerate (basado en otra sugerencia de bloggers) y realmente desordenado las fotos en mi sitio. Soy un newb con respecto a cómo administrar mis archivos a través del FTP en mi host, así que terminé eliminando un montón de imágenes (como en cientos) y volver a cargarlos después de cambiar el tamaño manualmente en un programa de imagen. Resulta que también fue una mala idea. Ahora tengo un montón de mensajes de error cuando presento mi sitio en mi consola de Google porque cuando Google rastrea mi sitio, esos archivos se han ido o se han movido. AGH! Estoy a punto de simplemente pagar a alguien para renovar mi sitio o dejar de fumar por completo. Pero realmente aprecio que se tomó el tiempo para dejar un comentario útil.
¡Feliz año nuevo! Puede 2017 ser mejor que 2016.
Febrero 29, 2016 3 en: 22 pm
Mejores plugins de optimización de imagen para WordPress Sitio ¿Cuál es?
Nov 8, 2015 en 12: 00 pm
Yo estaba pensando ¿qué pasa si subo mis imágenes a Google Blogger y utilizarlos en mi sitio wordpress mediante la opción "Insertar desde la URL"?
Cualquier sugerencia si esto es una buena idea o no?
Aug 3, 2015 en 11: 15 am
Volví aquí como estoy buscando plugins que cargar una imagen grande como una imagen optimizada directamente a WordPress. Estoy seguro de que he visto esto en algún lugar aquí en WP Beginner pero no puedo encontrarlo.
Aug 3, 2015 en 7: 06 pm
Por favor, eche un vistazo a Optimización de imágenes con WP Smush pros, contras y alternativas.
Mayo 17, 2015 6 en: 13 pm
Photoshop es definitivamente el mejor, para los servicios en línea, kraken.io y resizeimage.net son buenas alternativas para tinypng.
Bronceadora dice:
Mayo 4, 2015 9 en: 35 am
Es xnview una buena opción para comprimir imágenes?
Mayo 6, 2015 1 en: 35 am
Larry Aldrich dice:
Mar 20, 2015 10 en: 36 am
Alguien mencionó RIOT en un comentario anterior. Es mi aplicación go-to para minimizar las imágenes ANTES de subirlas. La tasa de compresión está cerca de fenomenal. Lo siento usuarios MAC, pero sólo está disponible para Windows.
Ene 29, 2015 3 en: 37 am
Hola, WPBeginner,
Yo estaría muy interesado en la versión de Windows de Trimage que aparentemente has visto.
En la página de inicio de Trimage sólo ves un enlace pidiendo ayuda con el puerto de Windows ...
Mar 16, 2014 1 en: 24 pm
Me he acostumbrado a usar Fireworks aunque tengo CS3
Aug 3, 2015 en 11: 12 am
Yo también. Utilizo CSS4 y todavía voy a Fireworks para la optimización de la imagen.
Marianne P. dice:
Mar 7, 2014 8 en: 55 am
Acabo de revisar el sitio de Trimage y no vi la versión de Windows - solo varias versiones de * nix. Por favor, señádeme en la dirección correcta. Muchas gracias - gran artículo!
Mar 5, 2014 1 en: 22 am
Me preguntaba si había alguna forma de reducir el tamaño de las imágenes ya subidas a un sitio? He cambiado la forma en que los subo, así que en el futuro todas mis imágenes serán más pequeñas. Pero pensé que quizá sería útil cambiar el tamaño de los ya cargados.
Julie Anglesey dice:
Nov 24, 2014 en 8: 50 am
También me gustaría saber cómo reducir el tamaño de las imágenes ya subidas.
Aug 3, 2015 en 11: 13 am
Es (o fue) Smush-It.
Febrero 3, 2014 2 en: 29 am
Buscar en la web demasiado para encontrar una buena solución para optimizar las imágenes; Pero la mayoría de ellos la mayoría de ellos no deja ver las herramientas mencionadas en este post trabajo o no
Febrero 2, 2014 8 en: 42 am
El artículo define PNG como un formato de archivo sin comprimir, pero por lo que sé, los PNG estándar utilizan compresión sin pérdidas.
Y creo que sería útil mencionar por qué se puede elegir un formato sobre otro para imágenes de tono continuo (por ejemplo, una foto) frente a imágenes de paleta limitada (por ejemplo, un logotipo).
Rob Dewing dice:
Ene 29, 2014 8 en: 37 pm
¿Por qué no mencionar Photoshop Elements, la versión de uso reducido de Photoshop? Hace 90 + el% de las cosas que phat completo Photoshop hará, incluyendo la compresión de la imagen de la "excepto para la tela", todo por menos de $ 100.
web oficial dice:
Ene 29, 2014 6 en: 31 pm
Entonces, ¿qué puedo hacer, tener mis imágenes en amazon s3? No sé cómo auto optimizar ... .Tengo suficiente ATM y no sé qué herramienta para ejecutar a través de ahora y en el futuro ...
Ene 29, 2014 12 en: 14 pm
¿Recomendarías usar Flickr para subir tus imágenes y luego copiar el código HTML a tu sitio de wordpress? ¿Qué sugerirías para los blogs de viajes que contienen muchas fotos? Gracias.
Ene 29, 2014 8 en: 51 pm
Puede agregar fotos de flickr en WordPress simplemente pegando la URL de la foto en una publicación. Normalmente no lo recomendaríamos, porque la gente estará viendo y encontrando sus fotos en Flickr y nunca podrá tener la oportunidad de visitar su sitio web. Sin embargo, si usted siente que construir una comunidad alrededor de sus fotos en flickr es más útil para usted, entonces siga adelante.
Ene 29, 2014 6 en: 30 am
Usted podría agregar kraken.io a su lista. Hace lo mismo que Jpegmini, pero también funciona con imágenes PNG.
Ene 27, 2014 4 en: 23 pm
Estoy usando RIOT, que es gratis, programa muy rápido y exelent.
Debra Torres dice:
Ene 27, 2014 12 en: 38 pm
He estado usando la herramienta Smush de Yahoo en: http://www.smushit.com/ysmush.it/
¿Recomendaría este? ¿O son los otros que mencionó mejor?
Ene 27, 2014 2 en: 06 pm
Smushit es una gran herramienta también. Pero trate de otras herramientas que mencionamos y compare los resultados.
James DiGioia dice:
Febrero 25, 2014 11 en: 07 am
Hay WordPress plugin para Smush.it:
Esto hace que sea más fácil comprimir imágenes usando Smush.it sin tener que prepararlas de antemano.
Youri van Dijk dice:
Mar 26, 2014 8 en: 00 am
Yo estaba a punto de mencionar que el complemento también. Por lo general, guardar mis imágenes optimizadas, pero para los clientes que no están muy familiarizados con estas herramientas de instalación del complemento es un gran beneficio.
John Mauldin dice:
Ene 27, 2014 10 en: 16 am
Su artículo es muy oportuno. Apenas encontró la necesidad de reducir centenares de fotos para una sala de exposición de la cocina y del baño. Bought JPEGmini ya que sólo podía hacer 20 fotos al día en la versión gratuita, pero $ 19.99 no es nada para la capacidad de arrastrar y soltar carpetas enteras en el programa y lo tienen zip en segundos / minutos. ¡Muchísimas gracias por la ayuda!
Ene 27, 2014 9 en: 53 am
¿No hay una manera automatizada de hacer esto en wordpress? ¿Qué tal 'WP Smush.it'?
Ene 27, 2014 10 en: 13 am
Puede automatizar el proceso con algunas herramientas que mencionamos o utilizando este complemento:
Pero ¿por qué crear más carga de servidor cuando esto se puede resolver mediante la educación del usuario.
Ene 27, 2014 9 en: 52 am
Gran artículo, sin embargo, estaba bajo la impresión de que cualquier imagen con texto en ellos debe guardarse como archivos PNG para la mejor nitidez ....?
Ene 27, 2014 10 en: 05 am
PNG sin duda tendrá una mayor calidad, pero la mayoría de la gente no será capaz de decir la diferencia a menos que ponerlos lado a lado. Si puede acelerar su sitio con una diferencia no visible, ¿por qué no
Ene 27, 2014 9 en: 46 am
Gran artículo, y un tema importante muchos administradores de WordPress perder.
Ene 27, 2014 9 en: 35 am
Lightroom tiene una serie de presets para exportar a Facebook y Web - ¿los comprimen los archivos de fotos lo suficiente o debo seguir recurriendo a Photoshop?
Ene 27, 2014 10 en: 07 am
No estoy seguro sobre lightroom y cómo exporta la imagen. Puede realizar una prueba de lado a lado.
Febrero 2, 2014 8 en: 30 am
Lightroom hará casi el mismo trabajo que Photoshop al exportar fotos a archivos JPEG.
Bill Wells dice:
Mayo 20, 2015 7 en: 53 pm
Lightroom es el punto de encuentro de los fotógrafos; Que le permite optimizar sus fotos en lotes y luego exportará el lote a su tamaño de píxel preferido y la compresión en una serie de formatos, incluyendo jpeg. También agrega automáticamente su mensaje de derechos de autor al lote si lo desea.
No sé acerca de procesamiento por lotes en Photoshop, pero lo uso para la manipulación de imágenes principales sólo.
Supongo que si usted está haciendo gráficos o manipulación pesada, utilice Photoshop, pero si está usando un montón de fotos y sólo quieren que se vean mejor, utilice Lightroom.
Scott Wyden Kivowitz dice:
Ene 27, 2014 9 en: 22 am
Soy un gran defensor de muchos de los productos que mencionó. Ahora consigo agregar este acoplamiento a mis recursos para siempre que los clientes me hagan esta pregunta exacta. Gracias Syed.
Eres muy bienvenido Scott.
Dave Kulas dice:
Ene 27, 2014 9 en: 21 am
Si usted está tomando las imágenes usted mismo para su sitio web .... Configure su cámara para tomar una foto en 800 x 600 y con menos resolución. Algunas cámaras tienen una configuración de resolución Buena - Mejor - Mejor ... utilice el ajuste "BUENO". . Debería obtener una imagen que se cargue rápidamente.
Si ya tiene algunas imágenes ... eche un vistazo a GRATIS ... http://www.getpaint.net ….. Lo he estado usando por años. Tomo las fotos ENORMES que me dieron los clientes ... luego RE-SIZE a 800 x 600. Luego utilizo la herramienta de compresión integrada para comprimir la imagen.
Steven Alig dice:
Ene 29, 2014 7 en: 38 pm
No recomendaría tomar fotos de baja resolución.
Usted deseará tomar sus fotos originales en resoluciones más altas apenas en caso de que usted desee utilizarlas para algo más. Además, si toma fotos con una resolución más alta, tendrá la posibilidad de recortar en un área si lo desea.
Si las fotos tienen una resolución más baja, no tendrá esa opción y se quedará con lo que ha tomado como original.
Mark Pridham dice:
Febrero 5, 2014 9 en: 32 am
Tengo que estar de acuerdo con Steven en esto. Recomiendo altamente tomar imágenes de alta resolución en su cámara. A continuación, tiene un archivo grande con el que puede trabajar, es muy fácil reducir el tamaño del archivo de una imagen de alta resolución, pero imposible ir en el otro sentido. Mediante la toma de imágenes de alta resolución, también tiene la opción de utilizarlos para el trabajo de impresión si surge la necesidad, en general, termino con la imagen grande, sin procesar, una imagen de impresión recortada y retocada y una imagen más pequeña para la web trabajo.
michael Maye dice:
Mayo 4, 2015 12 en: 12 pm
Estoy de acuerdo también en tomar fotos de alta resolución completa. A continuación, redimensione hacia abajo y comprimir para subir a su sitio web. Usted siempre tendrá la foto original de alta resolución para otros usos.
Ene 27, 2014 9 en: 20 am
Normalmente utilizo Fireworks y luego Tiny PNG si es necesario.
Ene 27, 2014 10 en: 08 am
Yup que es una buena combinación
Geoffrey Gordon dice:
Gran artículo Syed.
Sin embargo, realmente creo que los fuegos artificiales es el rey cuando se trata de optimizar las imágenes para la web y su mucho más barato que Photoshop.
Ene 27, 2014 8 en: 58 am
Gracias Geoffrey. Sí sé que Photoshop es caro, que es la razón por la que he mencionado otras herramientas gratuitas también. GIMP y Fireworks tienen esta funcionalidad.
Ene 27, 2014 8 en: 42 am
Así que voy a seguir las opciones que se ven en la imagen en la sección de este artículo de Photoshop y todo es bueno?
Yup, si lo hace, entonces usted tendrá probablemente uno de los mejores resultados de rendimiento. Sin embargo, dependiendo de una imagen, algunos podrían no parecer tan bueno, por lo que en esos casos probamos el muy alto. Hacerlo caso por caso, pero la mayoría de las imágenes estaría bien.
Ene 27, 2014 8 en: 15 am
Usted discute usar Photoshop, que es manera más allá de la mayoría de las necesidades o del precio de los bloggers - porqué usted no refiere a Lightroom, que también tiene una opción excelente de la exportación de la imagen, incluyendo una opción para restringir el tamaño maximo del archivo, Un conjunto de ppp.
Una vez que alguien conoce las pantallas de comp funciona en 72dpi, el resto se vuelve mucho más fácil, y se convierte en sorprendente en cuanto a lo fácil que es tener una plantilla web entre las opciones de exportación sin necesidad de conocimiento real en profundidad de lo que hay que hacer.
Ene 27, 2014 10 en: 11 am
Sí, entendemos que Photoshop es caro, por lo que mencionamos varias otras opciones gratuitas. Acaba de actualizar el artículo ahora para agregar un enlace a GIMP justo debajo de photoshop.
En cuanto a Lightroom, no lo mencioné porque no lo usamos. La misma razón por la que Fireworks se quedó fuera.

References: resolución 

resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución