Web 2.0

Reduce el tamaño de tus imágenes con TinyPNG

Publicado por Claudia en octubre 26, 2012

TinyPNG

PNG (Portable Network Graphics) es uno de los formatos de imagen más usados. Éste permite guardar gráficos sin pérdidas y con transparencia, y por lo mismo hace que tus imágenes se vean mejor (más calidad, colores más nítidos). El problema de este formato, es el peso: una imagen PNG (aunque se vea más bonita) siempre pesará más de una JPG, y si las usas en gran cantidad en tu sitio web, éste cargará muy lento.

Una excelente manera de seguir aprovechando las bondades del formato PNG pero sin el problema del peso, es TinyPNG. Éste es un compresor online gratuito que te permite reducir el peso de tus imágenes PNG mediante la reducción de colores, pero sin producir cambios visibles.

TinyPNG trabaja inteligentemente, bajándole el peso a tus imágenes en hasta un 60%, pero manteniendo la transparencia y calidad, a la vez que produce archivos compatibles con la mayoría de los navegadores.

El sitio no necesita instrucciones (bastará subir las imágenes para que empiece a trabajar), y te permite comprimir simultáneamente hasta 20 imágenes PNG, con un peso máximo de 2MB cada una (es la única limitación). Por si fuera poco, es completamente usuario amigable y no tiene publicidad.

Enlace: TinyPNG.org

Tags:
CSS

Cómo usar cualquier tipografía en WordPress con @font-face

Publicado por Claudia en octubre 26, 2012

font-face
La  regla @font-face CSS3 se convirtió en mi forma preferida para incrustar nuevas tipografías en WordPress sin plugin, sin depender de Google (Google Web Fonts) y sin depender de que el usuario tenga la fuente en su equipo.

Su utilización es realmente sencilla, mucho más fácil de lo que parece.

Lo primero, es elegir una fuente que nos guste, y que podamos usar con @font-face. En Font Squirrel, por ejemplo, podemos encontrar muchas fuentes gratuitas y que ya están en todos los formatos necesarios para que podamos usar la regla sin tener problemas de compatibilidad con ningún navegador web o dispositivo.

Una vez descargado el paquete con la fuente en todos los formatos (eot, woff, ttf, svg), lo descomprimimos. Luego iremos a wp-content/themes/mitema, y dentro de la carpeta de nuestro tema creamos otra carpeta, a la que nombraremos “fonts“. Allí pondremos todos los archivos de nuestra fuente.

Hecho esto, en nuestra hoja de estilos style.css, incluimos la regla de acuerdo al siguiente ejemplo:

1
2
3
4
5
6
7
8
@font-face {
font-family: 'Deftone';
src: url('fonts/Deftone.eot'); /* IE9 Compat Modes */
src: url('fonts/Deftone.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Deftone.woff') format('woff'), /* Modern Browsers */
url('fonts/Deftone.ttf')  format('truetype'), /* Safari, Android, iOS */
url('fonts/Deftone.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Reemplazamos Deftone por el nombre de nuestra fuente, tal y como aparece en los archivos.

Finalmente, usamos la propiedad font-family como lo haríamos habitualmente. Por ejemplo:

1
2
3
h2 {
font-family: 'Deftone', Helvetica, Arial, sans-serif;
}

Vía

Tags: , , ,