{"id":6723,"date":"2019-09-11T06:00:06","date_gmt":"2019-09-11T09:00:06","guid":{"rendered":"https:\/\/nicholastinelli.com\/es\/?p=6723"},"modified":"2025-08-21T10:46:04","modified_gmt":"2025-08-21T13:46:04","slug":"como-optimizar-imagenes-para-la-web-con-photoshop","status":"publish","type":"post","link":"https:\/\/nicholastinelli.com\/es\/como-optimizar-imagenes-para-la-web-con-photoshop\/","title":{"rendered":"Como optimizar im\u00e1genes para la web con Photoshop"},"content":{"rendered":"

\u00bfSab\u00edas que si las p\u00e1ginas de tu sitio tardan m\u00e1s de 3 segundos<\/strong> en cargarse, el usuario pierde inter\u00e9s<\/strong> y se va?<\/span><\/p>\n

\"estadistica<\/p>\n

M\u00e1s tiempo de carga<\/span><\/em><\/strong> ——<\/span>>><\/span><\/strong><\/span> M<\/strong><\/em>enos clientes<\/em><\/strong><\/span> ——<\/span>>><\/span><\/strong><\/span> M<\/strong><\/em>enos ingresos para tu negocio<\/em><\/strong><\/span><\/span><\/p>\n

En este art\u00edculo, te explicar\u00e9 c\u00f3mo optimizar im\u00e1genes para la web con Photoshop<\/strong> y por qu\u00e9 es tan importante para tu sitio.<\/span><\/p>\n

\n

 <\/p>\n

Las im\u00e1genes<\/strong> son uno de los elementos que m\u00e1s ralentiza<\/strong> este proceso. <\/span><\/p>\n

As\u00ed que la pregunta surge espont\u00e1neamente: puedo prescindir de ellas?<\/span><\/p>\n

No. Un estudio de investigaci\u00f3n muestra que m\u00e1s del 80% de las personas<\/strong> se inclinan a leer contenido si presenta im\u00e1genes <\/strong>y el 64% tendr\u00e1n una mayor memoria de lo que han le\u00eddo.<\/strong><\/span><\/p>\n

La \u00fanica soluci\u00f3n es una buena optimizaci\u00f3n!<\/strong><\/em><\/span><\/p>\n

Despu\u00e9s de mucho trabajo para construir tu sitio y consolidar tu idea, entre la elecci\u00f3n del hosting, la estructura y los textos a insertar, estoy seguro de que no querr\u00e1s equivocarte aqu\u00ed, insertando im\u00e1genes pesadas, que empeorar\u00e1n la experiencia del usuario. <\/span><\/p>\n

Esto es a\u00fan m\u00e1s cierto si sos un fot\u00f3grafo y las im\u00e1genes representan una parte importante de tu sitio.<\/span><\/p>\n

Piensa en ti mismo:<\/span><\/p>\n

\u00bfNo pierdes la paciencia<\/strong> cuando un sitio tarda demasiado en cargarse<\/strong>? \u00a1Estoy seguro que s\u00ed! <\/span><\/p>\n

L<\/strong>o mismo ocurre con tus visitantes!!<\/strong><\/span><\/p>\n

\"Usuario<\/p>\n

Tendr\u00e1s que mantener la calidad alta<\/strong> y reducir el peso considerablemente<\/strong>.\u00a0<\/span><\/p>\n

\u00bfQu\u00e9 beneficios obtendr\u00e1s con una buena optimizaci\u00f3n?<\/strong><\/em><\/span><\/h2>\n

1. Mejorar la carga de las p\u00e1ginas de tu sitio<\/strong> con visitantes felices que tendr\u00e1n acceso r\u00e1pido a tu contenido;<\/span><\/p>\n

\"Cliente<\/p>\n

2. Con archivos m\u00e1s livianos tambi\u00e9n ver\u00e1s una mejora en la SEO<\/strong> (Search Engine Optimization<\/em>).<\/span><\/p>\n

El algoritmo de Google tiende a posicionar antes y mejor las im\u00e1genes m\u00e1s livianas<\/strong>, y los motores de b\u00fasqueda<\/strong> generalmente prefieren los sitios<\/strong> que son livianos y r\u00e1pidos de cargar<\/strong>.<\/span><\/p>\n

3. Copias de backup m\u00e1s r\u00e1pidas<\/strong> y menos espacio en el servidor<\/strong>. La elecci\u00f3n del alojamiento tambi\u00e9n afectar\u00e1 al rendimiento del sitio.<\/span><\/p>\n

\u00bfSabes cu\u00e1l es el tiempo de carga de tu sitio?<\/strong><\/em><\/span><\/h2>\n

Puedes controlarlo con algunas de las herramientas gratuitas<\/strong> disponibles en la web:<\/span><\/p>\n

1. PageSpeed Insights<\/em><\/a><\/span><\/p>\n

2. Page Weight<\/em><\/a><\/span><\/p>\n

3. GTmetrix<\/em><\/a><\/span><\/p>\n

4. Pingdom<\/em><\/a><\/span><\/p>\n

5. Google Web Page Test<\/em><\/a><\/span><\/p>\n

6. Varvy<\/em><\/a><\/span><\/p>\n

Dicho esto, es importante tener en cuenta cu\u00e1l es el peso y la resoluci\u00f3n ideal para una imagen web<\/strong>: entre 80<\/strong> y 400 KB<\/strong>, con una resoluci\u00f3n est\u00e1ndar es de 72 PPI<\/strong> (p\u00edxeles por pulgada).<\/span><\/p>\n

Acu\u00e9rdate que cada imagen es diferente y algunas de mayor calidad, con una textura detallada y muchos colores, ser\u00e1n m\u00e1s dif\u00edciles de reducir.<\/span><\/p>\n

Las medidas finales depender\u00e1n de c\u00f3mo las utilices<\/strong>. Por ejemplo, la imagen de la portada de la p\u00e1gina principal de mi sitio, tiene un tama\u00f1o mayor en p\u00edxeles que el que insert\u00e9 en un box de ilustraci\u00f3n de servicios (fotos abajo).<\/span><\/p>\n

\"Page<\/p>\n

\"Page<\/p>\n

 <\/p>\n

 <\/p>\n

La extensi\u00f3n Chrome Page Ruler, que utilic\u00e9 para el ejemplo anterior, puede ayudarte a entender y elegir el tama\u00f1o de los elementos de una p\u00e1gina web<\/strong>, haciendo tu trabajo m\u00e1s f\u00e1cil.\u00a0<\/span><\/p>\n

Una vez aclarada la parte te\u00f3rica, pasemos a la parte pr\u00e1ctica<\/strong>:<\/span><\/p>\n

\u00bfC\u00f3mo optimizar las im\u00e1genes de tu sitio web con Photoshop sin perder calidad?<\/strong><\/em><\/span><\/h2>\n

Utiliza la herramienta \u00abGuardar para web\u00bb.<\/span><\/strong><\/em><\/span><\/p>\n

La encontras en el men\u00fa superior: <\/span><\/p>\n

Archivo<\/strong>\u00a0——<\/span>>><\/strong><\/span> Exportar<\/strong>\u00a0——<\/span>>><\/strong><\/span> Guardar para web (heredado)<\/strong><\/span><\/p>\n

\"Optimizar<\/p>\n

Se abrir\u00e1 una ventana en la que podr\u00e1s ver las diferentes opciones:<\/span><\/p>\n

– Elecci\u00f3n del formato<\/strong> (JPEG<\/strong><\/em>);<\/span><\/p>\n

– Calidad de imagen<\/strong>, de 0 a 100. Valor que afectar\u00e1 el peso y la calidad. En general, aplico un valor entre 40 y 60. Por debajo de 40, en la mayor\u00eda de los casos la p\u00e9rdida de detalles y la degradaci\u00f3n de los colores es evidente;<\/span><\/p>\n

– Progresivo<\/strong> (permite la carga progresiva de la imagen en la p\u00e1gina web);<\/span><\/p>\n

– Incrustar perfil de color<\/strong>: marcar s\u00ed;<\/span><\/p>\n

– Convertir en sRGB<\/strong> (Es el espacio de color ideal para uso web. Ten cuidado de no marcar la casilla si la imagen ya est\u00e1 en sRGB);<\/span><\/p>\n

– Posibilidad de elegir qu\u00e9 metadatos insertar<\/strong>. Esta informaci\u00f3n puede incluir los derechos de autor, d\u00f3nde, cu\u00e1ndo y con qu\u00e9 valores se tom\u00f3 la fotograf\u00eda.<\/span><\/p>\n

\"Optimizar<\/p>\n

Al lado ver\u00e1s las vistas previas de la imagen: la versi\u00f3n original<\/strong> y la versi\u00f3n final<\/strong>, con las dimensiones.<\/span><\/p>\n

Una vez que hayas elegido los valores, todo lo que tienes que hacer es guardar la imagen<\/strong> y renombrarla con tus palabras clave principales<\/strong>, lista para ser subida a la web. Google tambi\u00e9n busca palabras clave en la descripci\u00f3n de la imagen, as\u00ed como en el texto ALT<\/strong>. Si los introduces correctamente, como en el ejemplo debajo, favorecer\u00e1 el posicionamiento SEO de tus im\u00e1genes<\/strong> en los buscadores<\/strong>.<\/span><\/p>\n

\"image<\/p>\n

 <\/p>\n

\u00bfTodav\u00eda no est\u00e1s satisfecho? Tienes un sitio en WordPress y quieres reducir a\u00fan m\u00e1s tus archivos de un 5-10%?<\/strong><\/em><\/span><\/h2>\n

Puedes usar algunos plugins de compresi\u00f3n<\/strong> como Imagify<\/a>, Smush Image Optimization<\/a> o Short Pixel<\/a>.<\/span><\/p>\n

Lo ideal es servir las im\u00e1genes tambi\u00e9n en WebP<\/em><\/a><\/span> a trav\u00e9s de uno de estos plugins de WordPress. Actualmente, la mayor\u00eda de los navegadores web son compatibles con WebP.<\/p>\n

Consejo:<\/strong><\/em> No sobre-comprimas, el uso excesivo puede afectar negativamente a la imagen<\/strong> y deteriorar sus colores. Esto es muy importante, especialmente si trabajas en el campo de la fotograf\u00eda.<\/span><\/p>\n

\n

 <\/p>\n

Saber<\/strong> c\u00f3mo optimizar las im\u00e1genes para la web <\/strong>con Photoshop o otras herramientas de tu elecci\u00f3n es esencial<\/strong> para hacer que tu sitio sea r\u00e1pido y funcional. Puedes reducir el tama\u00f1o de tus archivos en persona o confiar en un desarrollador competente que tenga en cuenta estos aspectos, que son cruciales para los motores de b\u00fasqueda<\/strong> y para la experiencia del usuario<\/strong> en tu sitio, as\u00ed como para el crecimiento de tu negocio<\/strong>.<\/span><\/p>\n

Si te interesa profundizar tus conocimientos de Photoshop podes echar un vistazo a mi propuesta formativa<\/a>. Si <\/span>tienes alguna pregunta al respecto o sobre el art\u00edculo, puedes escribirme en los comentarios debajo o a trav\u00e9s del formulario de contacto<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

\u00bfSab\u00edas que si las p\u00e1ginas de tu sitio tardan m\u00e1s de 3 segundos en cargarse, el usuario pierde inter\u00e9s y se va? M\u00e1s tiempo de carga ——>> Menos clientes ——>> Menos ingresos para tu negocio En este art\u00edculo, te explicar\u00e9 c\u00f3mo optimizar im\u00e1genes para la web con Photoshop y por qu\u00e9 es tan importante para … Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":2,"featured_media":10392,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"no","footnotes":""},"categories":[226,229],"tags":[535,426,431,339,432],"class_list":["post-6723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-photoshop-es","category-seo-es","tag-optimizar-imagenes-para-la-web","tag-photoshop-es-2","tag-seo-es-2","tag-velocidad-sitio","tag-wordpress-es-2"],"modified_by":"Nicholas Tinelli","_links":{"self":[{"href":"https:\/\/nicholastinelli.com\/es\/wp-json\/wp\/v2\/posts\/6723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nicholastinelli.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nicholastinelli.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nicholastinelli.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nicholastinelli.com\/es\/wp-json\/wp\/v2\/comments?post=6723"}],"version-history":[{"count":0,"href":"https:\/\/nicholastinelli.com\/es\/wp-json\/wp\/v2\/posts\/6723\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nicholastinelli.com\/es\/wp-json\/wp\/v2\/media\/10392"}],"wp:attachment":[{"href":"https:\/\/nicholastinelli.com\/es\/wp-json\/wp\/v2\/media?parent=6723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nicholastinelli.com\/es\/wp-json\/wp\/v2\/categories?post=6723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nicholastinelli.com\/es\/wp-json\/wp\/v2\/tags?post=6723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}