Comprimir imágenes PNG con OptiPNG

Sea cual sea vuestra motivación o necesidad, es muy posible que os hayáis encontrado con este caso: comprimir y optimizar imágenes en formato PNG de una manera rápida y sencilla.

La aplicación que os propongo para llevar a cabo esta tarea es OptiPNG. Para instalarla desde Debian y derivados (Ubuntu) bastará con abrir un terminal:

ahornero@6581-D:~$ apt-get install optipng

Bien, bastará con eso para instalarlo. Para usarlo, lo primero hago un backup de mi imagen antes de procesarla, de esta forma conservaré el original

ahornero@6581-D:~$ cp prueba.{png,bak.png}

Y ahora sí, lanzo OptiPNG:

ahornero@6581-D:~$ optipng prueba.png

Comprobad el tamaño y calidad de la imagen, veréis como por un lado ocupa menos y no tendremos pérdida alguna en la calidad.

¿Y si quiero aplicarlo a varios archivos? Fácil también: 

Leer más » 5 Comentarios

Activar compresión GZIP en servidores Apache para aumentar la velocidad de nuestros sitios web

Logo servidor web ApacheA día de hoy, prácticamente todos nuestros potenciales usuarios soportarán a través de sus navegadores páginas web servidas de forma comprimida. ¿Por qué es importante comprimir el código HTML resultante que enviamos? Para mejorar el rendimiento del sitio.

Ya hemos comentado otros métodos que tenemos a nuestro alcance para optimizar la velocidad de nuestro sitio como el uso de Minify, en concreto hablamos en el caso particular de WordPress y su plugin WP-Minify.

Hoy os traemos una optimización de la parte del servidor. La idea es enviar comprimido las partes que mejor ratio de compresión obtienen. La estructura central de una página, sea cual sea la tecnología del lado del servidor que usemos (PHP, Python, Ruby, etc) va a ser siempre código HTML. Este código al comprimirse reducirá su peso enormemente, en unas ratios que fácilmente llegan y superan al 90%. Igual ocurre con otros ficheros tipo texto: CSS y JavaScript por ejemplo.

Otro tipo de contenido que servimos desde nuestro sitio no obtiene ratios tan favorable y es hasta contraproducente comprimirlo por el coste en recursos que se tiene para luego no obtener un beneficio. Hablo de imágenes, ficheros PDF, contenido multimedia…

Por lo tanto, veamos rápidamente cómo activar la compresión usando gzip en nuestro servidor Apache y a la vez configurarlo, de forma que tengamos el rendimiento óptimo.

Leer más » 15 Comentarios

Reducir el whitespace en Google Reader. “Display Density: Compact” mediante script

Desde el pasado 1 noviembre, fecha en que Google renovó algunos de sus productos, Gmail y Google Reader entre otros, muchos de los usuarios se han quejado del nuevo aspecto y la cantidad de espacio que queda en blanco entre elementos.

En Gmail, ya vimos que la solución es sencilla, ya que bastaba con cambiar el Display Density de Conformable a Compact. Ahora en el caso de Google Reader, cuya interfaz actual detesto, no existe opción directa para eliminar esos espacios en blanco.

La solución: usar el siguiente script (Google Reader Absolutely Customizable) que he encontrado en userscript.org. Lo he probado en Google Chrome, Chromium y Firefox, aunque en este último hemos de tener instalado GreaseMonkey previamente.

Simplemente instaláis desde esa página el script y tendremos lo siguiente (hemos de refrescar para visualizar los cambios):

Vaya, que ya tenemos una interfaz muy parecida a la de hace tiempo. La que a mi personalmente, me encanta. Bien, ¿y tenemos más opciones? Por supuesto.

Nos dirigimos a Subscriptions -> Customize…

Leer más » 3 Comentarios

Combina y comprime todos los ficheros CSS y JS para optimizar WordPress con WP Minify

Cada vez que accedemos a una web, independientemente del CMS que usemos (como si no usamos ninguno), el navegador empieza la descarga del sitio en HTML y todo lo que trae consigo (principalmente imágenes, hojas de estilo y ficheros de script del lado del cliente como JavaScript) mediante protocolo HTTP.

¿Qué problema tiene HTTP? Para cada petición de este tipo, abre y cierra la conexión. ¿Eso qué conlleva? Un aumento del tiempo de transferencia.

Como se puede observar, el problema en parte es abordable ya que aunque no podemos (por ahora) reunir todas las imágenes en una sola transmisión, sí que es cierto que podemos hacer que si tenemos 4 ficheros de hojas de estilo CSS y 10 ficheros JavaScript que cargar; podemos limitarnos a enviar un sólo fichero de cada tipo al navegador. El resultado no cambia y aceleramos el proceso.

Si usamos WordPress, podemos instalar WP Minify para que automatice este proceso por nosotros y nos olvidemos, junto con otra mejora, comprime ambos ficheros resultantes lo que lleva a una mejora mayor aún de la ya comentada.

Podéis ver el efecto de usarlo en las capturas siguientes:

WP Minify antes y después

Leer más » 2 Comentarios

Comprimir y optimizar código CSS

Cada vez que accedemos a un sitio web nos descargamos, entre otras cosas, sus hojas de estilos. Aunque para trabajar con ellas lo ideal es tenerlas bien estructuradas y comentadas, al navegador le da igual interpretar una hoja de estilos bien espaciada y comentada, que su equivalente comprimido.

Es decir, si usamos el fuente CSS sobre el que trabajamos como fichero de producción estamos cometiendo un fallo: estamos transmitiendo información de forma innecesaria en muchas ocasiones (nosotros mismos lo hacemos ahora mismo en Linux Hispano). Es algo similar a lo que ocurre con jQuery y sus dos versiones: read more

Leer más » 5 Comentarios