{"id":25,"date":"2020-07-22T12:43:30","date_gmt":"2020-07-22T12:43:30","guid":{"rendered":"https:\/\/softwareinformatico.com\/blog\/?p=25"},"modified":"2020-09-29T05:13:27","modified_gmt":"2020-09-29T05:13:27","slug":"formatos-de-imagen","status":"publish","type":"post","link":"https:\/\/softwareinformatico.com\/blog\/formatos-de-imagen\/","title":{"rendered":"Formatos de imagen"},"content":{"rendered":"\n<p>Una buena elecci\u00f3n en los <strong>formatos de imagen dependiendo del uso<\/strong> que les vayamos a dar es fundamental, teniendo en cuenta que no es lo mismo usarlo para revistas, redes sociales, blogs, campa\u00f1as de publicidad, dise\u00f1o gr\u00e1fico etc.<\/p>\n\n\n\n<p>Elegir los tipos de im\u00e1genes y los formatos de imagen correctos, es una de las tareas m\u00e1s importantes, ya que <strong>para algunos casos nos interesar\u00e1 tener una calidad \u00f3ptima  y para otros quiz\u00e1 un tama\u00f1o de fotos adecuado<\/strong>. <\/p>\n\n\n\n<p>Cabe resaltar que para la <a title=\"optimizaci\u00f3n web\" href=\"https:\/\/softwareinformatico.com\/optimizacion-web\/\">optimizaci\u00f3n web<\/a>  no nos vale cualquier extensi\u00f3n o tama\u00f1o de fotos.<\/p>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#8a211d\">Tipos de im\u00e1genes m\u00e1s importantes:<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong class=\"lista_titulo\">PNG<\/strong><br><br>Formato sin p\u00e9rdidas de calidad, es uno de los m\u00e1s usados siendo compatible con pr\u00e1cticamente todos los navegadores y permite el uso de transparencias. Se usa bastante en dise\u00f1o gr\u00e1fico y dise\u00f1o web.<br><br>Se recomienda solo usar la extensi\u00f3n PNG cuando las im\u00e1genes <strong>necesiten transparencias o para uso de im\u00e1genes de alta calidad<\/strong>, para web es recomendable su uso s\u00f3lo cuando sea imprescindible.<br><br><br><\/li><li><strong class=\"lista_titulo\">JPG<\/strong>.<br><br>Quiz\u00e1, el m\u00e1s est\u00e1ndar de los formatos de imagen y el m\u00e1s usado en p\u00e1ginas webs. Permite un equilibrio entre calidad y tama\u00f1o de fotos, pudiendo obtener <strong>fotos de calidad media-alta con tama\u00f1o reducido<\/strong>. Se puede comprimir eligiendo la calidad que queremos que tenga.<br><br><br><\/li><li><strong class=\"lista_titulo\">GIF<\/strong>.<br><br>Bastante extendido tambi\u00e9n para el uso de im\u00e1genes en p\u00e1ginas webs, aunque <strong>ha quedado en desuso<\/strong>. Tiene un tama\u00f1o reducido y <strong>permite realizar animaciones<\/strong> con cambios de frames. <br><br>Pese a que <strong>el tama\u00f1o de fotos que genera es bastante reducido<\/strong>, en la actualidad no es recomendable dentro de los formatos de imagen a usar. La gama de colores que ofrece es muy limitada con 256 colores frente a los 16 millones que por ejemplo proporcionan los formatos jpg.<br><br><br><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"171\" height=\"175\" src=\"https:\/\/softwareinformatico.com\/blog\/wp-content\/uploads\/2020\/07\/tipos-de-imagenes.gif\" alt=\"tipos de im\u00e1genes\" class=\"wp-image-56\"\/><\/figure><\/div>\n\n\n\n<div class=\"div_consulta_bordes\"><p class=\"text_ini\">Si necesitas ayuda, o tienes dudas sobre <a href=\"https:\/\/softwareinformatico.com\/\" title=\"aplicaciones inform\u00e1ticas\">aplicaciones inform\u00e1ticas<\/a> preg\u00fantanos, podemos ayudarte.<\/p><div class=\"creatutienda\"><a href=\"https:\/\/softwareinformatico.com\/consulta-informatica\/\" title=\"consulta informatica\">CONSULTA INFORMATICA<\/a><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><strong class=\"lista_titulo\">RAW<\/strong>.<br><br>Las im\u00e1genes con formato RAW est\u00e1n <strong>orientadas solamente para perfiles profesionales<\/strong>. Cuando se genera una imagen en formato raw se guarda con toda la informaci\u00f3n y sin ninguna alteraci\u00f3n, lo que permite que luego a la hora de editar y hacer un postprocesado de esas im\u00e1genes se consiga una calidad excelente.<br><br>El formato RAW es aconsejable solo si a las im\u00e1genes obtenidas se les va a realizar un postprocesado.<br><br><br><\/li><li><strong class=\"lista_titulo\">SVG<\/strong>.<br><br>Formato que se basa en vectores escalables. Se suele aplicar para dise\u00f1o gr\u00e1fico porque <strong>no pierde nada de calidad al hacer zoom sobre la imagen<\/strong> a diferencia de los formatos de im\u00e1genes que trabajan con p\u00edxeles, que al ampliarlas pierden bastante calidad (pixelaci\u00f3n).<br> <br>Es c\u00f3digo abierto y multiplataforma y como desventaja <strong>genera un tama\u00f1o de fotos de gran peso<\/strong>. <br><br>En web se usa mucho porque <strong>son im\u00e1genes que valen para responsive<\/strong> (adapt\u00e1ndose tanto para <em>m\u00f3vil <\/em>como para <em>pc) <\/em>sin perder calidad.<br><br>Para gr\u00e1ficas, estad\u00edsticos o responsive, es un formato de imagen a tener muy en cuenta.<br><br><em>En el siguiente ejemplo<\/em> podemos ver <strong>la misma imagen svg<\/strong> en tama\u00f1o de fotos distintos<br><br><br><\/li><\/ul>\n\n\n\n<div style=\"text-align:center;margin-bottom:30px;\"><img decoding=\"async\" src=\"https:\/\/softwareinformatico.com\/blog\/wp-content\/uploads\/2020\/07\/tama%C3%B1os-de-imagen.svg\" width=\"400\"><br>\n<img decoding=\"async\" src=\"https:\/\/softwareinformatico.com\/blog\/wp-content\/uploads\/2020\/07\/tama%C3%B1os-de-imagen.svg\" width=\"200\"><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>BMP<\/strong>.<br>Uno de los pioneros en los formatos de im\u00e1genes aunque ya no se usa, <strong>hay formatos que lo superan ampliamente en capacidad de compresi\u00f3n o calidad<\/strong>.<br><br><br><\/li><li><strong>WEBP<\/strong>.<br><br>Formato adquirido por Google, aunque hoy en d\u00eda es de c\u00f3digo abierto con la intenci\u00f3n de convertirse en el est\u00e1ndar web. Es <strong>capaz de tener una calidad bastante alta con un tama\u00f1o reducido<\/strong>, compite con el formato jpg por ser el mejor en esa caracter\u00edstica. <br><br>Otra opci\u00f3n a tener muy en cuenta, es que este formato de imagen <strong>lo valora muy positivamente Google <\/strong>y el SEO (posicionamiento web) lo marca Google. <br><br><br><br><br><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Resumen de formatos de imagen para web<\/h3>\n\n\n\n<div class=\"div_consulta_bordes\">Uso est\u00e1ndar jpg y webp, png para transparencias o im\u00e1genes de alta calidad y svg para gr\u00e1ficos o responsive<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>Una buena elecci\u00f3n en los formatos de imagen dependiendo del uso que les vayamos a dar es fundamental, teniendo en cuenta que no es lo <a class=\"mh-excerpt-more\" href=\"https:\/\/softwareinformatico.com\/blog\/formatos-de-imagen\/\" title=\"Formatos de imagen\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":28,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[7],"class_list":["post-25","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-imagenes"],"_links":{"self":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":0,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/media\/28"}],"wp:attachment":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}