{"id":3516,"date":"2017-07-13T11:38:40","date_gmt":"2017-07-13T09:38:40","guid":{"rendered":"http:\/\/bluekea.com\/blog\/?p=3516"},"modified":"2021-03-01T17:20:28","modified_gmt":"2021-03-01T16:20:28","slug":"preparar-fotos-para-fondo-de-web","status":"publish","type":"post","link":"https:\/\/bluekea.com\/blog\/tecnica-digital\/preparar-fotos-para-fondo-de-web","title":{"rendered":"Como prevenir el recorte de fotos para fondo de web"},"content":{"rendered":"

Un elemento muy com\u00fan actualmente en el dise\u00f1o de webs de fotograf\u00eda es la imagen de fondo ocupando todo el espacio en pantalla. Es un recurso visualmente muy atractivo cuando se hace bien. Es importante en estos casos tener en cuenta algunas recomendaciones.<\/p>\n

El recorte de las fotos<\/h3>\n

Tenemos que tener presente que cualquier imagen que ocupe toda una pantalla va a sufrir alg\u00fan tipo de recorte inevitablemente. Este recorte depende de la diferencia entre la relaci\u00f3n de anchura y altura de la foto respecto a la pantalla. Es decir, una foto horizontal de relaci\u00f3n 3\/2 no sufrir\u00e1 mucho recorte en una pantalla de ordenador, que tiene una proporci\u00f3n \u00a0similar entre anchura y altura. Sin embargo, esa misma foto vista en un m\u00f3vil en posici\u00f3n vertical sufrir\u00e1 un recorte importante en los laterales.<\/p>\n

Fotos verticales<\/h3>\n

En las im\u00e1genes con formato vertical el recorte se produce en los extremos superior e inferior cuando la foto se muestra en pantallas con formato horizontal.<\/p>\n

\"\"
\nFoto vertical en m\u00f3vil. El resultado es bueno<\/h5>\n

 <\/p>\n

\"\"<\/p>\n

La misma foto en PC queda recortada<\/h5>\n

 <\/p>\n

Fotos horizontales<\/h3>\n

En este tipo de fotos el recorte principal se produce en los laterales cuando la foto se muestra en pantallas con formato vertical, es decir en m\u00f3viles o tablets en dicha posici\u00f3n.<\/p>\n

\"\"
\nFoto horizontal en PC. El resultado es correcto.<\/h5>\n

 <\/p>\n

\"\"<\/p>\n

La misma foto en m\u00f3vil sufre un fuerte recorte.<\/h5>\n

 <\/p>\n

 <\/p>\n

La soluci\u00f3n: fotos con motivo centrado<\/h3>\n

La mejor estrategia es escoger im\u00e1genes que, siendo verticales u horizontales, admitan recorte tanto en los laterales como en las zonas superior e inferior sin que por ello queden desvirtuadas. Esto se consigue cuando el motivo principal est\u00e1 centrado en la foto y queda un margen de espacio negativo relativamente amplio a su alrededor. La zona que queda a salvo de recortes en cualquier tipo de pantalla es lo que llamamos zona segura<\/strong>, y depende del formato de la imagen.<\/p>\n

\"\"<\/p>\n

La parte sombreada corresponde al recorte en pantallas horizontales y verticales.
\nEl centro queda a salvo de recortes. Es lo que llamamos zona segura<\/span>.<\/h5>\n

\"\"<\/p>\n

La zona segura en una foto vertical.<\/h5>\n

 <\/p>\n

\"\"<\/p>\n

El resultado en m\u00f3vil de una foto con la zona segura centrada.<\/h5>\n

 <\/p>\n

\"\"<\/p>\n

El resultado en PC de una foto con la zona segura centrada.<\/h5>\n

 <\/p>\n

Si tu imagen favorita no cumple estos requisitos, puedes intentar recortarla para situar el motivo principal en el centro del encuadre. Una vez subida la foto te aconsejamos comprobar c\u00f3mo queda en tu m\u00f3vil, tablet y PC. Tambi\u00e9n puedes desde tu PC redimensionar la ventana del navegador a distintos tama\u00f1os y formatos y ver c\u00f3mo la imagen se va adaptando.<\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Un elemento muy com\u00fan actualmente en el dise\u00f1o de webs de fotograf\u00eda es la imagen de fondo ocupando todo el espacio en pantalla. Es un recurso visualmente muy atractivo cuando se hace bien. Es importante en estos casos tener en … Sigue leyendo →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3524,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnica-digital"],"_links":{"self":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/3516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/comments?post=3516"}],"version-history":[{"count":22,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/3516\/revisions"}],"predecessor-version":[{"id":3548,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/3516\/revisions\/3548"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media\/3524"}],"wp:attachment":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media?parent=3516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/categories?post=3516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/tags?post=3516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}