Cómo optimizar imágenes

Cómo optimizar imágenes. La optimización de imágenes radica en diversas técnicas que se pueden emplear para dar una mejor visibilidad a una página web. Bien sea para mejorar un blob personal, una página web o mejorar tu tienda online es muy posible que tu espacio contenga diversas fotografías; de tal forma que quizás éstas sean de muy alta resolución considerando los detalles que se requieren de las mismas.

Sin embargo, una de las causas de algunos problemas que se puedan tener para el posicionamiento web es que éstas sean muy pesadas. Aunque no lo creas, 400 KB podría ser un inconveniente para los buscadores, pues esto se asocia directamente con la velocidad de carga de la web y por tal motivo con la experiencia de los usuarios.

El peso de carga, en tal sentido, llega a ser un inconveniente para el posicionamiento SEO (mientras más lenta sea tu página, el posicionarse con los buscadores empeora); de tal forma que puede ser posible que tengas un impacto muy directamente de abandonos de la misma, especialmente entre usuarios que en la actualidad manejan más el móvil que un ordenador.

¿Qué es optimizar una imagen?

Como hemos dicho con anterioridad, las imágenes grandes pueden llegar a ralentizar tu página web, por tal motivo causará una experiencia menor entre los usuarios. En tal sentido que la optimización de imágenes se trata precisamente de disminuir el tamaño de las mismas; esto a partir de un plugin o script con el cuál te ayudará a acelerar la carga de tu página web.

Los dos métodos más comunes para ello son la comprensión con o sin pérdida que veremos más adelante.

Las ventajas de optimizar imágenes

En general, las imágenes en la web constituyen un promedio del 21% del peso total de cada página web. Por tal motivo que si hablamos, por ejemplo, de un sitio en WordPress debería iniciar precisamente por las imágenes. Es, sin duda, aún más importante que los script e incluso las mismas fuentes.

Aunque parezca increíble, la optimización de imágenes es de las cosas más sencillas de realizar, aunque una a las que les prestan menor atención. De tal forma que presentaremos acá algunos de los beneficios:

• Mejora el SEO. Podrás colocar a tu sitio en mejores resultados ante el motor de búsqueda. Debido a que los archivos grandes y pesados relentizan el sitio, todo motor de búsqueda odia esto.
• La velocidad de carga mejorará increíblemente al optimizar tus imágenes. Si tu página tarda demasiado en cargarse, es muy posible que el usuario se canse de ello y simplemente descarte la posibilidad de visitarle.
• Las copias de seguridad serán más rápido de crear.
• La optimización de imágenes requiere mucho menos espacio de almacenamiento en el servidor.
• Los tamaños pequeños de nuestros archivos emplean mucho menos ancho de banda, lo que será apreciado por las redes y los navegadores.

¿De qué manera optimizar imágenes para la web?

Lo ideal para la optimización de imágenes para la web está en un equilibrio entre el tamaño de tu archivo y una calidad aceptable. Esto quiere decir que sin dejar de generarle una buena calidad, reducir el peso y el tamaño de la misma. Para esto existen diversas formas en las que, muchas de ellas, se trata de comprimirlas antes de cargarlas a WordPress.

Generalmente se puede realizar simplemente con Adobe Photoshop o Affinity Photo. Sin embargo, mucho de esto puede también realizarse a través de plugins diversos. De tal forma que una de las principales cosas a tomar en consideración se trata tanto del formato del archivo como del tipo de comprensión a emplear.

Lo ideal estará en combinar de forma adecuada tanto el formato del archivo como el tipo de comprensión de la misma. De tal forma que quedará en gran medida de ir probando con cada imagen hasta lograr el más adecuado, dependiendo del tamaño original de la misma.

Formato del archivo

Antes que nada debemos escoger el formato que usaremos en nuestra imagen, para ello será necesario saber qué nos ofrece cada uno de ellos para, de esta manera, saber qué decisión es más conveniente para nosotros.

• JPEG: Este formato es el más común, usa una optimización con pérdida y sin pérdida. Nos da un equilibrio ideal tomando en consideración que se logra ajustar el nivel de calidad.
• PNG: Con este formato podemos obtener una mayor calidad ya que en sí, lo produce. Pero de igual forma el tamaño de su archivo es mayor. Éste fue creado justamente como un formato sin pérdida, pese a éste podría ser un formato con pérdida.
• GIF: En el caso de las GIF solo emplean 256 colores. Para imágenes animadas, sin duda, es la mejor opción. En este caso se emplea únicamente la comprensión sin pérdida.

Calidad y tamaño

Una de las cosas que debemos tomar en consideración es intentar, de una u otra forma, mantener un equilibrio entre la calidad y el tamaño de la misma. Si por un lado empleamos una tasa de comprensión muy baja, dejaríamos el tamaño de la misma con una máxima calidad, lo que generaría un peso considerable para la optimización SEO.

Pero si por el contrario empleamos una tasa de comprensión muy alta, generaríamos una calidad muy baja de la imagen, de tal forma que el tamaño de la misma empeoraría. Si una imagen originaria de 2 MB le realizamos una comprensión baja, generaríamos una de 590 KB en formato JPG, pensaríamos que para la web está bien, pero ya antes explicamos de qué se trata todo esto.

