Es c r ib e aq u . . .

El odern de las ltaers no aterla el porudtco Aadirtag

Artculos Publicidad Act.Profesional Contacto Suscribirme

8015RSS5988Twitter13532Facebook

Categorias > Software > Laguadefinitivaparaoptimizarimgenes

La gua definitiva para optimizar imgenes

| 5 comentarios | software

Lunes,21Enero2013

Interesadoenanunciarte?

Siacostumbramosaescribirenunblogocrearsitiosweb,obviamente, utilizaremosimgenesparadecorarocomplementarnuestrostextosdeuna formagrficayatractiva.Lasimgenessonunrecursonecesarioe imprescindibleparaconseguirmantenerlaatencindelpblicoyevitar aburrirlos.

crawlers yrobotsdebuscadorescumplan. Veamoscomo crearlosyconfigurarlos.

Robots.txt : Todo lo que Elficherorobots.txtesunarchivo detextoquedicta deb eria sab er unasreco mend acion esparaquetodoslos

s de Los 25 mejores comentario uadosde amirarloscomentariosmspunt Teparas tube los25mejores You Youtube?Aquunatraduccinde
comentariosqueheencontrado .

Sinembargo,nosiemprelasutilizamoscorrectamente,bienpordesconocimiento, pordescuido(yfaltadetiempo)opornotenerlabasedeconocimientonecesaria parautilizarlascorrectamente. Enesteartculoveremosunaguaparaoptimizarimgenesennuestrositio web,deunaformaefectiva,conunbuenequilibrioentrecalidaddeimageny tamaodeimagen.

Cine PC: Y si las pelculas Qunombretendranlaspelcu lasexistentesque fue ranssitu info rm ticas? yaconoce viese nnom
breinformtico?

Imgenes pesadas = sitio web lento

Unapginawebcontienevariasimgenes.Desdelospequeosiconosque

OS Dosugus, cojin geek de MSD udio,que

ebedevSt AlmohadndelamanodeArt.L ticosdelviejo harlasdeliciasdeaquellosfan DOS. sistemaoperativodeMicrosoft,MS

incorporahastalasgrandesimgenesqueilustranlasentradasoartculos.Parael usuario,cargarcadaimagenesunpequeoretardoenlacargadelsitioweb. Estoesalgobastanteimportante.Unaweblentaessinnimodeprdidade usuarios(abandonanobuscanotraswebs,cansadosporlalentituddecarga), peroademsahorasabemosqueGoogleledaimportanciaalavelocidadde cargadeunaweb,porloqueseralgoqueinfluyealahoradeposicionarseen Google.

SilosartculosdeEmezetablogsondetu inters,puedesescogerunacategoradel siguienteSCUMMmendetemticasdel blog:
Juegos Pasatiempos Publicidad Internet y la Red Mundo web Curiosidades Hardware Humor TV y espectculos Emezeta Citas y frases Historias Dise o

Informtica Msica Programacin Software Mviles

Sugerencias
Sitienesalgunaideaoquieresquetratealgn temaconcretoenelblog,puedesenviarmeun mensajeatravsdelformulariodecontacto.

Lasumadetodaslasimgenesutilizadasenunsitiopuedeserconsiderable. Cadapginadenuestraweb,contienevariasimgenesendiferentesformatos (ymuchasveces,pocoapropiados)quehabrquedescargaralaccederaella.Es porestarazn,queloidealseradisminuirlomximoposibleeltamaode cadaunadeellas,paraqueocupenmenosysedescarguenantes,inclusoen usuariosconconexioneslentas. EnelartculoOptimizarelrendimientoweb,hagounrepasomsdetalladoy tcnicodelosaspectosquepuedenretrasarlacargadeunaweb:nmerode peticiones,tipodeservidores,sistemasdecach,descargasparalelas,sistema lazyload,etc...

Acerca de...
Siquieressabermssobre miosobreEmezeta,haz clicenQuinesManz?.Si lodeseas,tambinpuedes vermiCVomiactividad profesional. Paraenviarmeunmensaje privado,puedesirdirectamentealaseccin contactarconmigo

Gallo

La decisin: JPG, PNG o GIF?

