{"id":690,"date":"2017-04-28T11:52:51","date_gmt":"2017-04-28T09:52:51","guid":{"rendered":"http:\/\/blogs.uab.cat\/editorsweb\/?p=690"},"modified":"2025-12-11T14:18:44","modified_gmt":"2025-12-11T12:18:44","slug":"millora-la-teva-imatge","status":"publish","type":"post","link":"https:\/\/webs.uab.cat\/webedit\/2017\/04\/28\/millora-la-teva-imatge\/","title":{"rendered":"Millora la teva imatge!"},"content":{"rendered":"\n<p class=\"wp-block-uab-entradeta entradeta\">Les imatges s\u00f3n un recurs que aporta valor afegit al nostre web. A banda de fer-lo m\u00e9s agradable de digerir aporten informaci\u00f3 complement\u00e0ria. Per\u00f2, com tot a la vida, si no es gestionen correctament poden dur-nos maldecaps.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Quan publiquem una imatge al web hem de tenir en compte:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Format<\/h2>\n\n\n\n<p>Si es tracta d&#8217;una fotografia, el millor format ser\u00e0 el <a href=\"https:\/\/ca.wikipedia.org\/wiki\/JPEG\" target=\"_blank\" rel=\"noopener\">JPEG<\/a> perqu\u00e8 \u00e9s el que ens permet una millor relaci\u00f3 mida\/qualitat de la imatge.<\/p>\n\n\n\n<p>En el cas que la imatge sigui senzilla com un dibuix o un logotip, es recomana els formats <a href=\"https:\/\/ca.wikipedia.org\/wiki\/GIF\" target=\"_blank\" rel=\"noopener\">GIF<\/a> o <a href=\"https:\/\/ca.wikipedia.org\/wiki\/PNG\" target=\"_blank\" rel=\"noopener\">PNG<\/a>. Aquests formats permeten transpar\u00e8ncies i animacions (en el cas del GIF).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mides<\/h2>\n\n\n\n<p>Actualment a les webs tenim molta varietat d&#8217;imatges per\u00f2 hi ha dues mides que s\u00f3n m\u00e9s populars:<br>Imatges petites: 230 x 129 p\u00edxels.<br>Imatges grans: 480 x 270 p\u00edxels.<\/p>\n\n\n\n<p>En una not\u00edcia, l&#8217;asset imatge que hi adjuntem ha de tenir emplenat tant el camp de Thumbnail com el d&#8217;Imatge. La imatge del camp Thumbnail ha de mesurar 230x129px i la imatge del camp Imatge ha de ser de 480x270px.<\/p>\n\n\n\n<p>Si necessiteu una imatge per un espai m\u00e9s gran, parleu amb nosaltres abans i us direm la mida m\u00e9s \u00f2ptima.<\/p>\n\n\n\n<p>De vegades ens hem trobat que s&#8217;han pujat imatges molt grans en el gestor i despr\u00e9s s&#8217;han incrustat en el text gen\u00e8ric mitjan\u00e7ant el codi html i se&#8217;ls hi ha for\u00e7at una mida m\u00e9s baixa. Aix\u00f2 pot ser perill\u00f3s perqu\u00e8 cal encertar les proporcions o sin\u00f3 es deformar\u00e0 la imatge i perqu\u00e8 tot i aix\u00ed la imatge pesar\u00e0 m\u00e9s del compte i ralentitzar\u00e0 la c\u00e0rrega de la p\u00e0gina. I els usuaris pensaran (i aquesta b\u00edrria d&#8217;imatge triga tant a carregar-se?). Fet ver\u00eddic: ens hem trobat que s&#8217;han publicat en el gestor imatges de m\u00e9s de 1000 p\u00edxels d&#8217;amplada i se les ha for\u00e7at a una amplada de 100 p\u00edxels.<\/p>\n\n\n\n<dl class=\"pir\">\n<dt>Com ho podem evitar?<\/dt>\n<\/dl>\n\n\n\n<dl class=\"pir\">\n<dd>Tenim diverses opcions:<\/dd>\n<\/dl>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tots els programes de retoc fotogr\u00e0fic ofereixen l&#8217;opci\u00f3 de redimensionar la imatge proporcionalment. En aquest cas, definim la mida de l&#8217;amplada desitjada i el programa ens proposar\u00e0 l&#8217;al\u00e7ada \u00f2ptima. Aquesta opci\u00f3 pot implicar que haguem de retallar a posteriori la imatge perqu\u00e8 s&#8217;acabi d&#8217;adaptar a les mides.<\/li>\n\n\n\n<li>Retallar i redimensionar a la vegada. Programes com a Photoshop permeten establir unes mides per retallar la imatge. En el moment en qu\u00e8 seleccionem l&#8217;eina de retallar, apareix un quadre de di\u00e0leg on podem fixar la mida que volem. Una vegada fixades les mides, el requadre que dibuixem amb el cursor s&#8217;adaptar\u00e0 a la proporci\u00f3 desitjada i quan executem l&#8217;ordre de retallar, la imatge es redimensionar\u00e0.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Pes<\/h2>\n\n\n\n<p>Una vegada tenim les mides, hem de rebaixar el pes de la imatge al m\u00ednim possible sense que es perdi la qualitat de la imatge. A photoshop per exemple, existeix l&#8217;opci\u00f3 de &#8220;Guardar para Web y dispositivos&#8221;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Aspectes legals<\/h2>\n\n\n\n<p>Les imatges que publiquem han de ser originals o b\u00e9 hem de tenir-ne els drets per publicar-la. No podem agafar una imatge que haguem trobat a Internet a no ser que provingui d&#8217;una base de dades d&#8217;imatges gratu\u00efta.<\/p>\n\n\n\n<p>Si volem publicar una fotografia on es reconeguin persones, els hi hem de demanar perm\u00eds pr\u00e8viament.<\/p>\n\n\n\n<p>Si necessiteu una imatge de campus, podeu contactar amb nosaltres. Aix\u00ed mateix tamb\u00e9 teniu a la vostra disposici\u00f3 les imatges del <a href=\"http:\/\/ddd.uab.cat\/collection\/fotos?ln=ca\" target=\"_blank\" rel=\"noopener\">Dip\u00f2sit Digital de Documents (DDD)<\/a>.<\/p>\n\n\n\n<p>I ja per acabar, un altre truc sobre retoc fotogr\u00e0fic amb photoshop. Si la imatge que teniu t\u00e9 fons blanc i us agradaria emmarcar-la, nom\u00e9s cal que seleccioneu la imatge i al men\u00fa &#8220;Edici\u00f3n&#8221;, seleccioneu l&#8217;opci\u00f3 &#8220;Contornear&#8221;. S&#8217;obrir\u00e0 una finestra que us demanar\u00e0 que fixeu la mida de la l\u00ednia que es dibuixar\u00e0 i el seu color.<\/p>\n\n\n\n<p>Som conscients que en aquesta entrada hem parlat fonamentalment del Photoshop com a programa de retoc d&#8217;imatges per\u00f2 a la p\u00e0gina de &#8220;<a href=\"https:\/\/webs.uab.cat\/webedit\/2016\/10\/26\/programes-dedicio-dimatges\/\" target=\"_blank\" rel=\"noreferrer noopener\">Programes d&#8217;edici\u00f3 d&#8217;imatges<\/a>&#8221; d&#8217;aquest blog en teniu d&#8217;altres gratu\u00efts.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":24,"featured_media":6560,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,10,7,72],"tags":[26,11,27],"class_list":["post-690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-consells-i-trucs","category-edicio-dimatges","category-normes-destil","category-novetats","tag-format","tag-imatges","tag-optimitzar"],"_links":{"self":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts\/690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/comments?post=690"}],"version-history":[{"count":3,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts\/690\/revisions"}],"predecessor-version":[{"id":6562,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts\/690\/revisions\/6562"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/media\/6560"}],"wp:attachment":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/media?parent=690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/categories?post=690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/tags?post=690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}