Problema de Optimización en fotos

BotBeta · 18 May 2024

Puko dijo:
las puedes redimencionar con los parámetros de blogger en la url en /s1600/, etc, o con css con width y height

¡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.

telepliz oficial · 18 May 2024

Puko dijo:
las puedes redimencionar con los parámetros de blogger en la url en /s1600/, etc, o con css con width y height

Gracias Pro Siuuuuuuuuu

Puko · 18 May 2024

¿Pámetro en la url blogger para poner de jpg a webp?

BotBeta · 18 May 2024

Puko dijo:
¿Pámetro en la url blogger para poner de jpg a webp?

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.

telepliz oficial · 18 May 2024

BotBeta dijo:
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

BotBeta · 18 May 2024

telepliz oficial dijo:
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!

Puko · 18 May 2024

BotBeta dijo:
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"?

BotBeta · 18 May 2024

Puko dijo:
¿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.

telepliz oficial · 18 May 2024

BotBeta dijo:
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

BotBeta · 18 May 2024

telepliz oficial dijo:
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.

Framber tech · 19 May 2024

Yo utilizo esta herramienta todo en una: https://www.resizepixel.com/ o editor photopea.com

telepliz oficial · 19 May 2024

Framber tech dijo:
Yo utilizo esta herramienta todo en una: https://www.resizepixel.com/ o editor photopea.com

Gracias por la recomendación

jcduranm · 19 May 2024

agrega tu optimizador

Insertar CODE, HTML o PHP:

  <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>

telepliz oficial · 19 May 2024

jcduranm dijo:

agrega tu optimizador

Insertar CODE, HTML o PHP:

  <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

Framber tech · 19 May 2024

telepliz oficial dijo:
el codigo a donde lo pego

Una pagina estatica. Obviamente debes colocar la vista en html. vale

telepliz oficial · 19 May 2024

jcduranm dijo:

agrega tu optimizador

Insertar CODE, HTML o PHP:

  <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>

Framber tech dijo:
Una pagina estatica. Obviamente debes colocar la vista en html. vale

no es por hablar mal del código pero prácticamente no iso nada fue al contrario XD le subió el peso a la imagen

pruebas XD:

foto optimizada por https://squoosh.app/editor

foto optimizada por el código que aporto @jcduranm

resultado final

telepliz oficial · 19 May 2024

jcduranm dijo:

agrega tu optimizador

Insertar CODE, HTML o PHP:

  <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>

pero no pasa nada Crack no perdí nada de tiempo en probar el codigo y Gracias de antemano

jcduranm · 19 May 2024

telepliz oficial dijo:
no es por hablar mal del código pero prácticamente no iso nada fue al contrario XD le subió el peso a la imagen

pruebas XD:

foto optimizada por https://squoosh.app/editor
Ver el archivo adjunto 1266414
foto optimizada por el código que aporto @jcduranm
Ver el archivo adjunto 1266415
resultado final
Ver el archivo adjunto 1266417

una disculpa prueba de nuevo

Insertar CODE, HTML o PHP:

<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>

telepliz oficial · 19 May 2024

jcduranm dijo:

una disculpa prueba de nuevo

Insertar CODE, HTML o PHP:

<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 quality = 0.8; // Ajusta la calidad del JPEG (0.0 - 1.0)
        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

jcduranm · 19 May 2024

telepliz oficial dijo:
ya lo pruebo te estaré diciendo Crack

el bueno es este una vez mas corregí otro error

Insertar CODE, HTML o PHP:

<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>

Problema de Optimización en fotos

BotBeta

telepliz oficial

Puko

BotBeta

telepliz oficial

BotBeta

Puko

BotBeta

telepliz oficial

BotBeta

Framber tech

telepliz oficial

jcduranm

telepliz oficial

Framber tech

telepliz oficial

telepliz oficial

jcduranm

telepliz oficial

jcduranm

Temas similares

Privacidad y transparencia

Privacidad y transparencia