Marca de Agua para Vistas Previas — Añade Logos o Texto a Tus Imágenes

Una imagen de vista previa se copia, se recorta y se vuelve a publicar, y una pequeña marca de agua es la forma más barata de mantener tu marca pegada a ella. Esta herramienta añade esa marca en tu navegador: sube tu imagen de tarjeta, añade tu logotipo o una marca de texto, elige una esquina y una opacidad, y descarga la imagen terminada. Sin cuenta, sin subir nada a un servidor, y la marca queda integrada en los píxeles, así sobrevive a republicaciones que eliminan los metadatos.

Logotipo o texto

Una marca de agua con logotipo es mejor cuando tu marca ya se reconoce en tamaños pequeños: una forma simple o un logotipo de texto se lee incluso con poca opacidad. Las marcas de texto van bien para creadores que aún no tienen un archivo de logotipo; el nombre de tu sitio o tu usuario en tipo blanco limpio funciona bien en la mayoría de las fotos. Mantén la marca pequeña, como máximo un cuarto del ancho de la imagen, y mantenla en una esquina. Una marca gigante en el centro no protege mejor y molesta a cada espectador legítimo, mientras que una marca en una esquina basta para probar el origen cuando se reutiliza una imagen.

Opacidad y colocación

Una opacidad alrededor de 0,5 es el equilibrio habitual: lo bastante visible para leerse en una foto con mucho detalle, lo bastante ligera para no competir con el motivo. En fotos oscuras, el texto blanco a 0,5 se lee con claridad; en fotos claras, el contorno oscuro que esta herramienta dibuja detrás del texto lo mantiene legible. Abajo a la derecha es la opción por defecto porque la mirada termina allí, pero abajo a la izquierda evita la esquina donde algunas aplicaciones ponen botones. Si tu imagen ya tiene un detalle importante en una esquina, elige otra; las cinco posiciones de la herramienta cubren cada esquina más el centro.

Qué hace y qué no hace una marca de agua

Una marca de agua prueba el origen y disuade la copia ocasional, y sobrevive a capturas de pantalla, descargas y nuevas subidas porque forma parte de la imagen. No detiene a una persona decidida: cualquiera puede recortar una esquina o pintar sobre una marca con suficiente esfuerzo. Para protección legal, una marca de agua es una prueba, no un candado; combínala con conservar tu archivo original y un registro de la primera publicación. Para compartir a diario, sin embargo, una marca en una esquina tiene exactamente el peso adecuado.

Privacidad

Ambas imágenes se procesan localmente en tu dispositivo. Nada se sube, se guarda ni se envía a ningún servidor, y el archivo descargado contiene solo los píxeles que ves.

Un flujo de trabajo constante por lotes

Las marcas de agua funcionan mejor como hábito, no como algo puntual. Elige una esquina, una opacidad y una marca, y usa la misma combinación en cada imagen de una serie, para que los lectores aprendan a reconocer tus tarjetas de un vistazo y las republicaciones sean fáciles de rastrear hasta ti. Conserva siempre una copia maestra sin marca de agua de cada imagen: una vez que una marca queda integrada en la única copia, no puedes quitarla limpiamente, y un futuro rediseño de tu logotipo significaría reconstruir cada tarjeta desde cero. Nombra tus archivos para que la versión con marca sea obvia, por ejemplo añadiendo -wm al nombre, y guarda las maestras y las copias con marca en carpetas separadas. Si publicas la misma imagen en varios tamaños, pon la marca primero en la versión más grande y luego cambia el tamaño, porque una marca añadida a una imagen pequeña y luego ampliada se vuelve borrosa, mientras que una marca añadida grande y reducida se mantiene nítida. Por último, revisa las imágenes con marca en un teléfono antes de publicar: una marca que parece sutil en un monitor puede desaparecer por completo en una pantalla pequeña y brillante, y una que parece atrevida en un monitor puede dominar una tarjeta de teléfono.

