{"id":226,"date":"2023-05-15T07:21:05","date_gmt":"2023-05-15T07:21:05","guid":{"rendered":"https:\/\/blog.hostinger.io\/es\/support\/2023\/05\/15\/6466243-hostinger-creador-de-sitios-web-diseno-web-adaptable-y-tamano-de-las-imagenes\/"},"modified":"2023-05-15T07:21:05","modified_gmt":"2023-05-15T07:21:05","slug":"6466243-hostinger-creador-de-sitios-web-diseno-web-adaptable-y-tamano-de-las-imagenes","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/es\/support\/6466243-hostinger-creador-de-sitios-web-diseno-web-adaptable-y-tamano-de-las-imagenes\/","title":{"rendered":"Hostinger Creador de Sitios Web: Dise\u00f1o Web Adaptable y Tama\u00f1o de las Im\u00e1genes"},"content":{"rendered":"<p class=\"no-margin\">Todas las plantillas de sitios web que est&aacute;n disponibles con <b><a href=\"https:\/\/www.hostinger.es\/creador-de-paginas-web\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Creador de Sitios Web de Hostinger<\/a><\/b> siguen un <b><a href=\"https:\/\/www.hostinger.com\/tutorials\/website-terminology#Responsiveness\" target=\"_blank\" class=\"intercom-content-link\">dise&ntilde;o web responsivo<\/a><\/b> que garantiza la mejor experiencia de usuario en todos los dispositivos. El dise&ntilde;o web responsivo significa que el contenido de su sitio web se <b>adaptar&aacute; autom&aacute;ticamente<\/b> &ndash; se estirar&aacute; o encoger&aacute; ligeramente &ndash; <b>dependiendo de las propiedades del dispositivo del visitante de su sitio web<\/b> (su tama&ntilde;o de pantalla, resoluci&oacute;n, etc.).<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">En otras palabras, el dise&ntilde;o web con capacidad de respuesta crea cambios din&aacute;micos en la apariencia de un sitio web en funci&oacute;n del dispositivo que se utilice para verlo. As&iacute;, todos los elementos de su sitio web se ver&aacute;n bien para todos los usuarios. <\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Significa que <b>no hay un conjunto de dimensiones para el tama&ntilde;o de imagen perfecto<\/b>. Aunque no existe un tama&ntilde;o de imagen &oacute;ptimo para los elementos de imagen ni para las im&aacute;genes de fondo de secci&oacute;n, puede <b><a href=\"\/es\/support\/6491230-creador-de-sitios-web-como-cambiar-el-tamano-de-elementos-y-secciones\" target=\"_blank\" class=\"intercom-content-link\">cambiar manualmente el tama&ntilde;o de los elementos de imagen y las secciones<\/a><\/b> dentro del constructor como desee.<\/p><p class=\"no-margin\">\n<\/p><h1 id=\"h_ed6b0540df\">Notas y consejos<\/h1><ul>\n<li>\n<p class=\"no-margin\">El tama&ntilde;o m&aacute;ximo de archivo de imagen admitido es de <b>15 MB<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">El formato de archivo de imagen recomendado es <b>.webp<\/b>, pero el constructor admite otros formatos (excepto <b>.heic<\/b>)<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Algunas herramientas de auditor&iacute;a SEO comprueban el formato de archivo de imagen y marcar&iacute;an una imagen <b>.png<\/b> o <b>.jpg<\/b> porque esperan formatos modernos como <b>.webp<\/b> o <b>.avif<\/b><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p class=\"no-margin\">El constructor no cambia\/convierte los formatos de imagen, pero <b>comprime las im&aacute;genes<\/b>, por ejemplo, la <b><a href=\"https:\/\/assets.zyrosite.com\/YanOrZx36wUk8XVJ\/12123231-Y4LlaDGvaDI4yxOv.jpg\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">imagen original<\/a><\/b> y la <b><a href=\"https:\/\/assets.zyrosite.com\/cdn-cgi\/image\/format=auto,w=282,fit=crop\/YanOrZx36wUk8XVJ\/12123231-Y4LlaDGvaDI4yxOv.jpg\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">imagen comprimida<\/a><\/b>; la imagen comprimida tiene menor calidad y una escala m&aacute;s peque&ntilde;a, pero por otro lado, la imagen comprimida pesa 5 kB, mientras que la original pesa 64 kB, lo que aumenta la velocidad de carga de la p&aacute;gina<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Evite las im&aacute;genes con bordes excesivos; por ejemplo, las im&aacute;genes anteriores tienen bordes negros redundantes que aumentan su anchura: esto afecta a la compresi&oacute;n, ya que es imposible saber si los bordes aportan alg&uacute;n valor o no, por lo que reduce la escala de toda la imagen manteniendo la relaci&oacute;n de aspecto<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">El tama&ntilde;o recomendado de la <b><a href=\"\/es\/support\/6466412-creador-de-sitios-web-como-agregar-imagenes-de-vista-previa-de-enlaces\" target=\"_blank\" class=\"intercom-content-link\">imagen de previsualizaci&oacute;n del enlace<\/a><\/b> es <b>1200&times;630 PX<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">El formato de <b><a href=\"\/es\/support\/6435805-creador-de-sitios-web-como-agregar-o-cambiar-el-logo\" target=\"_blank\" class=\"intercom-content-link\">logotipo<\/a><\/b> recomendado es <b>.png <\/b>o <b>.svg<\/b>, ya que los logotipos suelen ser transparentes<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">El tama&ntilde;o de <b><a href=\"\/es\/support\/6811698-creador-de-sitios-web-como-cambiar-las-proporciones-de-las-imagenes-de-los-productos\" target=\"_blank\" class=\"intercom-content-link\">imagen de producto<\/a><\/b> recomendado es <b>600&times;600<\/b> o <b>900&times;900 PX<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Evite subir im&aacute;genes cuyos t&iacute;tulos contengan espacios o caracteres especiales o no latinos<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Evite utilizar GIF, ya que pueden ralentizar la p&aacute;gina<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda c\u00f3mo se gestionan los elementos visuales con Creador de Sitios Web de Hostinger<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[257],"tags":[],"class_list":["post-226","post","type-post","status-publish","format-standard","hentry","category-diseno"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6466243-hostinger-website-builder-responsive-web-design-and-image-size\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6466243-hostinger-creador-de-sitios-web-diseno-web-adaptable-y-tamano-de-las-imagenes\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6466243-hostinger-createur-de-site-web-conception-web-reactive-et-taille-de-l-image\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6466243-hostinger-website-builder-responsive-web-design-dan-ukuran-gambar\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6466243-svetainiu-kurimo-irankis-hostinger-adaptyvusis-svetaines-dizainas-ir-rekomendacijos-vizualams\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6466243-hostinger-criador-de-sites-design-visual-responsivo-e-tamanho-de-imagem\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}