Laprimerapreguntaquenospodemosplanteares:Quformatodeimagen deboutilizar?Existenmultituddeformatosdeimagen,algunosnuevos,otros msdesconocidos(comoporejemplo:WEBP,JPEG2000,JPEGXR...).Loms importanteesconocerladiferenciaentrelosformatosconprdidasylos formatossinprdidas.Puedessabermsenlasiguienteguadeformatosde imgenes. Nosotrosnosbasaremosenlostresmsutilizados:JPG,PNGyGIF.Agrandes rasgos,elmtodomssencilloparasaberqueformatoutilizar,eselsiguiente:

Gua:Todoloquedeberassabersobre LINE

Esmejorsaversielotroestaenlinea

Otros
Emezeta Rank Foto-Revista Emezeta Camisetas Emezeta IP Emezeta en Google+ Manz en Google+ Manz en Emezeta

FormatoJPG:Fotografas.Muchastexturas.Detallescomplejos.Nonos importaperderpartedecalidaddelaimagenoriginal. Ejemplo:UnabonitafotografadeMordoryelojodeSauron. FormatoPNG:Capturasdepantalla.Dibujos.Bocetos.Imgenesenlas quehayampliaszonaslisasconelmismocolor. Ejemplo:Ilustracindelartculoshootersdelos90,condibujosyzonasde coloruniforme. FormatoGIF:SimilaraPNG,peroactualmenteutilizadoslopara imgenesanimadas. Ejemplo:UnaimagenanimadadeLarryLeisureSuitleyendoelperidico.

JPG o PNG? Artefactos de compresin

Esposiblequellegadoaestepunto,noestssegurosiutilizarJPGoPNGparatus imgenes.Nohayproblema.Vamosaaclararlo. Ambosformatossoncomprimidosinternamenteparaconseguirocuparmenos espacioendisco: ImgenesJPG:Conunvalorentre1y100(msalto,menorcompresiny mayortamao) ImgenesPNG:Conunvalorentre0y9(msalto,mayorcompresiny menortamao) Antesdecontinuar,seguroqueconocesundesagradableefectoproducidoenlos archivosJPEG(conaltogradodecompresin):unasfeasmarcasalrededorde ciertosobjetosenimgenes:

UnaimagenPNGyunaimagenJPGdelmismotamao(19KB). Estasmarcassedenominanartefactosdecompresin,yseproducendebidoaque lasimgenesJPGsonunformatodeimagenconprdidas:paraconseguir queocupenmenos,reducimoslacalidaddelaimagen(perdiendonitidez). Encontraposicin,lasimgenesPNGsonunformatodeimagensinprdidas: paraconseguirqueocupenmenos,seutilizanalgoritmosdecompresin reversibles,quenoreducentantoeltamao,peroconsiguennointroducir artefactos. Obviamente,cadaformatoestilparacadacasoconcreto.Simplificando,la normageneralsueleserutilizarimgenesJPGparafotografasyutilizar imgenesPNGparaimgenesquecontenganzonasdecoloruniformes.

Optimizar imgenes con RIOT

Paraoptimizarlasimgenesdeformasencillaycmoda,existeunprograma gratuitoideal:RIOT:RadicalImageOptimizationTool,queinclusopuedeutilizarse amododepluginsiutilizasalgnprogramacomoIrfanView,GIMPoXnView.

Esteprogramapermiteoptimizarimgenesmedianteunpaneldonde podemosverladiferenciadetamaodelaimagenoriginalyoptimizada,lacalidad delaimagen,unselectordeltipodeformatogrficoquequeremosutilizar,as comoalgunasopcionescomunes:rotar,invertir,redimensionary comprimirimagenauntamaoenKBconcreto. Paracadaformatodistinto(JPG,GIFoPNG)tendremosunpaneldiferenteenla partebaja,dondeelegireltipodecompresin,ascomoajustesdeimagen(brillo, contraste,etc...). RIOTtambinincorporaunpluginRAWHDR(colocarencarpetaplugins) parapermitirabrirarchivosHDRcomoEXRoHDR,oarchivosRAWde cmarasdigitalescomoNEF,RAW,RAF,CRW,CR2,entremuchosotros.

Algoritmos de redimensionado
YaenlaguadeproductividadconIrfanView(punto5)habledelosalgoritmos deredimensionado.Delamismaforma,RIOTpermiteampliaroreducirlas imgenesutilizandounalgoritmoconcretodelasiguientelista:

