Noticia, Lista de recursos para profesionales web - 02/06/2015 18:00:57
"Como es usual cada mes, hoy os traemos una completa selección de herramientas frescas para diseñadores y desarrolladores que incluye todo tipo de recursos totalmente gratuitos. Explora entre GUIs, sets de iconos, plantillas para negocios, fuentes y muchos más:70 Mockups Modernos De Dispositivos En Diferentes Ángulos
Diseños De Tarjetas De Crédito En Formato PSD
Iconos Planos Y Coloridos Hechos En Sketch Para Múltiples Propósitos
People Icons: Un Set De Iconos Planos Para Diferentes Profesiones
Spastic: Fuente Gratuita Hecha a Mano Alzada
Bobbie Regular: Fuente Manscrita Gratuita En Formato TTF
Bukhari: Fuente Creada a Mano Alzada Con Estilo Vintage
Un Increíble Libro Para Aprender HTML5 Y CSS3
Mockups De Revistas En Alta Resolución En Formato PSD
Cientos De Plantillas Editables Con Propósitos Empresariales
Mockup De Un MacBook Retina De 12 Pulgadas
Mockup De Un Samsung Galaxy Note 4 En PSD
Fotografías Del Espacio Para Usar En Cualquier Tipo De Proyecto
Web Design Stack: Información Variada Sobre El Mundo Del Desarrollo Y El Diseño
Visualizador De Atajos Para Photoshop, Illustrator E InDesign
Generador De Facturas Editable En Línea
T3: Framework De Desarrollo Web Minimalista En JavaScript
Electron: Plataforma De Desarrollo Para Aplicaciones De Escritorio
Hoja De Trucos De SEO Para Desarrolladores Web
Una Aplicacion Web Para Construir Un Blog En Github
Plugin De JQuery Para Crear Notificaciones Estilizadas
RegExr: Herramienta En HTML Y JavaScript Para Manejar Expresiones Regulares
Interdimensional: Librería En JavaScript Para Navegar En Dispositivos Móviles Mediante El Giroscopio
Ili Estates: Kit De Interfaz De Usuario Para Diseño Web
Creative Mind: Kit De Diseño Web Minimalista
Materia: Interfaz Para Diseño De Sitios De Comercio Electrónico
Kit De Interfaz De Usuario En Estilo Material
Una Interfaz De Usuario Para Noticias Hecha En Sketch
Distintos Elementos Para Interfaz De Usuario En Estilo Material
Dragula: Librería En JavaScript Para Crear Interacciones De Agarrar Y Soltar
Diferentes Ventanas Modales Para Notificaciones Y Alertas
Swiped.js: Una Librería De JavaScript Para Arrastrar Elementos De Listas
Un Interesante Efecto De JavaScript Para Navegar En Dispositivos Móviles
Animate Plus: Una Librería De JavaScript Para Animar Propiedades De CSS Y SVG
Librería De JavaScript Para Dar Formato HTML a Publicaciones Académicas
Plugin De JQuery Para Crear Rejillas Web Responsivas
Menu Contextual Para Aplicaciones O Sitios Web
JsPDF: Generador Multiusos De Archivos PDF
Lightgl.js: Libreria En JavaScrípt Para Crear Prototipos De Aplicaciones WebGL
Cuadro De Diálogo Plano Con Botones Movedizos En CSS Y JavaScript
Barra Lateral Elástica En SVG Con Estilo Material
Tarjeta De Productos De Estilo Plano Y Boton De Detalles
Interfaz De Navegación Plana Con Menu Desplegable
Una Genial Animación De Carga Atómica En CSS
Un Set De Gráficos De Precarga En CSS
Texto escrito en wwwhatsnew.com
Sigue las noticias por twitter.com/wwwhatsnew, Facebook.com/wwwhatsnew o Google Plus.
Ver artículo...
" Fuente Artículo
Interesante, Cómo funcionan los formatos de imagen y en qué los mejora WebP - 17/05/2013 10:46:34
" Todavía nos quedan algunas cosas en el tintero del Google I/O. Una de ellas es el "nuevo" códec de imagen para la Web: WebP (Web , Picture, no se han roto la cabeza con el nombre). Digo "nuevo" porque ya existía de bastante antes, pero no está de más darle un repaso.Lo primero es entender por qué Google está llevando a cabo este esfuerzo. Tenemos tres códecs o formatos mayoritarios: JPEG, PNG y GIF, que datan del 1991, 1996 y 1987 respectivamente. Han cambiado muchas cosas desde entonces, pero aun así estos códecs siguen sirviendo… más o menos.
JPEG es el más usado no sólo en Internet sino también fuera de él. La mayor ventaja que tiene es su capacidad de compresión, que puede llegar a valores tan altos como 100:1 (una imagen de 100KB almacenada en un archivo de 1KB). Pero claro, esa compresión tan potente tiene sus desventajas: pérdida de calidad. Veremos más adelante por qué ocurre esto, pero estoy seguro que a todos nos suenan los artefactos, la distorsión de los JPG.
Después tenemos al formato GIF. Realmente el formato es bastante malo: aunque la compresión no tiene pérdidas, tenemos un problema, y es que sólo podemos representar 256 colores. Para que os hagáis una idea, una pantalla normal representa millones de colores. El resultado es que GIF no es un formato de buena calidad, y de hecho sólo se usa para logos simples y para animaciones (es el único que las permite).
Por último, está PNG. Es un formato sin pérdida y que admite transparencia. El problema es que no alcanza una compresión tan alta como JPEG, así que sólo se usa con imágenes pequeñas y con pocos colores.
WebP unifica las ventajas de PNG, GIF y JPEG en un único formato.
Al final, tenemos tres formatos distintos, y cada uno destaca en un campo en el que los demás no tienen nada que hacer: JPEG para archivos pequeños, PNG para alta calidad y transparencia, y GIF para animaciones.
WebP pretende unificar todas esas ventajas en un único archivo. Tiene compresión con pérdidas para reducir el tamaño de archivo, sin pérdidas para mantener la calidad (y aun así resultan archivos más pequeños que en PNG), soporta transparencia y animaciones. El formato definitivo, vamos. ¿Cómo lo logran en Google?
¿Cómo funcionan los códecs de imagen?
Para entender un poco el porqué de la necesidad de WebP, tenemos que ver cómo funcionan los códecs de imagen. Aviso que haré varias simplificaciones para que se entienda mejor.
Antes de nada, recordemos que una imagen no es más que una serie de puntos o píxeles, donde cada posición tiene las cantidades de color rojo, verde y azul que componen el color del píxel.
La compresión de imágenes con pérdida de calidad se basa en dos principios (los más importantes, hay muchos más). El principal es que el ojo humano no es capaz de distinguir muchos cambios ligeros de color. Y el segundo, que es más corto guardar una serie de puntos como una función. Por ejemplo, ¿qué es más corto de guardar, cincuenta puntos de una recta o su función (y = ax + b por si alguno no se acuerda)?
No podemos detectar los pequeños cambios de color, así que, ¿para qué guardarlos?
Parece que lo que he dicho no tiene relación, pero en realidad sí. Decíamos que una imagen no es más que una serie de puntos, así que podemos representar esos puntos en una gráfica, y después construir una función que se aproxime a esos puntos.
Esa función nos sale con muchos picos muy pequeños. Espera, ¿no habíamos dicho que esos cambios tan pequeños no los detecta el ojo? Pues lo tenemos fácil: deshagámonos de esos picos. "Aplanemos" la función. Así será más corta, y la guardaremos más fácilmente. Podéis ver un esquema de lo que ocurre en la siguiente imagen.
En JPEG, esto (más o menos) es lo que se llama el proceso de cuantización. La cuestión es, ¿qué pasa si nos pasamos al "aplanar" la función? Que perdemos detalle. Los colores se quedan, literalmente, más planos: perdemos contraste. Cada píxel se parece mucho más al resto, y por eso aparecen los artefactos. Exagerando mucho, esto es lo pasa en una imagen real si nos pasamos de compresión:
A la izquierda, imagen JPEG sin comprimir, a la derecha comprimida demasiado.
Este método es bastante eficiente en cuanto al ratio de compresión de la imagen. Lo malo es lo que comentábamos: es irreversible. Perdemos calidad y no la podemos recuperar.
Por suerte, hay otros algoritmos para reducir el tamaño de imagen sin perder la calidad, que se basan en cambiar la forma de expresar la imagen para que se pueda comprimir mejor.
¿Cómo se comprime mejor una imagen (o cualquier archivo)? Ahorrándonos los datos repetidos. Por ejemplo, en lugar de guardar 20 ceros seguidos, simplemente guardamos dos números: 20 (el número de repeticiones) y 0 (el elemento que se repite). El objetivo de los algoritmos con compresión es encontrar otras formas de expresar la imagen de tal forma que haya el mayor número de datos repetidos posible (el nombre técnico es reducir la entropía de información del archivo).
La técnica principal que usan los códecs PNG y GIF para esto es la siguiente. Cogemos un píxel. Sacamos una predicción de cómo será este píxel en función de los de su alrededor. Por ejemplo, si un píxel está rodeado de píxeles rojos, será rojo también; o si está entre uno rojo y otro amarillo, probablemente será naranja.
El truco está en guardar no el valor del píxel, ni la predicción, sino cuánto se desvía la predicción del píxel real. Como en general no hay muchos cambios bruscos en una imagen, habrá muchas diferencias que sean 0 o pequeñas, así que tendremos bastantes datos repetidos. Además, este proceso es reversible, así que no perdemos calidad.
Como hay varios métodos para predecir el valor de un píxel, el codificador escoge el que mejor predice para cada "bloque" de la imagen (esto es, el que saca las predicciones más exactas y el que deja números más pequeños).
¿En qué mejora WebP lo ya existente?
Y después de esta "introducción", podemos ver qué hace WebP para ser mejor que sus antecesores. Recordemos que reduce en un 25% aproximadamente el peso de los archivos con respecto a PNG y JPEG manteniendo la calidad (esto también depende del codificador que se use).
La principal mejora de WebP es dar más opciones para comprimir la imagen sin pérdida.
Frente a PNG, WebP lo mejora por tener un mayor abanico de filtros sin pérdida. El filtro de predicción tiene más modos (cada modo valora de forma distinta los píxeles adyacentes al que queremos calcular su valor teórico), lo que permite un mejor ajuste y por lo tanto se pueden comprimir mejor los datos. Además, hay otros dos filtros adicionales: transformación de color e indexación de colores.
Estos filtros se pueden aplicar al mismo tiempo sobre una imagen, de forma que el formato WebP ofrece una compresión máxima mayor usando técnicas que PNG no permite.
Por otro lado, frente a JPEG, WebP destaca por la posibilidad de añadir los filtros sin pérdida que acabo de comentar. Es cierto que JPEG tiene métodos de compresión sin pérdida, pero no son tan efectivos como los de WebP (y son menos usados).
Otra ventaja de WebP es que incluye métodos de compresión mejorados. Al igual que PNG, usa DEFLATE, pero además añade una caché de los colores más usados. En este sentido es el más avanzado de los cuatro formatos.
¿Y todo eso, para qué?
Bien, una vez que hemos visto la teoría, veamos la práctica. Exploremos las imágenes que Google tiene de muestra para comparar qué ofrece, a nivel de calidad, WebP.
Frente a PNG (galería completa), el cambio es impresionante. La calidad de WebP es del 90%, y la imagen en PNG es unas 4-5 veces más grande que la de WebP. Las diferencias en calidad apenas se notan (yo ya me he dejado los ojos y no he visto prácticamente nada).
Aumento del 200%. Originales: WebP, PNG.
Con JPEG (galería completa), las cosas están un poco más dispares. De lejos no hay mucha diferencia, pero si pasamos a ampliar vemos que, mientras que en WebP se notan más los bloques de imagen, en JPEG los artefactos en los bordes son mucho más destacados.
Ampliación 400%. Izquierda: WebP, 29 KB, original. Derecha: JPEG, 44KB, original.
Por ejemplo, en imágenes del cielo, si nos fijamos, WebP se queda un poco atrás al darle un patrón más cuadriculado. Sin embargo, la ausencia de artefactos en los bordes de los objetos le da muchos puntos.
Ampliación 300%. Izquierda: WebP, 172 KB, original. Derecha: JPEG, 251 KB, original.
Hay que tener en cuenta que al redimensionar las imágenes se pueden haber introducido nuevas distorsiones (o correciones), así que lo más recomendable para apreciar totalmente las diferencias es ir a las galerías que enlazo con Opera o Chrome y ampliar las imágenes.
Conclusiones
Teniendo en cuenta que WebP está orientado a la web más que nada, que las pérdidas en calidad no son demasiado grandes y que la reducción de tamaño es considerable, parece que es la mejor alternativa. Más aún cuando es la que más características tiene de los tres formatos (transparencia, imagen con y sin pérdidas, animaciones).
El problema es el de siempre: la compatibilidad. Hasta que todos los navegadores lo soporten nativamente WebP no es una alternativa razonable al resto de formatos. Y aún en ese momento su adopción será lenta: el resto de programas de imagen (desde Paint hasta Photoshop) tendrán que soportarlo para que los usuarios empiecen a poder usarlo.
Además, esto no es como SPDY: este cambio no es transparente a los usuarios. No es algo entre desarrolladores web y de navegadores. Entran en juego muchos más actores, incluidos los usuarios normales, a los que habrá que cambiarles el chip de "WebP para imágenes en Internet". Y además habrá que contar con las aplicaciones que manejen algo de imágenes (no sólo las especializadas sino también aplicaciones móviles estilo Instagram o cualquiera que permita guardar/subir imágenes) para que cuenten con WebP como el formato por defecto.
Lo que Google está intentando hacer es muy loable, pero le va a costar muchos años plantear WebP como el estándar de imágenes por Internet.
Más información | Especificación de WebP
Ver artículo...
" Fuente Artículo
Consulte Información de Gana lo que quieras Microsoft finalmente lanza IE Developer Channel y Unheap: Repositorio de plugins jQuery
Consulte Información de Gana Emprendedor Web Prototipos de Apps Funcionales sin nada de código con Marvel! y 21 aplicaciones para desarrolladores web
Consulte Información de Tecnologia Emprendedora Firefox da por perdido a Adobe Flash y lanza una nueva tecnología para prescindir de él y Adobe: treinta años con una compañía que ha sabido dejar su marca
Consulte la Fuente de este Artículo
No hay comentarios:
Publicar un comentario