Si a esta misma imagen, por el contrario, le generamos una comprensión alta, la calidad sería en extremo, baja, dañando la calidad de la imagen, quedando en 68 KB. Esto nos la deformaría quitándole una lectura adecuada a la misma. Lo ideal sería generar una comprensión media que nos dejaría una gran calidad en la imagen y un peso idóneo de 151 KB en formato JPG.

Optimizar las imágenes con pérdida y sin ella

Antes hemos mencionado dos tipos de comprensión que quizás hasta ahora no tengas del todo claro, una de ellas es con pérdida, y otra sin pérdida.

Con pérdida

En este caso tenemos un filtro que se encarga de eliminar algunos de los datos. De tal forma que degradarás la imagen con ello, por tal motivo deberás tener cuidado con este tipo de comprensión. Podrás reducir de una gran manera la imagen. De esta forma podrías utilizar herramientas tales como Affinity Photo y Adobe Photoshop u otros para, de esta manera, ajustar la configuración de la calidad de la misma.

Sin pérdida

En este caso, el filtro de este en ves eliminar algunos datos, los comprime. Aunque esto no reduzca la calidad de las imágenes, sí será necesario que éstas sean descomprimidas antes de su renderización. De igual forma podrás realizar esto con herramientas tales como Photoshop, FileOptimizer e incluso ImageOptim.

Es recomendable realizar diversas pruebas e ir experimentando cómo funciona cada una de ellas. Muchas herramientas traen de forma predeterminada la opción de guardar para la web, de ser así es mejor aprovecharlas.

Algunos programas y herramientas para optimizar las imágenes

Para la optimización de imágenes existe una larga lista de herramientas y programas que puedes emplear para dicho fin, tanto Premium como gratuitas e incluso online con la que podrás llevar a cabo esto. Algunas de estas tantas te ofrecen las diversas herramientas para que puedas realizar tus propias optimizaciones, mientras que otras realizas el trabajo por ti.

Una de las más idóneas o preferidas, a título personal, es Adobe Photoshop, pero existen tales como Affinity Photo que se ajusta perfectamente a tales fines, de hecho posee características similares a la primera. Algunas de ellas las mencionaremos acá, otras comentaremos de una manera un tanto más profunda:

• Paint.Net
• Gimp
• Adobe Photoshop
• JPEG Mini
• GIFsicle
• JPEGtran
• Pngquant
• Trimage
• FileOptimizer
• ImageResize.org

Kraken

El interfaz que éste ofrece funciona perfectamente para comprimir y optimizar imágenes. Pero algunas cosas extras ofrece al pagar una cuenta Pro. Sin embargo, también lo puedes emplear de manera gratuita para herramientas de optimización de imágenes y comprensión de las mismas en tanto archivos JPEG y PNG. De tal manera que podrás escoger entre ‘Lossy’ y ‘Lossless’. Tu imagen, de tal manera, estará disponible para ser descargada durante 12 horas.

Compressor.io

Muy similar a Kraken, con Compressor.io puedes comprimir imágenes sin perder calidad, además de que puedes realizar esto de una manera muy sencilla desde la web. Puedes hacer uso de cuatro formatos diferentes: PNG, JPEG, GIF y SVG. Y al igual que el anterior, cuenta con dos tipos de comprensión: Lossless y Lossy. Por un lado la primera genera la fidelidad de la imagen pero esto da como resultado un archivo de mayor tamaño, por otro lado la segunda nos dará una imagen cuya reducción será des hasta 90% del tamaño pero con una calidad que disminuirá muchísimo más.

Image Optimizer

Image Optimizer posee una gran ventaja, funciona de manera online con el que podrás no solo comprimir, sino redimensionar y optimizar las imágenes. Únicamente deberás escoger tu archivo y al subirlo, escoger el tamaño y entre seis diferentes tipos de comprensión los cuales variarán desde el más pequeño pero en una muy buena calidad.

De igual forma podrás obtenerla como una aplicación para Windows, además nativa de la misma, la cual podrás descargar sin costo alguno para tu uso personal.

TinyJPEG y TinyPNG

En este caso nos encontramos con dos herramientas; éstas son especializadas en la comprensión avanzada de imágenes tanto en formato JPEG como en PNG. Mientras que TinyJPEG emplea un tipo de comprensión inteligente para la reducción del tamaño de tu imagen ‘lossy’. Disminuye, por un lado, la cantidad de colores, y de esta forma tener muchos menos bytes al momento de almacenar tu data. Sin perder absolutamente nada de calidad de tu imagen a simple vista, la reduce hasta un 70%.

Por otro lado, TinyPNG hace exactamente lo mismo pero con el formato PNG, de tal manera que, además, conserva la transparencia alfa completamente de tu archivo. Además de esto, logra conservar un plugin para el WordPress así como otro para Photoshop.

ImagenOptim

En el caso de ImagenOptim resulta atractivo pero para usuarios de Mac OS X, la cual funciona de una manera bastante sencilla pero con un gran poder para la optimización de imágenes. Una de las cosas es precisamente remover metadata que sea basura innecesaria y de esta forma estará ahorrando espacio.

Otra de las cosas es que permite la comprensión de varias imágenes a la vez y además, sin costo alguno. Podrás hacer uso de él en muchos idiomas, soporta tanto JPEG como PNG y también es open source.