Siestaformasetequedagrande,pruebaconCmoreducirunaimagen. Cadaunodeellosproporcionaunresultadodistinto,loquelohaceidealpara diferentessituaciones.Porejemplo,elalgoritmoBoxesidealparaampliacionesde imgenesde8bits(conservandobordesdefinidos),mientrasqueLanczos3es idealparaampliarfotografas(interpolacindeimgenes).

Optimizando PNG (obsesivamente)

UnodelostrucosparaoptimizarimgenesPNGesladecontabilizarlos coloresqueutilizaunaimagen.Comohacerloamanoseramuytediosoyuna tareabastanterepetitiva,podemoshacerusodeIrfanView,accediendoala opcinImage/Information,opulsandolatecla I. VeremosqueenlalineaNumberofuniquecolorsnosindicarelnmerode colores(nicos)queutilizalaimagen.

HouseyWilson,a8bits. Otraformasencilladecontabilizarloscolores,esutilizandoImageMagick, escribiendoenunaterminaldeWindowsoLinuxlalneaidentifyformat "%k"imagen.png. DebemossaberquelosarchivosPNGsesuelencategorizarenvariostipos(PNG8 esunconceptointroducidoporAdobe): PNG24:TambinllamadoPNG(Truecolor).Setratadelaimagenaalta calidad.Esequivalenteencalidad(oinclusosuperior)aunaimagenJPGcon 100deniveldecompresin,perotambinesconsiderablementemsgrande entamao. PNG8:SetratadelmismoformatoPNGperoconunapaletadecolores indexada.Estosignificaque,enimgenesqueutilicenpocoscolores (alrededorde256colores,omenos)podemosoptimizarlaparaqueocupeun tamaomenor.Opcinmuytil.

Reduciendo colores
Teniendoencuentaloanterior,podemosutilizarRIOTparaajustarelnmerode coloresdeunaimagenPNG(yassutamao).Enlazonainferiorizquierda, ponemosseleccionarentreTruecoloryOptimal256ColorsPalette(o inferiores)parairlimitandoelnmerodecoloresdelaimagen. Tambinpodemoshacerlodeformamanual,estableciendoelnmerodecolores enlabarradedesplazamientoinferior(Reducecolorsto)yobservandoloscambios enlaimagendeladerecha(Optimizedimage). MarcandolacasillaBestcompression(slow),conseguiremosunamejor compresinaunpreciomuybajo(lentitudalcomprimirlaimagen),porloque esrecomendablemantenerlaactiva.

Msaladerecha,nosencontraremosconunpaneldenominadoColor quantizationalgorithm.Enelcasodehaberelegidorealizarunaoptimizacin deunaimagenPNGconpaletaindexada(256coloresomenos)debemoselegir unalgoritmodecuantificacin. Estealgoritmoseencargardereducirloscoloresdelaimagen(enelcasodetener msde256)yelegircoloressimilaresalternativosparaconvertirlosaunnico color.Disponemosdedosalgoritmos: XiaolinWucolor:Elmtodopordefectoyrecomendado(yaqueeselms rpidodelosdos). NeuQuantneutralnet:Otromtodoalternativo,basadoenredesneuronales deKohonen.Esmslento,peropuedesertilenalgunasocasionespara reducirelefectodecrculosconcntricosgeneradoenalgunosgradientes.

PNG Entrelazado (Carga progresiva)

Sinosfijamosbien,enlazonainferiorizquierda,hayunacasilladenominada Interlaced.EstacasillapermitecrearunaimagenPNGentrelazada. EstableciendonuestraimagencomounPNGentrelazado,laimagenpodrser cargadamedianteelAlgoritmoAdam7(enelenlaceseveclaramentecomorealiza lacarga),mostrandounaversindebajaresolucinqueseirvolviendontidade formaprogresiva,en7pasadas.

Estoconsigueunasensacindecargamsrpida,sinembargo,todotieneun precio:eltamaodelaimagenseelevaunpequeoporcentajealactivaresta caracterstica.

Optimizadores externos
Finalmente,enelpanelExternaloptimizerssepuedenconfiguraraplicaciones externasparaoptimizar(anms)nuestraimagen.Pordefectoseincorporantres optimizadores( alpulsarsobreellos,sedescarganautomticamente):AdvPNG, x Tweet OptiPNGyPNGout.
13votos Mename

Sinembargo,podemosaadirnuestrospropiosoptimizadores,ampliandolalista (pulsandoenelsmbolodesumaenfondoverde)yhaciendonuestraspropias pruebas.Acontinuacin,unalistadeoptimizadoresexternosquepodemos utilizar:

