{"id":1177,"date":"2015-06-22T00:49:58","date_gmt":"2015-06-22T05:49:58","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1177"},"modified":"2024-11-01T11:44:29","modified_gmt":"2024-11-01T16:44:29","slug":"tips-para-optimizacion-de-imagenes-web","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/tips-para-optimizacion-de-imagenes-web\/","title":{"rendered":"Tips para optimizaci\u00f3n de im\u00e1genes web"},"content":{"rendered":"<p><iframe loading=\"lazy\" width=\"100%\" height=\"110\" frameborder=\"0\" allowfullscreen=\"\" scrolling=\"no\" src=\"http:\/\/www.ivoox.com\/player_ej_5318147_2_1.html?data=lpiempaYe46ZmKiak5aJd6KklJKSmaiRdo6ZmKiakpKJe6ShkZKSmaiRmMrk1JDdw9fFb9Dk1c7ay9%2FFp8qZpJiSpJjSb8XZjM7ah6iXaaKlyMrbx9iPm8bWjoqkpZKuucLijKjO1NHTt4zB0NfOzsrXb7Shhpywj5k%3D&#038;\"><\/iframe><\/p>\n<p>Hace 15 a\u00f1os, Jakob Nielsen terminaba de escribir su libro &ldquo;Usabilidad: dise\u00f1o de sitios Web&rdquo;, una lectura obligatoria para comunicadores, dise\u00f1adores, ingenieros Web y dem\u00e1s profesionales (y no profesionales, como me pasaba) de la \u00e9poca que estaban interesados por la producci\u00f3n Web.<\/p>\n<p>Uno de los t\u00e9rminos que Nielsen expone en su obra hace referencia a los <strong>tiempos de respuesta<\/strong>, que corresponde al momento que transcurre entre la petici\u00f3n del usuario y la respuesta del servidor. En palabras sencillas: los segundos (o minutos) que espera el usuario al dar clic o presionar &ldquo;<em>Enter<\/em>&rdquo; y obtener la respuesta (contenido o acci\u00f3n) del servidor.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<p>Este concepto tambi\u00e9n se presenta en libros sobre arquitectura de informaci\u00f3n, como es el caso del famoso libro del oso polar: &ldquo;Arquitectura de la informaci\u00f3n para la <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/www\/\" rel=\"noopener\" target=\"_blank\"><em>World Wide Web<\/em><\/a>&rdquo; de Morville y Rosenfeld (1988).<\/p>\n<p>Para Nielsen (y tambi\u00e9n para mi) el tiempo de respuesta es un criterio de calidad que est\u00e1 alineado con la satisfacci\u00f3n del usuario. Mientras m\u00e1s corto es valor de la medici\u00f3n, m\u00e1s positiva ser\u00e1 la experiencia.<\/p>\n<p>Hoy, 2015, infortunadamente, sigo encontrando sitios Web que desconocen el concepto. Los tiempos de respuestas (especialmente desde conexiones m\u00f3viles) superan los 10 segundos, alterando dram\u00e1ticamente la experiencia de navegaci\u00f3n.<\/p>\n<p>Por ello decid\u00ed retomar algunos contenidos y experiencias de e-Lexia.com y consolidar un documento electr\u00f3nico que sirva de gu\u00eda para los profesionales que est\u00e1n detr\u00e1s de una estrategia digital. El libro (porque soy ambicioso) a\u00fan no est\u00e1 listo, pero espero terminarlo pronto.<\/p>\n<h2>Consejos para editar im\u00e1genes<\/h2>\n<p>En esta entrada quiero compartir algunas recomendaciones y consejos que he consolidado, producto de investigaciones r\u00e1pidas, observaciones y comparaciones en sitios Web y descubrimiento y experiencia propia.<\/p>\n<p>Los siguientes <em>tips<\/em> ofrecen ideas para producci\u00f3n en redes sociales y sitios Web. Voy a intentar ser expl\u00edcito, indicando cu\u00e1les son exclusivos para redes, cu\u00e1les para sitios Web y cu\u00e1les aplican para ambos. Sin embargo, lo exhorto a profundizar sobre el tema, pues lo que voy a compartir no es una biblia sobre el tema, tanto solo corresponde a un resumen de lo que coment\u00e9 anteriormente.<\/p>\n<p>Comencemos:<\/p>\n<h2>Sobre las caracter\u00edsticas t\u00e9cnicas<\/h2>\n<ul>\n<li>Utilice el formato de imagen m\u00e1s \u00f3ptimo para el tipo de recurso que desea compartir: las fotograf\u00edas quedan bien en <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/jpg\/\" rel=\"noopener\" target=\"_blank\">JPG<\/a>, pues este formato soporta 16.7 millones de colores. Los <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/gif\/\" rel=\"noopener\" target=\"_blank\">GIF<\/a> son ideales para gr\u00e1ficos con menos de 256 colores. Por su parte los <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/png\/\" rel=\"noopener\" target=\"_blank\">PNG<\/a> soportan diferentes profundidades de color y permiten transparencias\u2026 son como un punto intermedio entre el JPG y el GIF<\/li>\n<li>Utilice la optimizaci\u00f3n de im\u00e1genes correcta. Para JPG utilice una compresi\u00f3n de 80% (o equivalente, seg\u00fan el editor utilizado). Para GIF, la paleta de colores que conserve la legibilidad de la imagen, sin evitar la p\u00e9rdida (por falta o superaci\u00f3n) de colores. Para PNG, utilice la profundidad de colores requerida.<\/li>\n<li>Para im\u00e1genes en pantalla utilice una resoluci\u00f3n de 72 puntos por pulgada. Im\u00e1genes para pantalla e impresi\u00f3n (como un bolet\u00edn de prensa), 150 puntos por pulgadas. Im\u00e1genes para impresi\u00f3n (<em>reel<\/em> para prensa, p.e.), 300.<\/li>\n<li>En lo posible, utilice una configuraci\u00f3n de exportaci\u00f3n de entrelazado y progresivo (aplicable para ficheros PNG y JPG, respectivamente). Esta configuraci\u00f3n permite entregar al usuario una respuesta m\u00e1s r\u00e1pida en los tiempos de descarga (aplica para im\u00e1genes al sitio Web).<\/li>\n<li>Conserve las dimensiones (ancho y alto) de acuerdo al uso de la imagen. Para ello, lea el apartado de medidas de imagen para redes sociales.<\/li>\n<\/ul>\n<h3>Reducir el peso de una imagen<\/h3>\n<p>Uno de los criterios que tiene presente Google al valorar la calidad de una p\u00e1gina web es su peso, es decir, la sumatoria del tama\u00f1o de todos los archivos que convergen en ella.<\/p>\n<p>En este video, disponible en <a href=\"https:\/\/www.youtube.com\/user\/juanca826?sub_confirmation=1\">mi canal YouTube<\/a>, explico c\u00f3mo disminuir el tama\u00f1o de una imagen digital, utilizando el servicio TinyPNG.<\/p>\n<div class=\"marco-yt\">\n<div class=\"video yt\">\n<iframe loading=\"lazy\" title=\"C\u00f3mo reducir PESO DE IM\u00c1GENES para la WEB. Herramienta digital gratuita | [EPW]\" width=\"774\" height=\"435\" src=\"https:\/\/www.youtube.com\/embed\/pf6V_cxN7qY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n<p class=\"youtube-video\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/logo-youtube.png\">En el <a href=\"https:\/\/www.youtube.com\/@escuela-digital?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">canal YouTube \u00abEscuela Digital\u00bb<\/a> puedes encontrar m\u00e1s videos sobre el tema.<\/p>\n<h2>Sobre im\u00e1genes para un sitio web:<\/h2>\n<ul>\n<li>El nombre del archivo es\u00a0 coherente con el contenido de la imagen. Por ejemplo: si la fotograf\u00eda representa la entrada a un edificio gubernamental, un buen nombre de archivo ser\u00eda: entrada-gobernacion-sim-city.jpg.<\/li>\n<li>Como se presenta en la recomendaci\u00f3n anterior, el nombre de la imagen utiliza diferentes palabras (las que sean necesarias para mejorar su valor sem\u00e1ntico). Cada una de ellas se separan por guion medio.<\/li>\n<li>El nombre de archivo no contiene marcas de acentos ortogr\u00e1ficos, la letra &ldquo;\u00f1&rdquo; ni cualquier car\u00e1cter especial.<\/li>\n<\/ul>\n<h2>Sobre las im\u00e1genes para Facebook:<\/h2>\n<ul>\n<li>Las dimensiones para la imagen de portada son: 851 x 315 pixeles. Tenga presente una composici\u00f3n horizontal, que brinde espacio para la imagen de perfil (ubicada en la esquina inferior izquierda).<\/li>\n<li>Para la imagen de portada se recomienda no utilizar texto que supere el 20% del \u00e1rea.<\/li>\n<li>La foto de perfil, aunque aparece de 160 x 160 pixeles, tiene una dimensi\u00f3n de 180 x 180 pixeles.<\/li>\n<li>Las im\u00e1genes que acompa\u00f1an publicaciones compartidas (<a href=\"https:\/\/e-lexia.com\/diccionario-tic\/enlace-web\/\" rel=\"noopener\" target=\"_blank\">enlaces<\/a> a un sitio web) miden 1200 x 627 pixeles (composici\u00f3n horizontal) o un tama\u00f1o proporcional, sin superar los 337 x 197 pixeles.<\/li>\n<li>Las im\u00e1genes para publicaciones regulares miden\u00a0 1200 x 1200 pixeles o un tama\u00f1o proporcional, sin superar los 403 x 403 pixeles.<\/li>\n<li>En lo posible, los dos \u00faltimos tipos de im\u00e1genes mencionados no superan el 40% de texto. La informaci\u00f3n adicional se anexa en el mensaje de texto de la publicaci\u00f3n.<\/li>\n<\/ul>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h2>Sobre las im\u00e1genes para Twitter<\/h2>\n<ul>\n<li>Seg\u00fan Twitter, la imagen de portada puede ser JPG, PNG o GIF (sin animaci\u00f3n). La dimensi\u00f3n recomendada es 1500 x 500 pixeles (composici\u00f3n horizontal). Tenga presente la ubicaci\u00f3n de la imagen de perfil (esquina inferior izquierda).<\/li>\n<li>La imagen de perfil mide 400 x 400 pixeles.<\/li>\n<li>La imagen de publicaci\u00f3n con expansi\u00f3n mide entre 440 x 440 pixeles y 1024 x 1024 pixeles. La composici\u00f3n de la vista previa se define en los cuadrantes dos y tres, como se representa a continuaci\u00f3n:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2015\/06\/preview-twitter.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2015\/06\/preview-twitter.gif\" alt=\"preview-twitter\" width=\"331\" height=\"331\" class=\"aligncenter size-full wp-image-1179\" \/><\/a><\/p>\n<ul>\n<li>La imagen de publicaci\u00f3n sin expansi\u00f3n mide 1024 x 512 pixeles (composici\u00f3n horizontal). Este tipo de imagen tiene mayor impacto en Twitter.<\/li>\n<\/ul>\n<h3>Sobre las im\u00e1genes en Instagram<\/h3>\n<ul>\n<li>La imagen de perfil tiene un tama\u00f1o m\u00ednimo de 161 x 161 pixeles.<\/li>\n<li>La imagen en la l\u00ednea de tiempo tiene una dimensi\u00f3n m\u00ednima de 510 x 510 pixeles.<\/li>\n<\/ul>\n<h2>Sobre la l\u00ednea editorial y generalidades<\/h2>\n<p>Estas recomendaciones las escrib\u00ed para un evento que se realiz\u00f3 en la ciudad. La Jefatura de Prensa me pidi\u00f3 escribir (adem\u00e1s de lo anterior) algunas recomendaciones de orden editorial que orientaran a los proveedores de contenidos visual. Recomiendo extrapolar estos contenidos a su realidad.<\/p>\n<ul>\n<li>La\u00a0 l\u00ednea gr\u00e1fica entre la pieza gr\u00e1fica (paleta de colores, uso de logotipos, familia tipogr\u00e1fica) y la imagen del evento guardan coherencia y cohesi\u00f3n.<\/li>\n<li>No se admiten faltan ortogr\u00e1ficas, sint\u00e1cticas y sem\u00e1nticas en ninguna pieza.<\/li>\n<li>La piezas que entreguen resultados de operaci\u00f3n y gesti\u00f3n del evento son aprobadas por la Jefatura de Prensa o la Direcci\u00f3n del Eventos antes de su publicaci\u00f3n.<\/li>\n<li>Salvo convenios comerciales e im\u00e1genes propias del ambiente y contexto de la imagen, no se aceptan logotipos o referencias a marcas diferentes al Evento.<\/li>\n<li>Cada pieza gr\u00e1fica anexa la marca #Evento. Esta marca no supera el 30% del \u00e1rea y presenta amplio contraste.<\/li>\n<li>Se exige el uso de im\u00e1genes (fotograf\u00edas, iconos y cualquier otra representaci\u00f3n gr\u00e1fica) propias o, en su defecto, con licencias de tipo <em>copyleft<\/em>.<\/li>\n<li>Se privilegia el uso de piezas gr\u00e1ficas que usen la fotograf\u00eda como principal recurso comunicativo.<\/li>\n<li>Las fotograf\u00edas tiene alto luminosidad y buen contraste y legibilidad. <\/li>\n<li>Las piezas gr\u00e1ficas tipo <em>collage<\/em> son claras y lo suficientemente legibles para pantallas de dispositivos m\u00f3viles. <\/li>\n<li>Las im\u00e1genes para publicaci\u00f3n en los diferentes medios de Evento son enviadas a la Jefatura de Prensa (o a quien ella defina) con tiempo suficiente (30 minutos) para su revisi\u00f3n, publicaci\u00f3n y distribuci\u00f3n.<\/li>\n<li>Las im\u00e1genes de promoci\u00f3n de eventos (conferencia, lanzamiento, conversatorio, talent\u00f3dromo, entre otros) se entregan a la Jefatura de Prensa (o a quien ella defina) con m\u00ednimo 24 horas de anticipaci\u00f3n.<\/li>\n<li>Toda imagen, independiente del medio que la distribuye, debe anexar una breve descripci\u00f3n que responda a:<\/li>\n<ul>\n<li>Nombres, apellidos y cargo de quienes aparecen en primer plano (si aplica);<\/li>\n<li>descripci\u00f3n del contexto;<\/li>\n<li>ubicaci\u00f3n geogr\u00e1fica;<\/li>\n<li>fecha de la captura (d\u00eda, mes, a\u00f1o);<\/li>\n<li>y dem\u00e1s datos relevantes que el profesional que captura la imagen considere pertinentes.<\/li>\n<\/ul>\n<\/ul>\n<h2>Para terminar:<\/h2>\n<p>Ten presente que la producci\u00f3n de recursos Web no es un tema corto ni sencillo. Es apasionante, eso s\u00ed. Hay que trabajar d\u00eda y noche, estudiar, leer, ensayar, tomar nota y volver a empezar. Como mencion\u00e9, esta entrada no es la gu\u00eda definitiva, es un punto de consulta e inicio.<\/p>\n<p>Por \u00faltimo, te invito a leer mi libro <a href=\"https:\/\/itunes.apple.com\/co\/book\/youtube-publicacion-contenidos\/id953883871?l=en&#038;mt=11\" target=\"_blank\" rel=\"noopener noreferrer\">&ldquo;YouTube: Publicaci\u00f3n de Contenidos<\/a>, que realic\u00e9 en co-autor\u00eda con la comunicadora audiovisual Yury Eliana Baena.<\/p>\n<p>\u00bfTienes alguna otra recomendaci\u00f3n? D\u00e9jala en los comentarios\u2026 siempre respondo.<\/p>\n<div class=\"destacado-libro\">\n<div class=\"destacado-libro__imagen\">\n  <a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/04\/libro-prodccion-contenidos-web.jpg\" alt=\"Producci\u00f3n de contenidos web. Libro gratuito. Autor: Juan Carlos Morales S.\"><\/a>\n <\/div>\n<div class=\"destacado-libro__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Producci\u00f3n de contenidos web<\/a><\/h2>\n<p>  Descarga este libro electr\u00f3nico de acceso libre, donde se presentan recomendaciones de producci\u00f3n multimedia.<br \/>\n  <a class=\"cta-libro\" href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Obtener una copia<\/a>\n <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hace 15 a\u00f1os, Jakob Nielsen terminaba de escribir su libro &ldquo;Usabilidad: dise\u00f1o de sitios Web&rdquo;, una lectura obligatoria para comunicadores, dise\u00f1adores, ingenieros Web y dem\u00e1s profesionales (y no profesionales, como me pasaba) de la \u00e9poca que estaban interesados por la producci\u00f3n Web. Uno de los t\u00e9rminos que Nielsen expone en&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1588,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[59,66],"class_list":["post-1177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-estrategias","tag-hipermedia","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1177"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1177\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1588"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}