{"id":4081,"date":"2014-02-10T13:38:02","date_gmt":"2014-02-10T11:38:02","guid":{"rendered":"http:\/\/www.weweb.cat\/es\/2014\/02\/10\/com-guardar-les-teves-imatges-per-web\/"},"modified":"2016-12-22T13:13:20","modified_gmt":"2016-12-22T12:13:20","slug":"com-guardar-tus-imagenes-para-web","status":"publish","type":"post","link":"https:\/\/www.weweb.cat\/es\/com-guardar-tus-imagenes-para-web\/","title":{"rendered":"\u00bfC\u00f3mo guardar tus im\u00e1genes para web?"},"content":{"rendered":"<p>[et_pb_section admin_label=\u00bbsection\u00bb background_image=\u00bbhttp:\/\/www.weweb.cat\/wp-content\/uploads\/2016\/01\/bg-header.jpg\u00bb transparent_background=\u00bboff\u00bb allow_player_pause=\u00bboff\u00bb inner_shadow=\u00bboff\u00bb parallax=\u00bboff\u00bb parallax_method=\u00bboff\u00bb padding_mobile=\u00bboff\u00bb make_fullwidth=\u00bboff\u00bb use_custom_width=\u00bboff\u00bb width_unit=\u00bbon\u00bb make_equal=\u00bboff\u00bb use_custom_gutter=\u00bboff\u00bb gutter_width=\u00bb3&#8243; custom_css_main_element=\u00bbposition:absolute;||top:0;||left:0;||margin-top:0;||margin-left:0;||width:100%;||height:100px;\u00bb][et_pb_row admin_label=\u00bbrow\u00bb][et_pb_column type=\u00bb4_4&#8243;][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section admin_label=\u00bbSection\u00bb fullwidth=\u00bboff\u00bb specialty=\u00bboff\u00bb][et_pb_row admin_label=\u00bbRow\u00bb][et_pb_column type=\u00bb3_4&#8243;][et_pb_text admin_label=\u00bbText\u00bb background_layout=\u00bblight\u00bb text_orientation=\u00bbleft\u00bb use_border_color=\u00bboff\u00bb border_color=\u00bb#ffffff\u00bb border_style=\u00bbsolid\u00bb]<\/p>\n<p>Si tienes una p\u00e1gina web seguro que \u00e9sta tiene un gran contenido gr\u00e1fico como <strong>fotograf\u00edas, iconos, ilustraciones<\/strong>, etc.. En alg\u00fan momento te puedes encontrar con la necesidad de subir las nuevas im\u00e1genes o renovar las que hay actualmente, ya sean im\u00e1genes creadas para impactar, para mostrar tus productos o para mantener la atenci\u00f3n del usuario. <strong>\u00a1Estas im\u00e1genes tendr\u00e1n que verse siempre correctamente para sacarle el m\u00e1ximo partido!<\/strong> Por eso resulta tan importante <strong>optimizar correctamente nuestras fotograf\u00edas<\/strong> antes de subirlas a nuestra p\u00e1gina web. B\u00e1sicamente se trata de escoger el <strong>formato adecuado<\/strong>, que tengan el <strong>tama\u00f1o exacto<\/strong> y que <strong>no pesen demasiado<\/strong>; por ejemplo, que no sobrepasen los 500Kb en fotos grandes, los 200Kb en fotos de tama\u00f1o mediano y los 100Kb en im\u00e1genes peque\u00f1as.<\/p>\n<h3>Por qu\u00e9 conviene que nuestras im\u00e1genes no pesen mucho?<\/h3>\n<p>Aunque cada vez navegamos a m\u00e1s velocidad, unas im\u00e1genes muy pesadas pueden provocar que nuestra p\u00e1gina web tarde demasiado en cargar, sobre todo si nuestra p\u00e1gina web contiene un gran contenido gr\u00e1fico o est\u00e1 formada por im\u00e1genes que ocupan gran parte o toda la pantalla. Si nuestra p\u00e1gina web es lenta, el usuario se cansar\u00e1 y la abandonar\u00e1 r\u00e1pidamente, cosa que no podemos aceptar de ninguna manera.<\/p>\n<p>Unas im\u00e1genes bien optimizadas nos ayudar\u00e1n a obtener un <strong>mejor posicionamiento<\/strong>, ya que Google, desde hace un tiempo, tiene en cuenta factores como la velocidad al cargar una p\u00e1gina.<\/p>\n<h3>\u00bfQu\u00e9 formato escogeremos?<\/h3>\n<p>Para empezar, tendremos que elegir cu\u00e1l es el formato m\u00e1s adecuado para guardar nuestras im\u00e1genes y podemos elegir entre:<\/p>\n<ul>\n<ul>\n<li><strong>GIF<\/strong>: se trata de un formato cada vez m\u00e1s obsoleto. Pr\u00e1cticamente s\u00f3lo se utiliza para exportar im\u00e1genes animadas y formadas por pocos colores planos.<\/li>\n<li><strong>JPG<\/strong>: perfecto para guardar fotograf\u00edas de todo tipo, sobre todo si estas son de grandes dimensiones y con gran detalle. Su compresi\u00f3n es mucho m\u00e1s elevada que la de un PNG. No es recomendable para exportar im\u00e1genes con textos peque\u00f1os, ya que \u00e9stos pierden nitidez y quedan poco definidos.<\/li>\n<\/ul>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4079\" src=\"http:\/\/www.weweb.cat\/wp-content\/uploads\/2014\/02\/png.png\" alt=\"Com guardar imatges per web\" width=\"590\" height=\"200\" srcset=\"https:\/\/www.weweb.cat\/wp-content\/uploads\/2014\/02\/png.png 590w, https:\/\/www.weweb.cat\/wp-content\/uploads\/2014\/02\/png-300x102.png 300w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><\/p>\n<ul>\n<ul>\n<li><strong>PNG<\/strong>: es el formato ideal para im\u00e1genes planas o con pocos colores, tipo ilustraciones, iconos, logotipos, gr\u00e1ficos,etc. Los textos exportados a im\u00e1genes PNG ser\u00e1n mucho m\u00e1s n\u00edtidos. Otro de los motivos para utilizar PNG es que nos permite utilizar im\u00e1genes con transparencia.<\/li>\n<\/ul>\n<\/ul>\n<ul>\n<ul>\n<li><strong>SVG<\/strong>: es un formato vectorial, cosa que lo convierte en redimensionable. La imagen que sea guardada en SVG se ver\u00e1 siempre n\u00edtida, se presente al tama\u00f1o que se presente. Este formato es ideal para guardar im\u00e1genes que se hayan creado con vectores, como logotipos, ilustraciones, iconos, etc., sobre todo para webs responsivas. Uno de los inconvenientes que existen es que todav\u00eda hay versiones antiguas de Internet Explorer que no admiten este formato.<\/li>\n<\/ul>\n<\/ul>\n<h3>Como optimizar nuestras im\u00e1genes?<\/h3>\n<p>Es importante que las im\u00e1genes que guardamos est\u00e9n al <strong>tama\u00f1o exacto en p\u00edxeles<\/strong> en que se mostrar\u00e1n en la web. Si exportamos una imagen a JPG la calidad deber\u00e1 ser de entre 80 y 90. Si lo que hacemos es exportar un PNG podemos elegir entre un PNG-8 , PNG-24 o PNG-32. <strong>Se recomienda utilizar PNG -24 o PNG -32<\/strong>, ya que la calidad de la imagen ser\u00e1 superior, sobre todo si est\u00e1 compuesta por muchos colores.<\/p>\n<p>Uno de los inconvenientes que podemos encontrar cuando exportamos una imagen a PNG transparente es que acabe siendo bastante pesada, sobre todo si se trata de una fotograf\u00eda a todo color. Un recurso muy \u00fatil y f\u00e1cil que hemos descubierto hace poco es <a title=\"Tiny PNG\" href=\"https:\/\/tinypng.com\/\" target=\"_blank\">https:\/\/tinypng.com\/<\/a>, desde donde <strong>podremos comprimir hasta un 70 % nuestros PNG\u2019s transparentes<\/strong> de una forma r\u00e1pida y sencilla.<\/p>\n<p>Si la imagen que estem tratando la hemos capturado nosotros, es importante escoger el espacio de color <strong>sRGB<\/strong> y no AdobeRGB o ning\u00fan otro, ya que sRGB es un formato m\u00e1s universal. Veremos la imagen con los mismos colores que la original y se ver\u00e1 pr\u00e1cticamente igual en todos los navegadores, lo que lo convierte en el espacio ideal para web.<\/p>\n<h3>Una excepci\u00f3n: las pantallas Retina Display<\/h3>\n<p>Desde hace un tiempo, los dispositivos creados por la marca Apple como iPad, iPhone, MacBook, etc. tienen en com\u00fan las <strong>pantallas Retina Display<\/strong>, que ofrecen una calidad de imagen muy superior a la que est\u00e1bamos acostumbrados. Esto se debe a que tienen una densidad de p\u00edxeles muy superior a las pantallas convencionales, pudiendo llegar a mostrar hasta cuatro veces m\u00e1s p\u00edxeles en un mismo espacio. Por eso, cuando visualizamos una imagen en uno de estos dispositivos, la podemos llegar a ver borrosa y con poca definici\u00f3n. Para conseguir que se vean correctamente las im\u00e1genes en este tipo de pantallas <strong>se recomienda guardarlas al doble de su tama\u00f1o<\/strong>. Si tenemos una imagen de 50 x 50 px , la guardaremos a 100 x 100 px . <strong>Se recomienda tambi\u00e9n utilizar el formato SVG<\/strong>, ya que con \u00e9ste no tendremos ning\u00fan problema en la redimensi\u00f3n porque nunca pierde definici\u00f3n al mantener las propiedades vectoriales. Con las im\u00e1genes grandes a toda pantalla no aplicaremos la misma soluci\u00f3n, no existe el mismo problema de falta de definici\u00f3n y obtendr\u00edamos im\u00e1genes demasiado pesadas para nuestra p\u00e1gina web.<\/p>\n<p>Una vez visto todo esto, se trata de encontrar el equilibrio entre la calidad y el peso para acabar obteniendo unas im\u00e1genes que luzcan todo lo posible en nuestra p\u00e1gina web sin que nos hagan perder velocidad al navegar.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_4&#8243;][et_pb_sidebar admin_label=\u00bbSidebar\u00bb orientation=\u00bbright\u00bb area=\u00bbsidebar-1&#8243; background_layout=\u00bblight\u00bb remove_border=\u00bboff\u00bb header_font_size=\u00bb18&#8243; body_font_size=\u00bb14&#8243;] [\/et_pb_sidebar][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n<!-- Begin Yuzo --><div class='yuzo_related_post style-1'  data-version='5.12.70'><div class='yuzo_clearfixed yuzo__title yuzo__title'><h3>Articles relacionats<\/h3><\/div>\n\t\t\t\t\t\t  <div class=\"relatedthumb \" style=\"width:200px;float:left;overflow:hidden;\">  \n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  <a  href=\"https:\/\/www.weweb.cat\/es\/que-negoci-sha-danunciar-google-adwords\/\"  >\n\t\t\t\t\t\t\t\t\t  <div class=\"yuzo-img-wrap \" style=\"width: 200px;height:200px;\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<div class=\"yuzo-img\" style=\"background:url('https:\/\/www.weweb.cat\/wp-content\/uploads\/2017\/03\/per-que-negoci-anunciar-google-adwords-150x150.png') 50% 50% no-repeat;width: 200px;height:200px;margin-bottom: 5px;background-size: contain; \"><\/div>\n\t\t\t\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t   <span class=\"yuzo__text--title\" style=\"font-size:14px;\">\u00bfPor qu\u00e9 tu negocio debe anunciarse en Google Adwords?<\/span>\n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  <\/a>\n\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <div class=\"relatedthumb \" style=\"width:200px;float:left;overflow:hidden;\">  \n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  <a  href=\"https:\/\/www.weweb.cat\/es\/url-amigables\/\"  >\n\t\t\t\t\t\t\t\t\t  <div class=\"yuzo-img-wrap \" style=\"width: 200px;height:200px;\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<div class=\"yuzo-img\" style=\"background:url('https:\/\/www.weweb.cat\/wp-content\/uploads\/2014\/03\/Depositphotos_5659477_xs-150x150.jpg') 50% 50% no-repeat;width: 200px;height:200px;margin-bottom: 5px;background-size: contain; \"><\/div>\n\t\t\t\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t   <span class=\"yuzo__text--title\" style=\"font-size:14px;\">\u00bfPor qu\u00e9 usar URL amigables?<\/span>\n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  <\/a>\n\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <div class=\"relatedthumb \" style=\"width:200px;float:left;overflow:hidden;\">  \n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  <a  href=\"https:\/\/www.weweb.cat\/es\/como-evolucina-internet\/\"  >\n\t\t\t\t\t\t\t\t\t  <div class=\"yuzo-img-wrap \" style=\"width: 200px;height:200px;\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<div class=\"yuzo-img\" style=\"background:url('https:\/\/www.weweb.cat\/wp-content\/uploads\/2014\/10\/evolucion-internet-th-150x150.png') 50% 50% no-repeat;width: 200px;height:200px;margin-bottom: 5px;background-size: contain; \"><\/div>\n\t\t\t\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t   <span class=\"yuzo__text--title\" style=\"font-size:14px;\">\u00bfC\u00f3mo evoluciona Internet?<\/span>\n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  <\/a>\n\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <div class=\"relatedthumb \" style=\"width:200px;float:left;overflow:hidden;\">  \n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  <a  href=\"https:\/\/www.weweb.cat\/es\/google-premiara-las-paginas-web-responsivas-optimizadas-para-moviles\/\"  >\n\t\t\t\t\t\t\t\t\t  <div class=\"yuzo-img-wrap \" style=\"width: 200px;height:200px;\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<div class=\"yuzo-img\" style=\"background:url('https:\/\/www.weweb.cat\/wp-content\/uploads\/2015\/03\/img-optimizacion-moviles-150x150.jpg') 50% 50% no-repeat;width: 200px;height:200px;margin-bottom: 5px;background-size: contain; \"><\/div>\n\t\t\t\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t   <span class=\"yuzo__text--title\" style=\"font-size:14px;\">Google premiar\u00e1 a las p\u00e1ginas web responsivas u optimizadas para m\u00f3viles<\/span>\n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t  <\/a>\n\n\t\t\t\t\t\t  <\/div>\n<\/div> <style>\n\t\t\t\t\t\t\t\t.yuzo_related_post img{width:210px !important; height:200px !important;}\n\t\t\t\t\t\t\t\t.yuzo_related_post .relatedthumb{line-height:16px;background: !important;color:!important;}\n\t\t\t\t\t\t\t\t.yuzo_related_post .relatedthumb:hover{background:#fff7f4 !important; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear;;color:!important;}\n\t\t\t\t\t\t\t\t.yuzo_related_post .relatedthumb a{color:#ff7900!important;}\n\t\t\t\t\t\t\t\t.yuzo_related_post .relatedthumb a:hover{ color:}!important;}\n\t\t\t\t\t\t\t\t.yuzo_related_post .relatedthumb:hover a{ color:!important;}\n\t\t\t\t\t\t\t\t.yuzo_related_post .yuzo_text {color:!important;}\n\t\t\t\t\t\t\t\t.yuzo_related_post .relatedthumb:hover .yuzo_text {color:!important;}\n\t\t\t\t\t\t\t\t.yuzo_related_post .relatedthumb{  margin: 0px  0px  0px  0px;   padding: 2px  10px  10px  10px;  }\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<\/style> <script>\n\t\t\t\t\t\t  jQuery(document).ready(function( $ ){\n\t\t\t\t\t\t\t\/\/jQuery('.yuzo_related_post').equalizer({ overflow : 'relatedthumb' });\n\t\t\t\t\t\t\tjQuery('.yuzo_related_post .yuzo_wraps').equalizer({ columns : '> div' });\n\t\t\t\t\t\t   })\n\t\t\t\t\t\t  <\/script> <!-- End Yuzo :) -->","protected":false},"excerpt":{"rendered":"<p>Si tienes una p\u00e1gina web seguro que \u00e9sta tiene un gran contenido gr\u00e1fico como fotograf\u00edas, iconos, ilustraciones, etc.. En alg\u00fan momento te puedes encontrar con la necesidad de subir las nuevas im\u00e1genes o renovar las que hay actualmente.<\/p>\n","protected":false},"author":4,"featured_media":4079,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[223],"tags":[142,299,293,86,300,301,145,302,146,303],"_links":{"self":[{"href":"https:\/\/www.weweb.cat\/es\/wp-json\/wp\/v2\/posts\/4081"}],"collection":[{"href":"https:\/\/www.weweb.cat\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weweb.cat\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weweb.cat\/es\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weweb.cat\/es\/wp-json\/wp\/v2\/comments?post=4081"}],"version-history":[{"count":6,"href":"https:\/\/www.weweb.cat\/es\/wp-json\/wp\/v2\/posts\/4081\/revisions"}],"predecessor-version":[{"id":7696,"href":"https:\/\/www.weweb.cat\/es\/wp-json\/wp\/v2\/posts\/4081\/revisions\/7696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weweb.cat\/es\/wp-json\/wp\/v2\/media\/4079"}],"wp:attachment":[{"href":"https:\/\/www.weweb.cat\/es\/wp-json\/wp\/v2\/media?parent=4081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weweb.cat\/es\/wp-json\/wp\/v2\/categories?post=4081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weweb.cat\/es\/wp-json\/wp\/v2\/tags?post=4081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}