Diseño web responsive: Imágenes

Más opciones de optimización

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Descubriremos algunas opciones adicionales que tenemos disponibles actualmente en Internet para poder optimizar aún más nuestras imágenes y, de esta manera, reducir el peso de nuestros ficheros lo máximo posible.
03:51

Transcripción

Una vez guardadas nuestras imágenes a partir de los programas de diseño Con los que estemos trabajando, podemos pensar que ya está todo hecho, Que las tenemos perfectamente optimizadas, y lo que quiero hacer ver En este vídeo es que tenemos una serie de herramientas externas A estos programas, estas suits de diseño con las que estamos habituados a trabajar, Que nos van a permitir optimizar incluso aún más la mayoría de las Imágenes que hayamos exportado. Vamos a ver algunas de ellas simplemente para que veamos que Realmente funcionan, por ejemplo Tenemos tinyJPG.com, tinyPNG.com, sólo hace falta echarle un vistazo A la web. Son el mismo servicio sólo que en este caso tenemos la opción de incluir Archivos en JPG o en PNG. Para que veais lo bien que funciona, yo tengo aquí una imagen en formato JPG, La voy a subir, voy a esperar a que realice todos los procesos. Lo que están haciendo estos servicios, es usar una serie de algoritmos Para ver si se puede comprimir aún más la información dentro estos Ficheros de imagen, aquí tenemos el resultado, por ejemplo, pues del mega y medio que ocupaba la imagen original, pues la ha dejado en 704 kb. Realmente no hay mucho truco, o sea, no es que haga magia ni nada, simplemente estos algoritmos, bueno, pues, intentan ¨sacrificar¨ la información menos relevante dentro de la imagen para poder reducir enormemente el archivo. Generalmente en JPG lo que se nota es una ligera pérdida de calidad y como si se viese un poquito desenfocada la imagen, es ahí donde nosotros tenemos que decidir si lo que queremos es mantener, pues, un peso de archivo deducido o una súper calidad a costa de que, bueno, pues, el archivo tarde más en cargarse. De la misma manera que tenemos un tinyJPG, bueno, pues, tenemos un tinyPNG. Para exactamente lo mismo, simplemente habría que seleccionar el archivo, esperaríamos que se pudiese optimizar y ya está. De hecho lo tenemos también en formato de plug-in para Photoshop, con lo que incluso ya no tendríamos que dedicarnos a acceder al navegador, meter la imagen, sino que podemos hacerlo directamente desde el programa o inlcuso usar plug-ins Como Wordpress. De hecho, a nivel de plug-ins de Wordpress y servicios, tengo abierto Kraken, que es un servicio también de optimización de imagen, algo que yo he usado y que funcionaba bastante bien, hace exactamente lo mismo, se trata de optimizar imágenes para intentar reducir al máximo el peso del archivo. Como programas, por así decirlo, ¨instalables¨ de manera totalmente independiente, tenemos ImageOptim para Mac, que es uno que yo tengo instalado siempre en el Mac y me viene súper bien, es una ventana en la que Arrastras todos los archivos que quieras utilizar y te los optimiza automáticamente. Para otros entornos, bueno, pues, podríamos ver versiones alternativas, seguro que por aquí tenemos más opciones. Tenemos PNGquant, en caso de que quisiésemos hacer lo mismo pero en un entorno Windows. Por último, dejar la mención a esta URL, imageoptimization.info porque tiene un montón de información que ya hemos visto anteriormente pero con un mayor grado de detalle, Con más artículos todavía, con los que poder ampliar información, habla sobre la carga lazy load, cómo podemos comprimir las imágenes. Habla también de formatos no del todo estandarizados todavía como puede ser el formato de WebP. En definitiva, una web que deberíamos guardar en nuestros favoritos si queremos ampliar información sobre el uso de imágenes responsive, sobre todo para exportarlas y optimizarlas correctamente, y para incluirlas de forma adecuada dentro de nuestros proyectos.

Diseño web responsive: Imágenes

Aprende los conceptos básicos sobre la creación y el uso de imágenes en un entorno digital responsive, donde lo que importa es el usuario y los contenidos que le interesan.

1:54 horas (24 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:25/10/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.