¡Correcto! Agregar parámetros de tamaño después de la URL de las imágenes o usando CSS puede ayudarte a redimensionarlas para que se ajusten mejor a tu blog. Recuerda siempre optimizar para el rendimiento y la calidad visual.
Gracias Pro Siuuuuuuuuu
Lo siento, pero actualmente Blogger no ofrece una opción directa para convertir imágenes JPG a WEBP a través de la URL. Necesitarás convertir tus imágenes a WEBP antes de subirlas a tu blog. Utiliza herramientas en línea para hacer esto, como Squoosh o TinyJPG.
eso si es cierto
Me alegra que estés de acuerdo. Si tienes más preguntas sobre la optimización de imágenes o cualquier otro tema de Blogger, no dudes en preguntar. ¡Estoy aquí para ayudar!
¿entonces para que sirve el parametro ën blogger "-rw"?
El parámetro "-rw" en Blogger se usa generalmente para eliminar la reducción automática de tamaño que se aplica a las imágenes. Se añade al final de la URL de la imagen. Sin embargo, el uso de este parámetro puede no ser adecuado para todas las imágenes, dependiendo de su tamaño original y de cómo quieras que se muestren en tu blog.
entonces puede que sirva pero puede que tega herrores
Sí, el uso del parámetro "-rw" podría tener resultados impredecibles dependiendo del tamaño y la resolución original de la imagen. Es importante probar y asegurarse de que tus imágenes se vean bien en todas las plataformas y resoluciones de pantalla.
Gracias por la recomendación
<h2>Optimizador de Imágenes para Blogger</h2>
<input type="file" id="upload" accept="image/*" />
<br><br>
<canvas id="canvas" style="display:none;"></canvas>
<button onclick="downloadImage()">Descargar Imagen Optimizada</button>
<script>
const upload = document.getElementById('upload');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
upload.onchange = function (event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.onload = function () {
// Redimensionar la imagen
const maxWidth = 800; // Máximo ancho deseado
const ratio = maxWidth / img.width;
const newWidth = maxWidth;
const newHeight = img.height * ratio;
// Configura el tamaño del canvas
canvas.width = newWidth;
canvas.height = newHeight;
// Dibuja la imagen redimensionada en el canvas
ctx.drawImage(img, 0, 0, newWidth, newHeight);
canvas.style.display = 'block';
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
};
function downloadImage() {
const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
const link = document.createElement('a');
link.download = 'imagen-optimizada.png';
link.href = image;
link.click();
}
</script>el codigo a donde lo pego
Una pagina estatica. Obviamente debes colocar la vista en html. vale
pero no pasa nada Crack no perdí nada de tiempo en probar el codigo y Gracias de antemano
una disculpa prueba de nuevo
<h2>Optimizador de Imágenes para Blogger</h2>
<input type="file" id="upload" accept="image/*" />
<br><br>
<canvas id="canvas" style="display:none;"></canvas>
<button onclick="downloadImage()">Descargar Imagen Optimizada</button>
<script>
const upload = document.getElementById('upload');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
upload.onchange = function (event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.onload = function () {
const maxWidth = 800;
const maxHeight = 600;
let newWidth = img.width;
let newHeight = img.height;
if (newWidth > maxWidth) {
newHeight = newHeight * (maxWidth / newWidth);
newWidth = maxWidth;
}
if (newHeight > maxHeight) {
newWidth = newWidth * (maxHeight / newHeight);
newHeight = maxHeight;
}
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);
canvas.style.display = 'block';
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
};
function downloadImage() {
const quality = 0.6;
const image = canvas.toDataURL('image/jpeg', quality).replace('image/jpeg', 'image/octet-stream');
const link = document.createElement('a');
link.download = 'imagen-optimizada.jpg';
link.href = image;
link.click();
}
</script>ya lo pruebo te estaré diciendo Crack
el bueno es este una vez mas corregí otro error
<h2>Optimizador de Imágenes para Blogger</h2>
<input type="file" id="upload" accept="image/*" />
<br><br>
<canvas id="canvas" style="display:none;"></canvas>
<button onclick="downloadImage()">Descargar Imagen Optimizada</button>
<script>
const upload = document.getElementById('upload');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
upload.onchange = function (event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.onload = function () {
const maxWidth = 800;
const maxHeight = 600;
let newWidth = img.width;
let newHeight = img.height;
if (newWidth > maxWidth) {
newHeight = newHeight * (maxWidth / newWidth);
newWidth = maxWidth;
}
if (newHeight > maxHeight) {
newWidth = newWidth * (maxHeight / newHeight);
newHeight = maxHeight;
}
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);
canvas.style.display = 'block';
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
};
function downloadImage() {
const quality = 0.6;
const image = canvas.toDataURL('image/jpeg', quality).replace('image/jpeg', 'image/octet-stream');
const link = document.createElement('a');
link.download = 'imagen-optimizada.jpg';
link.href = image;
link.click();
}
</script>
