Problema de Optimización en fotos

[telepliz oficial]

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>

si bajo pruebo con el otro código que pasaste Crack​

 

[jcduranm]

Ver el archivo adjunto 1266429
si bajo pruebo con el otro código que pasaste Crack​

espero tu respurdta

 

[telepliz oficial]

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>

DIOOOOOOS si bajo Optimización extrema Calidad de imagen algo estable pero si es visible de que se tratara la pelicula​

 

[telepliz oficial]

espero tu respurdta

Gracias por ayudarme Crack

 

[jcduranm]

Ver el archivo adjunto 1266430
DIOOOOOOS si bajo Optimización extrema Calidad de imagen algo estable pero si es visible de que se tratara la pelicula​

lo podemos optimizar mas

<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 src="https://cdnjs.cloudflare.com/ajax/libs/pica/8.1.2/pica.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/compressorjs@1.0.7/dist/compressor.min.js"></script>
<script>
    const upload = document.getElementById('upload');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const pica = window.pica();

    upload.onchange = function (event) {
        const file = event.target.files[0];

        new Compressor(file, {
            quality: 0.6,
            success(result) {
                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;
                        }

                        const offScreenCanvas = document.createElement('canvas');
                        offScreenCanvas.width = newWidth;
                        offScreenCanvas.height = newHeight;

                        pica.resize(img, offScreenCanvas, {
                            quality: 3
                        }).then(result => {
                            ctx.drawImage(result, 0, 0);
                            canvas.style.display = 'block';
                        });
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(result);
            },
        });
    };

    function downloadImage() {
        const quality = 0.4;
        ctx.filter = 'blur(0.5px)';
        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]

lo podemos optimizar mas

el código esta perfecto pero no quiero ser grosero bro pero algunos buscamos optimizar algo en pesifico en mi parte optimizar la foto sin perder mucha calidad y mucho peso de dicha foto y sin perder las dimensiones de dicha foto​

 

[telepliz oficial]

el código esta perfecto pero no quiero ser grosero bro pero algunos buscamos optimizar algo en pesifico en mi parte optimizar la foto sin perder mucha calidad y mucho peso de dicha foto y sin perder las dimensiones de dicha foto​

confirmo y admito que el código que aportaste hace su función perfectamente

 

[telepliz oficial]

el código esta perfecto pero no quiero ser grosero bro pero algunos buscamos optimizar algo en pesifico en mi parte optimizar la foto sin perder mucha calidad y mucho peso de dicha foto y sin perder las dimensiones de dicha foto​

Optimización bajarle algo la calidad a la imagen y mucho peso a la imagen pero sin perder la dimensiones eso quise decir

si optimiza pero perdí las dimensiones

 

[jcduranm]

Optimización bajarle algo la calidad a la imagen y mucho peso a la imagen pero sin perder la dimensiones eso quise decir
Ver el archivo adjunto 1266433

si optimiza pero perdí las dimensiones
Ver el archivo adjunto 1266434​

Dame uno minutos sali se mi casa

 

[telepliz oficial]

Dame uno minutos sali se mi casa

tomate tu tiempo Crack

 

[jcduranm]

tomate tu tiempo Crack

Aquí te dejo el código ajustado para optimizar la imagen con una pérdida mínima de calidad

<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 *= maxWidth / newWidth;
                    newWidth = maxWidth;
                }
                if (newHeight > maxHeight) {
                    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.8;
        canvas.toBlob(function(blob) {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = 'imagen-optimizada.jpg';
            link.href = url;
            link.click();
            URL.revokeObjectURL(url);
        }, 'image/jpeg', quality);
    }
</script>

 

[Wigberto Marciaga]

Lo que hago es esto: Convertir a webp.

Con eso pudiera ser suficiente, pero como supongo que vas a querer sacarle "el jugo" como quien dice, pues vas a la Configuración y en donde dice "Entradas" encontrarás: "Publicar imágenes en Webp".

Así tus imágenes de Blogger serán webp.

Mira el resultado PageSpeed abajo de una página con 13 imágenes 👇

Incluso la puedes encontrar en este top de 100 páginas webs más ecológicas. Pues al mejorar el rendimiento de las páginas también las haces más ecológicas.

Blogger parece ser una de las mejores opciones para esto, al punto que sin ánimo de presumir, pudiera decir que por las verificaciones que he realizado mis blogs en Blogger están entre las páginas webs que menos contaminarían en todo el planeta.

