Redimensionar Imagen para Sitio Web — Portadas, Blog y Open Graph en Una Herramienta

La mayoría de las imágenes web se publican con el tamaño que exportó la cámara o el diseñador —a menudo 4000 píxeles de ancho para un hueco que se muestra a 800—. El visitante paga ese desperdicio con páginas lentas. Esta herramienta gratuita trae como botones los tamaños que los sitios usan de verdad: portadas de 1920×1080, tarjetas Open Graph de 1200×630, imágenes destacadas de blog de 1200×800 y los tamaños clásicos de contenido. Sube, elige el hueco al que va la imagen y descarga un archivo que encaja exacto.

Todo funciona en tu navegador —privado, sin marca de agua y sin límites— y la exportación en WebP puede recortar otro cuarto o tercio del peso frente al JPG con la misma calidad.

Ajusta el archivo al hueco, no a la cámara

La regla de las imágenes web es sencilla: un archivo debería acercarse lo máximo posible al tamaño al que se mostrará. Una portada que cruza la pantalla pide 1920×1080: suficiente para monitores Full HD, inútil más allá para una portada estándar. La imagen destacada de un blog suele mostrarse entre 800 y 1200 píxeles de ancho, así que el tamaño 1200×800 (3:2) cubre pantallas retina sin inflar. Las fotos dentro del artículo viven en una columna de 700–900 px: 1024×768 u 800×600 sobran. Y el Open Graph de 1200×630 es lo que Facebook, LinkedIn, WhatsApp y Slack descargan cuando tu página se comparte: si falta, la vista previa será un recorte aleatorio de lo primero que encuentre el robot.

Por qué esto es SEO, no solo orden

Google mide tus páginas con datos de usuarios reales, y el Largest Contentful Paint (LCP) —normalmente la imagen de portada o la destacada— es una señal de posicionamiento central. Una portada sobredimensionada es la herida de LCP autoinfligida más común: una foto de 1,5 MB donde un redimensionado de 250 KB se vería idéntico. Redimensionar al tamaño de muestra y exportar en WebP al 80–90 % suele quitar entre el 70 y el 85 % del peso de las imágenes. Páginas más rápidas posicionan mejor, convierten mejor y cuestan menos de alojar. Hazlo al subir, siempre, y la disciplina se acumula en toda tu biblioteca de medios.

Rellenar, encajar y la imagen responsiva

Rellenar recorta por el centro hasta la relación del hueco: ideal para portadas e imágenes destacadas, donde manda el aspecto a todo ancho y el centro de la foto cuenta la historia. Encajar conserva enteros diagramas, capturas y fotos de producto, rellenando con tu color de marca. Los sitios modernos sirven además varias tallas de una misma imagen con srcset, para que el móvil descargue archivos pequeños y el escritorio grandes: exporta el mismo original a 1920, 1200 y 800 de ancho con esta herramienta y tendrás un juego responsivo en menos de un minuto. Uses el modo que uses, guarda el original archivado: del maestro siempre puedes bajar; hacia arriba, nunca.

Favicons: el extremo pequeño de la escala

En el extremo contrario viven los iconos: navegadores y teléfonos piden archivos cuadrados desde 16 px hasta 512 px (el tamaño de icono PWA). Nuestro redimensionador 512×512 está ajustado justo a ese mundo. Entre la portada y el favicon, los botones de esta página cubren los tamaños de trabajo de un sitio normal: sin licencia de Photoshop, sin colas de subida y sin adivinar.

Y el correo electrónico, que también es web

Un tamaño invitado que suele olvidarse: el de los boletines. La mayoría de los clientes de correo muestra las imágenes a 600–700 píxeles de ancho, así que exportar a 1200 de ancho —el doble, para pantallas retina— produce un único archivo que sirve para la campaña y para la versión blog de la misma historia. Lo mismo con las cuadrículas de tiendas y galerías: un juego coherente de cuadrados de 800×800 hace que una tienda parezca cuidada en vez de caótica.

Herramientas relacionadas

Redimensionar para Facebook · Redimensionar a 512×512 · English version: Website Image Resizer · Conversor de Imágenes WebP a PNG Gratis · Herramientas Gratis en Español.

Inserta esta herramienta en tu web — gratis

Copia el código de abajo para añadir esta herramienta funcional a tu propia página. Solo pedimos que mantengas el pequeño enlace de crédito que la acompaña.

