Optimización de imágenes para su sitio de WordPress (en 4 pasos simples)

Actualizado el 18 de junio de 2015
En el mundo digital, ser rápido significa tener éxito. Un sitio web rápido significa más asuntos, más acciones y más ventas. Sin embargo, esta necesidad de velocidad puede entrar en conflicto con su deseo de imágenes en vivo. Después de todo, ¿qué es un sitio sin imágenes? Las imágenes dan carácter a las páginas web y atraen a los usuarios. Y si tiene un sitio de fotos, un medio de imágenes ricas es absolutamente necesario. Sin embargo, las imágenes pueden pesar un sitio. Por eso tienes que optimizarlos. En esta publicación, abordaré por qué la optimización de imágenes es esencial y proporcionaré cuatro pasos simples que puede seguir para que sus archivos de imagen sean más pequeños, sin una pérdida visible de calidad, para que su sitio vea tiempos de carga más rápidos y un problema – Experiencia de usuario gratuita.
¿Por qué debería optimizar sus imágenes que reducen el tamaño de la imagen acelerará su sitio? cuyos beneficios pueden ser mayores de lo que sabes. Las imágenes se apilan en unos segundos durante el tiempo requerido para cargar la página. Y cuando se trata de los elementos web que hacen que su sitio sea lento, las imágenes a menudo son culpables. Google dice que “las imágenes a menudo representan la mayoría de los bytes descargados en una página web y también a menudo ocupan una cantidad significativa de espacio visual”. Si su sitio se enfoca fuertemente en la foto, entonces tiene aún más fotos que su webmaster habitual. Esto solo agrava el problema.
Las imágenes ralentizan su sitio. ¿Y qué? Allí se cuestiona la investigación del sitio. La conclusión es que los tiempos de carga lentos afectarán su negocio. Google usa la velocidad del sitio como factor cuando causa la clasificación de búsqueda. No es un componente básico de las clasificaciones, pero todavía importa. Este infográfico KissMetics explica brevemente por qué la velocidad del sitio es importante. Más importante aún, debe comprender que por cada segundo donde se retrasa su página, puede ver una disminución del 7% en las conversiones. Tomando este número como un indicativo, si gana, digamos, $ 3,000 por mes en su sitio, pierda $ 210 a cada calendario: $ 2,520 en pérdidas durante el año.

Pero tal vez no gana dinero desde su sitio. Tal vez solo quieras generar tráfico y establecer una audiencia. Incluso en este caso, la velocidad importa. Por ejemplo, un sitio más lento significa menos distribuciones sociales. También significa menos visitas continuas. De hecho, si un sitio está bloqueado durante más de tres segundos, el 40% de las personas simplemente lo abandonarán. Google ha realizado un experimento interesante para evaluar el impacto de la velocidad del sitio. Después de que algunos usuarios dijeron que preferirían 30 resultados de búsqueda, la compañía lo probó en algunas páginas. Lo que descubrieron fue que agregar resultados adicionales agregó medio segundo a los tiempos de carga, y el tráfico reducido en un 20%.
Entonces, ¿cómo se evita, como fotógrafo, las trampas potenciales de un sitio web basadas en imágenes? Así es como puede optimizar sus imágenes para un mejor rendimiento: Paso 1: Corte sus imágenes
Este primer paso es bastante simple: corta tus imágenes. ¿Por qué? Dos razones: atracción estética.