Herramientas relacionadas

Optimizador de Relación de Aspecto · English version: Watermark Preview Overlay · 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;Marca de Agua para Vistas Previas&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;Marca de Agua para Vistas Previas&lt;/h2&gt;&lt;p class=&quot;sub&quot;&gt;Añade un logotipo o texto como marca de agua a una imagen de vista previa, y descárgala.&lt;/p&gt;&lt;label&gt;Imagen base&lt;/label&gt;&lt;input type=&quot;file&quot; id=&quot;wmBase&quot; accept=&quot;image/*&quot;&gt;&lt;label&gt;Imagen del logotipo (opcional)&lt;/label&gt;&lt;input type=&quot;file&quot; id=&quot;wmLogo&quot; accept=&quot;image/*&quot;&gt;&lt;label&gt;Texto de marca de agua (se usa cuando no se sube logotipo)&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;wmText&quot; value=&quot;IlmHunt&quot;&gt;&lt;div class=&quot;row&quot;&gt;&lt;div&gt;&lt;label&gt;Posición&lt;/label&gt;&lt;select id=&quot;wmPos&quot;&gt;&lt;option value=&quot;bottom-right&quot;&gt;Abajo derecha&lt;/option&gt;&lt;option value=&quot;bottom-left&quot;&gt;Abajo izquierda&lt;/option&gt;&lt;option value=&quot;top-right&quot;&gt;Arriba derecha&lt;/option&gt;&lt;option value=&quot;top-left&quot;&gt;Arriba izquierda&lt;/option&gt;&lt;option value=&quot;center&quot;&gt;Centro&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;div&gt;&lt;label&gt;Opacidad (0,05–1)&lt;/label&gt;&lt;input type=&quot;number&quot; id=&quot;wmOp&quot; value=&quot;0.5&quot; step=&quot;0.05&quot; min=&quot;0.05&quot; max=&quot;1&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;button id=&quot;wmGo&quot;&gt;Aplicar marca de agua&lt;/button&gt;&lt;canvas id=&quot;wmCanvas&quot; style=&quot;max-width:100%;border:1px solid #e2e8f0;border-radius:6px;margin-top:10px&quot;&gt;&lt;/canvas&gt;&lt;p&gt;&lt;a id=&quot;wmDl&quot; href=&quot;#&quot; download=&quot;watermarked.png&quot;&gt;Descargar imagen con marca de agua&lt;/a&gt;&lt;/p&gt;&lt;p id=&quot;wmStatus&quot;&gt;&lt;/p&gt; &lt;/div&gt; &lt;script&gt; function sendH(){ try { parent.postMessage({wpcId: 6314, wpcH: document.body.scrollHeight + 16}, &#x27;*&#x27;); } catch (e) {} } window.addEventListener(&#x27;load&#x27;, sendH); window.addEventListener(&#x27;resize&#x27;, sendH); //__CORE_START__ function wmClampOpacity(v) { v = parseFloat(v); if (isNaN(v)) return 0.5; if (v &lt; 0.05) return 0.05; if (v &gt; 1) return 1; return v; } function wmRect(iw, ih, pos, scale) { var w = iw * scale, h = ih * scale, m = Math.round(iw * 0.02) + 8, x, y; if (pos.indexOf(&#x27;left&#x27;) &gt;= 0) x = m; else if (pos.indexOf(&#x27;right&#x27;) &gt;= 0) x = iw - w - m; else x = (iw - w) / 2; if (pos.indexOf(&#x27;top&#x27;) &gt;= 0) y = m; else if (pos.indexOf(&#x27;bottom&#x27;) &gt;= 0) y = ih - h - m; else y = (ih - h) / 2; return {x: Math.round(x), y: Math.round(y), w: Math.round(w), h: Math.round(h)}; } //__CORE_END__ var wmBaseImg = null, wmLogoImg = null; function wmLoad(input, cb) { var f = input.files[0]; if (!f) { cb(null); return; } var img = new Image(); img.onload = function () { cb(img); }; img.src = URL.createObjectURL(f); } document.getElementById(&#x27;wmBase&#x27;).addEventListener(&#x27;change&#x27;, function (e) { wmLoad(e.target, function (im) { wmBaseImg = im; }); }); document.getElementById(&#x27;wmLogo&#x27;).addEventListener(&#x27;change&#x27;, function (e) { wmLoad(e.target, function (im) { wmLogoImg = im; }); }); document.getElementById(&#x27;wmGo&#x27;).onclick = function () { if (!wmBaseImg) { document.getElementById(&#x27;wmStatus&#x27;).textContent = &#x27;Primero elige una imagen base.&#x27;; return; } var c = document.getElementById(&#x27;wmCanvas&#x27;), ctx = c.getContext(&#x27;2d&#x27;); c.width = wmBaseImg.naturalWidth; c.height = wmBaseImg.naturalHeight; ctx.drawImage(wmBaseImg, 0, 0); var op = wmClampOpacity(document.getElementById(&#x27;wmOp&#x27;).value); ctx.globalAlpha = op; var pos = document.getElementById(&#x27;wmPos&#x27;).value; if (wmLogoImg) { var lw = Math.min(c.width * 0.25, wmLogoImg.naturalWidth); var r = wmRect(c.width, c.height, pos, lw / c.width); r.h = Math.round(wmLogoImg.naturalHeight * (r.w / wmLogoImg.naturalWidth)); if (pos.indexOf(&#x27;bottom&#x27;) &gt;= 0) r.y = c.height - r.h - (Math.round(c.width * 0.02) + 8); if (pos === &#x27;center&#x27;) r.y = Math.round((c.height - r.h) / 2); ctx.drawImage(wmLogoImg, r.x, r.y, r.w, r.h); } else { ctx.font = &#x27;700 &#x27; + Math.round(c.width / 18) + &#x27;px Arial&#x27;; ctx.fillStyle = &#x27;#ffffff&#x27;; ctx.strokeStyle = &#x27;rgba(0,0,0,0.6)&#x27;; ctx.lineWidth = 4; var tw = ctx.measureText(document.getElementById(&#x27;wmText&#x27;).value).width; var th = Math.round(c.width / 18); var m = Math.round(c.width * 0.02) + 8, tx, ty; if (pos.indexOf(&#x27;left&#x27;) &gt;= 0) tx = m; else if (pos.indexOf(&#x27;right&#x27;) &gt;= 0) tx = c.width - tw - m; else tx = (c.width - tw) / 2; if (pos.indexOf(&#x27;top&#x27;) &gt;= 0) ty = m + th; else if (pos.indexOf(&#x27;bottom&#x27;) &gt;= 0) ty = c.height - m; else ty = (c.height + th) / 2; ctx.strokeText(document.getElementById(&#x27;wmText&#x27;).value, tx, ty); ctx.fillText(document.getElementById(&#x27;wmText&#x27;).value, tx, ty); } ctx.globalAlpha = 1; document.getElementById(&#x27;wmDl&#x27;).href = c.toDataURL(&#x27;image/png&#x27;); document.getElementById(&#x27;wmStatus&#x27;).textContent = &#x27;Marca de agua aplicada — descarga arriba.&#x27;; }; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; " id="wpc-frame-6314" class="wpc-embed-frame" style="width:100%;border:0;display:block;overflow:hidden;" scrolling="no"></iframe> <p><a href="https://ilmhunt.com/marca-de-agua-para-vistas-previas/" target="_blank" rel="noopener">Marca de Agua para Vistas Previas — Añade Logos o Texto a Tus Imágenes</a> by <a href="https://ilmhunt.com/" target="_blank" rel="noopener">IlmHunt</a> — herramientas gratis en línea</p>