<iframe srcdoc="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;es&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Redimensionar Imagen para Sitio Web&lt;/title&gt; &lt;style&gt; body{font-family:Arial,sans-serif;background-color:#f4f4f9;padding:16px;margin:0} .container{background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);max-width:680px;margin:0 auto} h2{margin:0 0 6px;color:#0f3d3e;font-size:22px} p.sub{margin:0 0 14px;color:#555;font-size:14px} label{font-weight:600;font-size:14px;display:block;margin:10px 0 4px} input[type=text],input[type=number],select{width:100%;box-sizing:border-box;padding:11px;font-size:16px;border:1px solid #cbd5e1;border-radius:6px;background:#fff} .row{display:flex;gap:10px;flex-wrap:wrap} .row&gt;*{flex:1;min-width:140px} button{background:#0f766e;color:#fff;border:0;padding:11px 22px;font-size:16px;border-radius:6px;cursor:pointer;margin-top:12px} button:hover{background:#115e59} button:disabled{background:#94a3b8;cursor:wait} #status{font-size:13px;color:#666;margin-top:10px;min-height:16px} .err{color:#b91c1c} .card{border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;margin-top:12px;background:#f8fafc} .big{font-size:26px;font-weight:700;color:#0f3d3e} table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px} th,td{text-align:left;padding:7px 8px;border-bottom:1px solid #e2e8f0} th{color:#0f3d3e} .bar{height:10px;background:#e2e8f0;border-radius:5px;overflow:hidden} .bar&gt;i{display:block;height:100%;background:#0f766e} img.cover{max-width:120px;border-radius:6px} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;h2&gt;Redimensionar Imagen para Sitio Web&lt;/h2&gt; &lt;p class=&quot;sub&quot;&gt;Los tamaños que los sitios web usan de verdad: portadas, tarjetas Open Graph, imágenes destacadas de blog y fotos de contenido.&lt;/p&gt; &lt;label&gt;1. Elige tu imagen&lt;/label&gt; &lt;input type=&quot;file&quot; id=&quot;file&quot; accept=&quot;image/*&quot;&gt; &lt;div id=&quot;meta&quot; class=&quot;card&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; &lt;label&gt;2. Elige un tamaño (o escribe el tuyo abajo)&lt;/label&gt; &lt;div id=&quot;chips&quot;&gt;&lt;/div&gt; &lt;div class=&quot;row&quot;&gt; &lt;div&gt;&lt;label&gt;Ancho (px)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;w&quot; min=&quot;1&quot; max=&quot;12000&quot;&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Alto (px)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;h&quot; min=&quot;1&quot; max=&quot;12000&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row&quot;&gt; &lt;div&gt;&lt;label&gt;Cómo encaja la imagen&lt;/label&gt;&lt;select id=&quot;mode&quot;&gt; &lt;option value=&quot;fill&quot;&gt;Rellenar — recorta para cubrir todo el marco&lt;/option&gt; &lt;option value=&quot;fit&quot;&gt;Encajar — imagen completa, barras si hace falta&lt;/option&gt; &lt;option value=&quot;stretch&quot;&gt;Estirar — fuerza el tamaño exacto (puede deformar)&lt;/option&gt; &lt;/select&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Color de las barras / fondo (modo Encajar)&lt;/label&gt;&lt;select id=&quot;bg&quot;&gt; &lt;option value=&quot;#ffffff&quot;&gt;Blanco&lt;/option&gt; &lt;option value=&quot;#000000&quot;&gt;Negro&lt;/option&gt; &lt;option value=&quot;transparent&quot;&gt;Transparente (PNG / WebP)&lt;/option&gt; &lt;/select&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row&quot;&gt; &lt;div&gt;&lt;label&gt;Formato de descarga&lt;/label&gt;&lt;select id=&quot;fmt&quot;&gt; &lt;option value=&quot;image/jpeg&quot;&gt;JPG&lt;/option&gt; &lt;option value=&quot;image/png&quot;&gt;PNG&lt;/option&gt; &lt;option value=&quot;image/webp&quot;&gt;WebP&lt;/option&gt; &lt;/select&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Calidad % (JPG / WebP)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;q&quot; min=&quot;30&quot; max=&quot;100&quot; value=&quot;90&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;button id=&quot;go&quot; disabled&gt;Redimensionar y previsualizar&lt;/button&gt; &lt;div id=&quot;status&quot;&gt;&lt;/div&gt; &lt;div id=&quot;out&quot; style=&quot;margin-top:12px&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;script&gt; function sendH(){ try { parent.postMessage({wpcId: 6435, wpcH: document.body.scrollHeight + 16}, &#x27;*&#x27;); } catch (e) {} } window.addEventListener(&#x27;load&#x27;, sendH); window.addEventListener(&#x27;resize&#x27;, sendH); var T = {&quot;upload&quot;: &quot;1. Elige tu imagen&quot;, &quot;preset&quot;: &quot;2. Elige un tamaño (o escribe el tuyo abajo)&quot;, &quot;width&quot;: &quot;Ancho (px)&quot;, &quot;height&quot;: &quot;Alto (px)&quot;, &quot;mode&quot;: &quot;Cómo encaja la imagen&quot;, &quot;fill&quot;: &quot;Rellenar — recorta para cubrir todo el marco&quot;, &quot;fit&quot;: &quot;Encajar — imagen completa, barras si hace falta&quot;, &quot;stretch&quot;: &quot;Estirar — fuerza el tamaño exacto (puede deformar)&quot;, &quot;bg&quot;: &quot;Color de las barras / fondo (modo Encajar)&quot;, &quot;white&quot;: &quot;Blanco&quot;, &quot;black&quot;: &quot;Negro&quot;, &quot;transparent&quot;: &quot;Transparente (PNG / WebP)&quot;, &quot;format&quot;: &quot;Formato de descarga&quot;, &quot;quality&quot;: &quot;Calidad % (JPG / WebP)&quot;, &quot;go&quot;: &quot;Redimensionar y previsualizar&quot;, &quot;meta&quot;: &quot;Imagen original: {w} × {h} px&quot;, &quot;done&quot;: &quot;Listo: {w} × {h} px, unos {kb} KB.&quot;, &quot;dl&quot;: &quot;Descargar&quot;, &quot;err&quot;: &quot;Algo salió mal: prueba con otro formato.&quot;}; //__CORE_START__ var PRESETS = [{&quot;label&quot;: &quot;Portada principal 1920×1080&quot;, &quot;w&quot;: 1920, &quot;h&quot;: 1080}, {&quot;label&quot;: &quot;Open Graph / tarjeta social 1200×630&quot;, &quot;w&quot;: 1200, &quot;h&quot;: 630}, {&quot;label&quot;: &quot;Imagen destacada de blog 1200×800&quot;, &quot;w&quot;: 1200, &quot;h&quot;: 800}, {&quot;label&quot;: &quot;Imagen de contenido 1024×768&quot;, &quot;w&quot;: 1024, &quot;h&quot;: 768}, {&quot;label&quot;: &quot;Contenido pequeño / miniatura 800×600&quot;, &quot;w&quot;: 800, &quot;h&quot;: 600}]; function clampDim(v){ v = Math.round(Number(v) || 0); if (v &lt; 1) v = 1; if (v &gt; 12000) v = 12000; return v; } function fitSize(sw, sh, tw, th){ var s = Math.min(tw / sw, th / sh); return { w: Math.max(1, Math.round(sw * s)), h: Math.max(1, Math.round(sh * s)) }; } function fillCrop(sw, sh, tw, th){ var s = Math.max(tw / sw, th / sh); var cw = tw / s, ch = th / s; return { sx: Math.round((sw - cw) / 2), sy: Math.round((sh - ch) / 2), cw: Math.round(cw), ch: Math.round(ch) }; } function fitRect(sw, sh, tw, th){ var f = fitSize(sw, sh, tw, th); return { x: Math.round((tw - f.w) / 2), y: Math.round((th - f.h) / 2), w: f.w, h: f.h }; } function outName(base, w, h, ext){ return (base || &#x27;image&#x27;) + &#x27;-&#x27; + w + &#x27;x&#x27; + h + &#x27;.&#x27; + ext; } //__CORE_END__ var img = new Image(), loaded = false, fname = &#x27;image&#x27;; function $(i){ return document.getElementById(i); } PRESETS.forEach(function(p, i){ var b = document.createElement(&#x27;button&#x27;); b.type = &#x27;button&#x27;; b.textContent = p.label; b.style.margin = &#x27;0 6px 8px 0&#x27;; b.style.padding = &#x27;8px 14px&#x27;; b.style.fontSize = &#x27;14px&#x27;; b.addEventListener(&#x27;click&#x27;, function(){ $(&#x27;w&#x27;).value = p.w; $(&#x27;h&#x27;).value = p.h; }); $(&#x27;chips&#x27;).appendChild(b); if (i === 0){ $(&#x27;w&#x27;).value = p.w; $(&#x27;h&#x27;).value = p.h; } }); $(&#x27;file&#x27;).addEventListener(&#x27;change&#x27;, function(){ var f = this.files[0]; if (!f) return; fname = (f.name || &#x27;image&#x27;).replace(/\.[^.]+$/, &#x27;&#x27;) || &#x27;image&#x27;; var url = URL.createObjectURL(f); img.onload = function(){ loaded = true; $(&#x27;go&#x27;).disabled = false; $(&#x27;meta&#x27;).style.display = &#x27;block&#x27;; $(&#x27;meta&#x27;).innerHTML = T.meta.replace(&#x27;{w}&#x27;, img.naturalWidth).replace(&#x27;{h}&#x27;, img.naturalHeight); sendH(); }; img.src = url; }); $(&#x27;go&#x27;).addEventListener(&#x27;click&#x27;, function(){ if (!loaded) return; var tw = clampDim($(&#x27;w&#x27;).value), th = clampDim($(&#x27;h&#x27;).value); var sw = img.naturalWidth, sh = img.naturalHeight; var cv = document.createElement(&#x27;canvas&#x27;); cv.width = tw; cv.height = th; var cx = cv.getContext(&#x27;2d&#x27;); var mode = $(&#x27;mode&#x27;).value; if (mode === &#x27;stretch&#x27;){ cx.drawImage(img, 0, 0, tw, th); } else if (mode === &#x27;fill&#x27;){ var c = fillCrop(sw, sh, tw, th); cx.drawImage(img, c.sx, c.sy, c.cw, c.ch, 0, 0, tw, th); } else { var bg = $(&#x27;bg&#x27;).value; if (bg !== &#x27;transparent&#x27;){ cx.fillStyle = bg; cx.fillRect(0, 0, tw, th); } var r = fitRect(sw, sh, tw, th); cx.drawImage(img, r.x, r.y, r.w, r.h); } var fmt = $(&#x27;fmt&#x27;).value; var q = Math.min(100, Math.max(30, Number($(&#x27;q&#x27;).value) || 90)) / 100; cv.toBlob(function(blob){ if (!blob){ $(&#x27;status&#x27;).innerHTML = &#x27;&lt;span class=&quot;err&quot;&gt;&#x27; + T.err + &#x27;&lt;/span&gt;&#x27;; return; } var ext = fmt === &#x27;image/png&#x27; ? &#x27;png&#x27; : (fmt === &#x27;image/webp&#x27; ? &#x27;webp&#x27; : &#x27;jpg&#x27;); var name = outName(fname, tw, th, ext); var u = URL.createObjectURL(blob); $(&#x27;out&#x27;).innerHTML = &#x27;&#x27;; var im = document.createElement(&#x27;img&#x27;); im.src = u; im.style.maxWidth = &#x27;100%&#x27;; im.style.border = &#x27;1px solid #e2e8f0&#x27;; im.style.borderRadius = &#x27;6px&#x27;; $(&#x27;out&#x27;).appendChild(im); var p = document.createElement(&#x27;p&#x27;); p.innerHTML = T.done.replace(&#x27;{w}&#x27;, tw).replace(&#x27;{h}&#x27;, th).replace(&#x27;{kb}&#x27;, Math.max(1, Math.round(blob.size / 1024))); $(&#x27;out&#x27;).appendChild(p); var a = document.createElement(&#x27;a&#x27;); a.href = u; a.download = name; a.textContent = T.dl + &#x27; &#x27; + name; a.style.cssText = &#x27;display:inline-block;background:#0f766e;color:#fff;padding:11px 22px;border-radius:6px;text-decoration:none;font-size:16px&#x27;; $(&#x27;out&#x27;).appendChild(a); sendH(); }, fmt, q); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; " id="wpc-frame-6435" class="wpc-embed-frame" style="width:100%;border:0;display:block;overflow:hidden;" scrolling="no"></iframe> <p><a href="https://ilmhunt.com/redimensionar-imagen-para-sitio-web/" target="_blank" rel="noopener">Redimensionar Imagen para Sitio Web — Portadas, Blog y Open Graph en Una Herramienta</a> by <a href="https://ilmhunt.com/" target="_blank" rel="noopener">IlmHunt</a> — herramientas gratis en línea</p>