Y lo que les puedo decir es que no es complicado.

 

[Wigberto Marciaga]

te recomiendo esta web Bro esta super buena https://imagen.online-convert.com/es/convertir-a-webp

No había leído estos comentarios antes de responder. Ahora me dio por mirar y noto que no te está funcionando del todo en móvil.

¿Cuándo no tienes imágenes qué velocidad tiene el blog en PageSpeed?

Pienso que mi comentario anterior pudiera serte como un indicio de que el problema que estás teniendo no son las imágenes, sino que otras cosas del blog. Por supuesto, al colocar imágenes cuando optas por optimizarlas eso te pudiera cooperar, pero me parece que vas a tener que pulir el código de tu plantilla para conseguir mejorar el rendimiento.

¿Por qué piensas que las imágenes eran el principal problema con el rendimiento de tu blog?

 

[jcduranm]

aquí el código para optimizar a Webp

<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 *= maxWidth / newWidth;
                        newWidth = maxWidth;
                    }
                    if (newHeight > maxHeight) {
                        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.8;
            canvas.toBlob(function(blob) {
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.download = 'imagen-optimizada.webp';
                link.href = url;
                link.click();
                URL.revokeObjectURL(url);
            }, 'image/webp', quality);
        }
    </script>

 

[telepliz oficial]

No había leído estos comentarios antes de responder. Ahora me dio por mirar y noto que no te está funcionando del todo en móvil.

¿Cuándo no tienes imágenes qué velocidad tiene el blog en PageSpeed?

Pienso que mi comentario anterior pudiera serte como un indicio de que el problema que estás teniendo no son las imágenes, sino que otras cosas del blog. Por supuesto, al colocar imágenes cuando optas por optimizarlas eso te pudiera cooperar, pero me parece que vas a tener que pulir el código de tu plantilla para conseguir mejorar el rendimiento.

¿Por qué piensas que las imágenes eran el principal problema con el rendimiento de tu blog?

en los problemas mas principales eran Optimizar imágenes y limpiar a fondo el código de la platilla que estoy usando pero e buscado y el siguiente problema es que la platilla que estoy usando es de paga y estoy usando una Gratuita y tiene algunas cosas bloqueadas y si cambio algo del código HTML algo deja de funcionar y el único plan y alternativa era optimizar las imágenes al punto de perder mucho peso pero poca calidad y convirtiendo la imágenes a Webp

 

[telepliz oficial]

Aquí te dejo el código ajustado para optimizar la imagen con una pérdida mínima de calidad

<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 *= maxWidth / newWidth;
                    newWidth = maxWidth;
                }
                if (newHeight > maxHeight) {
                    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.8;
        canvas.toBlob(function(blob) {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = 'imagen-optimizada.jpg';
            link.href = url;
            link.click();
            URL.revokeObjectURL(url);
        }, 'image/jpeg', quality);
    }
</script>

te respondo tarde porque aqui en Venezuela hay muchos cortes eléctricos

 

[telepliz oficial]

Aquí te dejo el código ajustado para optimizar la imagen con una pérdida mínima de calidad

<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 *= maxWidth / newWidth;
                    newWidth = maxWidth;
                }
                if (newHeight > maxHeight) {
                    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.8;
        canvas.toBlob(function(blob) {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = 'imagen-optimizada.jpg';
            link.href = url;
            link.click();
            URL.revokeObjectURL(url);
        }, 'image/jpeg', quality);
    }
</script>

Funciona perfecto pero de 2000 x 3000 a / 400 x 600 pero funciona

 

[jcduranm]

Funciona perfecto pero de 2000 x 3000 a / 400 x 600 pero funciona

como lo quieres el que no habla dios no lo escucha

 

[telepliz oficial]

como lo quieres el que no habla dios no lo escucha

Te pasa de pro jajajajjaja finos señores

 

[jcduranm]

Te pasa de pro jajajajjaja finos señores

prueba

<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 () {
                canvas.width = img.width;
                canvas.height = img.height;

                ctx.drawImage(img, 0, 0, img.width, img.height);
                canvas.style.display = 'block';
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    };

    function downloadImage() {
        const quality = 0.8;
        canvas.toBlob(function(blob) {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = 'imagen-optimizada.jpg';
            link.href = url;
            link.click();
            URL.revokeObjectURL(url);
        }, 'image/jpeg', quality);
    }
</script>