ToolName AdvPNGInsane (fast) OptiPNGo3 PNGoutXtreme (veryslow) ImageMagickPNG8 ToolPath advpng.exe optipng.exe pngout.exe convert.exe Parameters 4{IMAGE_FILE} o3{IMAGE_FILE} /s0{IMAGE_FILE} {IMAGE_FILE}typePalette {IMAGE_FILE}

PNGcrush(brute force) PNGquantPNG8 DeflOpt pngnqs9 PNGrewritePNG8 PngOptimizerCL

pngcrush.exe pngquant.exe DeflOpt.exe pngnq.exe pngrewrite.exe PngOptimizerCL.exe

reducebrute{IMAGE_FILE} {IMAGE_FILE} forceverbose256 {IMAGE_FILE} {IMAGE_FILE} {IMAGE_FILE} {IMAGE_FILE}{IMAGE_FILE} file:"{IMAGE_FILE}"

SiconocesmsoptimizadoresdearchivosPNGquenoestnenlalista, puedescompartirlosconnosotrosenloscomentariosdelartculo.Porotraparte,si buscasmsaplicacionesparaoptimizarimgenes(coninterfazgrficooincluso alternativasonline)puedesconsultarestalistade12aplicacionesparaoptimizar imgenes,tantoparaimgenesPNG,comoimgenesJPGoGIF.

Publicar en Twitter
La gua definitiva para optimizar imgenes http://manz.in/edjv por @Manz

68

Tweet

Si te ha gustado este artculo, lo puedes compartir con tus amigos amigos: :

Relacionados
Estadsticas Relacionados Anteriormente Tweets

Convertirarchivos.docxa .doc(oabrirlos)

10operacionestilescon archivosPDF

Renombradomasivode ficherosenWindows

10formatosquequizsya habasolvidado

12programasgratuitos paraeliminarficheros duplicados

Elpasodeltiempoen20 aplicaciones

Ms sobre el autor
Escrito por Jos Romn Hernndez (Manz ), Ingeniero tcnico en Informtica de Gestin y residente en Santa Cruz de Tenerife.

5 comentarios
Muy buen aporte Manz, la verdad es que esto ayuda muchsimo a mejorar el tiempo de carga de una pgina web y as ganar en optimizacin. Saludos! rubentnf hace9dias
Responder Permalink URL Votarcomo... Chrome24.0.1312.52/Windows7

Como siempre un artculo muy til e interesante. Gracias por compartir tus conocimientos. Marinense hace9dias
Responder Permalink Votarcomo... Chrome24.0.1312.52/Windows7

Buenas, Voy a aadir a la lista el plug-in para GIMP "Save for web", que tambin permite trastear y optimizar imgenes. http://registry.gimp.org/node/33 Noxbru hace9dias
Responder Permalink Votarcomo... MozillaFirefox18.0/Linux

Soy novato en esto de los Blogs, y con las imgenes trabajo con el Gimp pero el proceso optimizar las imgenes para el sitio se hace lento, viendo tu articulo, por cierto muy til, pondr en practica tus recomendaciones. Gracias. alejo hace9dias
Responder Permalink URL Votarcomo... MozillaFirefox16.0/Windows8

Al fin descubri la diferencia de cada formato, para mi todo era JPG. Muchas gracias por la informacin. Hctor Mx hace4dias
Responder Permalink Votarcomo... MozillaFirefox18.0/Windows7

Deja tu opinin

Escribe aqu tu nombre...

Escribe aqu tu email...

http://

Escribe aqu tu comentario... Separa en prrafos los textos muy abundantes y revisa la previsualizacin del comentario antes de enviarlo! Tu comentario puede tardar algunos segundos en aparecer despus de enviarlo.

Acepto las condiciones y polticas de privacidad de este sitio web. Suscribirme a travs de FeedBurner a los nuevos artculos del blog por email.

Previsualizacin
Aquseprevisualizarsucomentario.Revisequeseacorrectoantesdepublicarlo.

7 Goa'uldsintentaronconquistarlaTierracon807,4 Jaffas,peronoduraronni0,2406 segundos.YJackO'neillnoestabaall. ProgramadontegramenteporJosRomnHernndezMartn(Manz)enHTML5yCSSestndar. SindicadobajoFeedRSS.ContenidobajolicenciaCreativeCommons AvisolegalContactoPublicidadPrivacidad&Cookies