El tamaño más pequeño del archivo.
El primero es bastante obvio. Hay todo tipo de formas de cortar las imágenes que mejoran el atractivo visual. Como profesional creativo, probablemente ya cortes. Si no lo es, es hora de comenzar a pensar en cómo puede usar el corte para eliminar los detalles no deseados, reorientar el enfoque de la fotografía, etc.
Pero el atractivo estético es solo una ventaja. El alto impacto consiste en la capacidad de cortar para reducir el tamaño del archivo. Si corta secciones enteras de una imagen, ya sea que eso significa cortar unos pocos píxeles de la izquierda o eliminar áreas más grandes de la periferia, reduzca la cantidad de datos que se transferirán a los visitantes. Paso 2: Elija el tipo de archivo correcto Una vez que corte una imagen, el primer paso de optimizar la imagen es elegir un tipo de archivo. Más formatos de archivo se usan comúnmente para imágenes web y cada uno es bueno para cosas diferentes.
No se trata de ser un solo tipo de archivo que los lleva a todos (este no es el maestro de los anillos). En cambio, los tipos de archivos son como las herramientas en una caja de herramientas; Tienes que elegir el adecuado para el trabajo. Aquí están los archivos principales de los archivos que debe considerar: JPEG
Un ejemplo de imagen sin comprimir (UP) en comparación con la compresión de “pérdidas” JPEG (abajo). Este formato de archivo se ha creado especialmente para comprimir las imágenes de manera efectiva, especialmente los datos fotográficos. Es la mejor opción para fotografía u otras imágenes realistas con detalles significativos. Los JPEG tienen compresión de “pérdidas”, lo que significa que, aunque optimizan bien, lo hacen en detrimento de perder información. Para su foto ordinaria, un JPEG bien comprimido hará un buen trabajo, con una pequeña pérdida de claridad de imagen.gif
A pesar del hecho de que es el tipo de archivo de imagen más antiguo utilizado hoy en día, los GIF siguen siendo útiles. Acepta solo 256 colores, por lo que nunca querrá usarlos para ilustración, pintura o fotografía. Sin embargo, los GIF pueden tener fondos transparentes, lo cual es ingenioso. Luego está la característica definitoria de GIFS: Animation. Un tamaño de archivo pequeño es fácil de obtener aquí, así que considere guardar su imagen como un GIF si es simple o implica animación. Png

Un ejemplo de clara calidad y propiedades de transparencia PNG. Al igual que GIFS, los archivos PNG aceptan fondos transparentes. Pero, a diferencia de los GIF, son completamente “sin pérdida” y pueden incorporar una amplia gama de colores. No querrá guardar una foto como PNG, pero si tiene una imagen con transiciones distintas y grandes áreas de color sólido (viene a la mente el texto y los gráficos), entonces el formato PNG funcionará mejor.

SVG

Un ejemplo de propiedades de escala SVG. El acrónimo de este tipo de archivo significa gráficos vectoriales escalables. Un SVG utiliza el lenguaje de marcado para generar imágenes que pueden ser escalas a cualquier tamaño. El formato SVG es ideal para gráficos bidimensionales y aumentará en gran medida la velocidad del sitio. Sin embargo, este tipo de archivo todavía está en una etapa relativamente incipiente y el soporte del navegador es algo irregular. Paso 3: Elija un buen programa de optimización de ImagingInypng es mi herramienta de compresión de imagen favorita. Tomar decisiones con respecto al corte y el tipo de archivo puede volverse agotador. Afortunadamente, una de las mejores formas de reducir el tamaño del archivo implica pocas decisiones de su parte.

Los programas de optimización de imágenes hacen mucho trabajo duro. Aquí hay algunos geniales:
Tinypng. Esta aplicación basada en la web reduce selectivamente el número de colores en el archivo PNG, lo que reduce el tamaño del archivo con una diferencia casi invisible en la calidad de imagen.

Jpegmini. En la base de este software hay una tecnología de patentes que está tratando de reducir el tamaño de la imagen tanto como sea posible sin afectar la calidad. Puede obtener un intento gratuito o pagar por usarlo continuamente.

REVUELTA. La herramienta de optimización de imágenes radicales, que puede descargar de forma gratuita, usa una variedad de técnicas para reducir el tamaño del archivo de imagen. El programa es cuidado, porque le brinda una vista lado a lado de la imagen original y la imagen recién optimizada.
Imageoptin.Esta es una aplicación Mac gratuita que también utiliza una variedad de técnicas para reducir el tamaño de la imagen, mientras mantiene la calidad tanto como sea posible. Desde aplicaciones independientes, WordPress ofrece una serie de complementos que pueden permitirle lograr los mismos objetivos bastante fácilmente.Aquí están nuestros primeros tres:
Optimizador de imagen EWWW
Tinypng para WordPress
Wp smush.it
Paso 4: crear miniaturas