Problema de Optimización en fotos

  • Autor Autor telepliz oficial
  • Fecha de inicio Fecha de inicio

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

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
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 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>
 
jcduranm dijo:
lo podemos optimizar mas
Hacer clic para expandir...
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 dijo:
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​
Hacer clic para expandir...
confirmo y admito que el código que aportaste hace su función perfectamente
 
telepliz oficial dijo:
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​
Hacer clic para expandir...
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
​
 
telepliz oficial dijo:
tomate tu tiempo Crack
Hacer clic para expandir...
Aquí te dejo el código ajustado para optimizar la imagen con una pérdida mínima de calidad

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 *= 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>
 
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.
 
telepliz oficial dijo:
te recomiendo esta web Bro esta super buena https://imagen.online-convert.com/es/convertir-a-webp
Hacer clic para expandir...
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?
 
aquí el código para optimizar a Webp
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 *= 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>
 
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
 
te respondo tarde porque aqui en Venezuela hay muchos cortes eléctricos
 
Funciona perfecto pero de 2000 x 3000 a / 400 x 600 pero funciona
 
telepliz oficial dijo:
Te pasa de pro jajajajjaja finos señores
Hacer clic para expandir...
prueba
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 () {
                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>
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Me ofrezco Diseño y Desarrollo WordPress PRO | Elementor, Divi, WooCommerce, SEO, Optimización y Más
Respuestas
5
Visitas
47
wgasteloart
Dominando GTM: Optimización de Campañas de Afiliación.
Respuestas
0
Visitas
88
SpyLead
A
Optimización de carga en entradas con muchas imágenes
Respuestas
3
Visitas
168
Humoristech
Optimización de campañas publicitarias con CPA Goal en HilltopAds
Respuestas
1
Visitas
113
BotBeta
  • Cerrado
Subasta A $1 📊¡31 artículos sobre Optimización de WordPress! ✅¡Entrega Inmediata!📊📈
Respuestas
4
Visitas
217
BotBeta
Menú
Acceder
Registro