Categorias > Software > La guía definitiva para optimizar imágenes La guía definitiva para optimizar imágenes | 5 comentarios | software Si acostumbramos a escribir en un blog o crear sitios web, obviamente, utilizaremos imágenes para decorar o complementar nuestros textos de una forma gráfica y atractiva. Las imágenes son un recurso necesario e imprescindible para conseguir mantener la atención del público y evitar aburrirlos. Sin embargo, no siempre las utilizamos correctamente, bien por desconocimiento, por descuido ( y falta de tiempo) o por no tener la base de conocimiento necesaria para utilizarlas correctamente. En este artículo veremos una guía para optimizar imágenes en nuestro sitio web, de una forma efectiva, con un buen equilibrio entre calidad de imagen y tamaño de imagen . Imágenes pesadas = sitio web lento Una página web contiene varias imágenes. Desde los pequeños iconos que El odern de las ltaers no aterla el porudtco El odern de las ltaers no aterla el porudtco Añadir tag Añadir tag Artículos Publicidad Act. Profesional Contacto Suscribirme Lunes, 21 Enero 2013 8015 8015 RSS RSS · 5988 5988 Twitter Twitter · 13532 13532 Facebook Facebook ¿Interesado en anunciarte? Robots.txt : Todo lo que deberia saber El fichero robots.txt es un archivo de texto que dicta unas recomendaciones para que todos los crawlers y robots de buscadores cumplan. Veamos como crearlos y configurarlos. Los 25 mejores comentarios de Youtube ¿Te paras a mirar los comentarios más puntuados de Youtube? Aquí una traducción de los 25 mejores comentarios que he encontrado. Cine PC: ¿Y si las películas fueran informáticas? ¿Qué nombre tendrían las películas existentes que ya conoces si tuviesen nombre informático? Dosugus, cojin geek de MSDOS Almohadón de la mano de Art. Lebedev Studio, que hará las delicias de aquellos fanáticos del viejo sistema operativo de Microsoft, MSDOS.
Transcript
Categorias > Software > La guía definitiva para optimizar imágenes
La guía definitiva para optimizarimágenes
| 5 comentarios | software
Si acostumbramos a escribir en un blog o crear sitios web, obviamente,utilizaremos imágenes para decorar o complementar nuestros textos de unaforma gráfica y atractiva. Las imágenes son un recurso necesario eimprescindible para conseguir mantener la atención del público y evitaraburrirlos.
Sin embargo, no siempre las utilizamos correctamente, bien por desconocimiento,por descuido (y falta de tiempo) o por no tener la base de conocimiento necesariapara utilizarlas correctamente.
En este artículo veremos una guía para optimizar imágenes en nuestro sitioweb, de una forma efectiva, con un buen equilibrio entre calidad de imagen ytamaño de imagen.
Imágenes pesadas = sitio web lentoUna página web contiene varias imágenes. Desde los pequeños iconos que
El odern de las ltaers no aterla el porudtco El odern de las ltaers no aterla el porudtco Añadir tagAñadir tag
Robots.txt : Todo lo quedeberia saberEl fichero robots.txt es un archivo de texto que dictaunas recomendaciones para que todos los crawlersy robots de buscadores cumplan. Veamos comocrearlos y configurarlos.
Los 25 mejores comentarios de
Youtube¿Te paras a mirar los comentarios más puntuados de
Youtube? Aquí una traducción de los 25 mejores
comentarios que he encontrado.
Cine PC: ¿Y si las películasfueran informáticas?¿Qué nombre tendrían las películas existentes queya conoces si tuviesen nombre informático?
Dosugus, cojin geek de MSDOSAlmohadón de la mano de Art. Lebedev St
incorpora hasta las grandes imágenes que ilustran las entradas o artículos. Para elusuario, cargar cada imagen es un pequeño retardo en la carga del sitio web.
Esto es algo bastante importante. Una web lenta es sinónimo de pérdida deusuarios (abandonan o buscan otras webs, cansados por la lentitud de carga),pero además ahora sabemos que Google le da importancia a la velocidad decarga de una web, por lo que será algo que influye a la hora de posicionarse enGoogle.
La suma de todas las imágenes utilizadas en un sitio puede ser considerable.
Cada página de nuestra web, contiene varias imágenes en diferentes formatos(y muchas veces, poco apropiados) que habrá que descargar al acceder a ella. Espor esta razón, que lo ideal sería disminuir lo máximo posible el tamaño decada una de ellas, para que ocupen menos y se descarguen antes, incluso enusuarios con conexiones lentas.
En el artículo Optimizar el rendimiento web, hago un repaso más detallado ytécnico de los aspectos que pueden retrasar la carga de una web: número depeticiones, tipo de servidores, sistemas de caché, descargas paralelas, sistemalazy load, etc...
La decisión: ¿JPG, PNG o GIF?La primera pregunta que nos podemos plantear es: ¿Qué formato de imagendebo utilizar? Existen multitud de formatos de imagen, algunos nuevos, otrosmás desconocidos (como por ejemplo: WEBP, JPEG2000, JPEGXR...). Lo másimportante es conocer la diferencia entre los formatos con pérdidas y losformatos sin pérdidas. Puedes saber más en la siguiente guía de formatos deimágenes.
Nosotros nos basaremos en los tres más utilizados: JPG, PNG y GIF. A grandesrasgos, el método más sencillo para saber que formato utilizar, es el siguiente:
Si los artículos de Emezeta blog son de tuinterés, puedes escoger una categoría delsiguiente SCUMM™ menú de temáticas delblog:
JuegosPasatiemposPublicidadInternet y la RedMundo webCuriosidadesHardwareHumorTV y espectáculosEmezetaCitas y frasesHistoriasDiseoInformáticaMúsicaProgramaciónSoftwareMóviles
SugerenciasSi tienes alguna idea o quieres que trate algúntema concreto en el blog, puedes enviarme unmensaje a través del formulario de contacto.
Acerca de...Si quieres saber más sobremi o sobre Emezeta, hazclic en ¿Quién es Manz?. Silo deseas, también puedesver mi CV o mi actividadprofesional.
Para enviarme un mensajeprivado, puedes ir directamente a la seccióncontactar conmigo
OtrosEmezeta RankFoto-RevistaEmezeta CamisetasEmezeta IPEmezeta en Google+Manz en Google+Manz en Emezeta
Guía: Todo lo que deberías saber sobreLINEEs mejor saver si el otro esta en linea
Formato JPG: Fotografías. Muchas texturas. Detalles complejos. No nosimporta perder parte de calidad de la imagen original. Ejemplo: Una bonita fotografía de Mordor y el ojo de Sauron.
Formato PNG: Capturas de pantalla. Dibujos. Bocetos. Imágenes en lasque hay amplias zonas «lisas» con el mismo color.Ejemplo: Ilustración del artículo shooters de los 90, con dibujos y zonas decolor uniforme.
Formato GIF: Similar a PNG, pero actualmente utilizado sólo paraimágenes animadas.Ejemplo: Una imagen animada de Larry Leisure Suit leyendo el periódico.
¿JPG o PNG? Artefactos de compresiónEs posible que llegado a este punto, no estés seguro si utilizar JPG o PNG para tusimágenes. No hay problema. Vamos a aclararlo.
Ambos formatos son comprimidos internamente para conseguir ocupar menosespacio en disco:
Imágenes JPG: Con un valor entre 1 y 100 (más alto, menor compresión ymayor tamaño)Imágenes PNG: Con un valor entre 0 y 9 (más alto, mayor compresión ymenor tamaño)
Antes de continuar, seguro que conoces un desagradable efecto producido en losarchivos JPEG (con alto grado de compresión): unas feas marcas alrededor deciertos objetos en imágenes:
Una imagen PNG y una imagen JPG del mismo tamaño (19KB).
Estas marcas se denominan artefactos de compresión, y se producen debido a quelas imágenes JPG son un formato de imagen con pérdidas: para conseguirque ocupen menos, reducimos la calidad de la imagen (perdiendo nitidez).
En contraposición, las imágenes PNG son un formato de imagen sin pérdidas:para conseguir que ocupen menos, se utilizan algoritmos de compresión«reversibles», que no reducen tanto el tamaño, pero consiguen no introducirartefactos.
Obviamente, cada formato es útil para cada caso concreto. Simplificando, lanorma general suele ser; utilizar imágenes JPG para fotografías y utilizarimágenes PNG para imágenes que contengan zonas de color uniformes.
Optimizar imágenes con RIOTPara optimizar las imágenes de forma sencilla y cómoda, existe un programagratuito ideal: RIOT: Radical Image Optimization Tool, que incluso puede utilizarsea modo de plugin si utilizas algún programa como IrfanView, GIMP o XnView.
Este programa permite optimizar imágenes mediante un panel dondepodemos ver la diferencia de tamaño de la imagen original y optimizada, la calidadde la imagen, un selector del tipo de formato gráfico que queremos utilizar, asícomo algunas opciones comunes: rotar, invertir, redimensionar ycomprimir imagen a un tamaño en KB concreto.
Para cada formato distinto (JPG, GIF o PNG) tendremos un panel diferente en laparte baja, donde elegir el tipo de compresión, así como ajustes de imagen (brillo,contraste, etc...).
RIOT también incorpora un plugin RAWHDR (colocar en carpeta plugins)para permitir abrir archivos HDR como EXR o HDR, o archivos RAW decámaras digitales como NEF, RAW, RAF, CRW, CR2, entre muchos otros.
Algoritmos de redimensionadoYa en la guía de productividad con Irfan View (punto 5) hable de los algoritmosde redimensionado. De la misma forma, RIOT permite ampliar o reducir lasimágenes utilizando un algoritmo concreto de la siguiente lista:
Si esta forma se te queda grande, prueba con Cómo reducir una imagen.
Cada uno de ellos proporciona un resultado distinto, lo que lo hace ideal paradiferentes situaciones. Por ejemplo, el algoritmo Box es ideal para ampliaciones deimágenes de 8 bits (conservando bordes definidos), mientras que Lanczos3 esideal para ampliar fotografías (interpolación de imágenes).
Optimizando PNG (obsesivamente)Uno de los trucos para optimizar imágenes PNG es la de «contabilizar loscolores» que utiliza una imagen. Como hacerlo a mano sería muy tedioso y unatarea bastante repetitiva, podemos hacer uso de IrfanView, accediendo a laopción Image / Information, o pulsando la tecla I.
Veremos que en la linea Number of unique colors nos indicará el número decolores (únicos) que utiliza la imagen.
Otra forma sencilla de contabilizar los colores, es utilizando ImageMagick,escribiendo en una terminal de Windows o Linux la línea identify format"%k" imagen.png.
Debemos saber que los archivos PNG se suelen categorizar en varios tipos (PNG8es un concepto introducido por Adobe):
PNG24: También llamado PNG (True color). Se trata de la imagen a altacalidad. Es equivalente en calidad (o incluso superior) a una imagen JPG con100 de nivel de compresión, pero también es considerablemente más grandeen tamaño.PNG8: Se trata del mismo formato PNG pero con una paleta de coloresindexada. Esto significa que, en imágenes que utilicen pocos colores(alrededor de 256 colores, o menos) podemos optimizarla para que ocupe untamaño menor. Opción muy útil.
Reduciendo coloresTeniendo en cuenta lo anterior, podemos utilizar RIOT para ajustar el número decolores de una imagen PNG (y así su tamaño). En la zona inferior izquierda,ponemos seleccionar entre True color y Optimal 256 Colors Palette (oinferiores) para ir limitando el número de colores de la imagen.
También podemos hacerlo de forma manual, estableciendo el número de coloresen la barra de desplazamiento inferior (Reduce colors to) y observando los cambiosen la imagen de la derecha (Optimized image).
Marcando la casilla Best compression (slow), conseguiremos una mejorcompresión a un precio muy bajo (lentitud al comprimir la imagen), por lo quees recomendable mantenerla activa.
Más a la derecha, nos encontraremos con un panel denominado Colorquantization algorithm. En el caso de haber elegido realizar una optimizaciónde una imagen PNG con paleta indexada (256 colores o menos) debemos elegirun algoritmo de cuantificación.
Este algoritmo se encargará de reducir los colores de la imagen (en el caso de tenermás de 256) y elegir colores similares alternativos para convertirlos a un únicocolor. Disponemos de dos algoritmos:
Xiaolin Wu color: El método por defecto y recomendado (ya que es el másrápido de los dos).
NeuQuant neutralnet: Otro método alternativo, basado en redes neuronalesde Kohonen. Es más lento, pero puede ser útil en algunas ocasiones parareducir el efecto de «círculos concéntricos» generado en algunos gradientes.
PNG Entrelazado (Carga progresiva)Si nos fijamos bien, en la zona inferior izquierda, hay una casilla denominadaInterlaced. Esta casilla permite crear una imagen PNG entrelazada.
Estableciendo nuestra imagen como un PNG entrelazado, la imagen podrá sercargada mediante el Algoritmo Adam7 (en el enlace se ve claramente como realizala carga), mostrando una versión de baja resolución que se irá volviendo nítida deforma progresiva, en 7 pasadas.
Esto consigue una sensación de carga más rápida, sin embargo, todo tiene unprecio: el tamaño de la imagen se eleva un pequeño porcentaje al activar estacaracterística.
Optimizadores externosFinalmente, en el panel External optimizers se pueden configurar aplicacionesexternas para optimizar (aún más) nuestra imagen. Por defecto se incorporan tresoptimizadores (al pulsar sobre ellos, se descargan automáticamente): AdvPNG,OptiPNG y PNGout.
Sin embargo, podemos añadir nuestros propios optimizadores, ampliando la lista(pulsando en el símbolo de suma en fondo verde) y haciendo nuestras propiaspruebas. A continuación, una lista de optimizadores externos que podemosutilizar:
Tool Name Tool Path ParametersAdvPNG Insane(fast) advpng.exe 4 IMAGE_FILE
Si conoces más optimizadores de archivos PNG que no estén en la lista,puedes compartirlos con nosotros en los comentarios del artículo. Por otra parte, sibuscas más aplicaciones para optimizar imágenes (con interfaz gráfico o inclusoalternativas online) puedes consultar esta lista de 12 aplicaciones para optimizarimágenes, tanto para imágenes PNG, como imágenes JPG o GIF.
Publicar en Twitter 68La guía definitiva para optimizar imágenes http://manz.in/edjv por @Manz
TweetTweet
Si te ha gustado este artículo, lo puedes Si te ha gustado este artículo, lo puedes compartircompartir con tus con tus amigosamigos::
Relacionados
Más sobre el autor
Escrito por Escrito por José Román HernándezJosé Román Hernández ( (ManzManz), Ingeniero), Ingenierotécnico en Informática de Gestión y residente en Santatécnico en Informática de Gestión y residente en SantaCruz de Tenerife.Cruz de Tenerife.
Estadísticas Relacionados Anteriormente Tweets
Convertir archivos .docx a.doc (o abrirlos)
10 operaciones útiles conarchivos PDF
Renombrado masivo deficheros en Windows
10 formatos que quizás yahabías olvidado
12 programas gratuitospara eliminar ficherosduplicados
Escribe aquí tu comentario... ¡Separa en párrafos los textos muy abundantes y revisa la previsualización del comentario antes de enviarlo! Tu comentario puede tardar algunos segundos en aparecer después de enviarlo.
Acepto las condiciones y políticas de privacidad de este sitio web. Suscribirme a través de FeedBurner a los nuevos artículos del blog por email.
PrevisualizaciónAquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.
7 Goa'ulds intentaron conquistar la Tierra con 807,4 Jaffas, pero no duraron ni 0,2406 segundos. Y Jack O'neill no estaba allí.Programado íntegramente por José Román Hernández Martín (Manz) en HTML5 y CSS estándar.Sindicado bajo Feed RSS. Contenido bajo licencia Creative CommonsAviso legal · Contacto · Publicidad · Privacidad & Cookies
