Implementação WebP: Guia Completo de Performance

No ambiente web atual focado em performance, as imagens frequentemente representam a maior parte do peso de uma página. Um site típico pode ter 50-60% do seu tamanho total atribuído a imagens, tornando a otimização de imagens uma das melhorias de performance mais impactantes disponíveis para desenvolvedores e proprietários de sites.

WebP emergiu como um formato de imagem revolucionário que oferece tamanhos de arquivo significativamente menores com qualidade visual comparável aos formatos tradicionais como JPEG e PNG. No entanto, implementar WebP em escala em todo um site—especialmente um com milhares de imagens—apresenta desafios únicos em termos de compatibilidade, automação e entrega.

Este guia completo leva você por todo o processo de implementação WebP em escala, desde a compreensão dos seus benefícios até a medição dos ganhos de performance após a implantação.

Entendendo WebP: A Base Técnica

Antes de mergulhar nas estratégias de implementação, é importante entender o que torna o WebP diferente dos formatos de imagem tradicionais.

O Que é WebP e Por Que é Importante

WebP é um formato de imagem desenvolvido pelo Google que fornece compressão superior para imagens web. As principais características incluem:

Compressão lossless que é 26% menor que PNG
Compressão lossy que é 25-34% menor que JPEG com qualidade visual equivalente
Suporte a canal alfa (transparência) com arquivos 22% menores que PNG
Suporte a animação similar ao GIF mas com tamanhos de arquivo significativamente menores

Quando implementado efetivamente, WebP pode reduzir drasticamente o peso da página mantendo a qualidade visual, impactando diretamente métricas Core Web Vitals como Largest Contentful Paint (LCP).

Panorama de Compatibilidade de Navegadores

Suporte atual de navegadores para WebP:

Navegador	Suporte WebP	Quota de Mercado (Maio 2024)
Chrome	Completo	~65%
Edge	Completo	~5%
Firefox	Completo	~4%
Safari	Desde v14	~19%
IE	Nenhum	<1%
Opera	Completo	~2%

Com a adição do suporte WebP no Safari na versão 14 (lançada em setembro de 2020), WebP agora tem suporte em todos os navegadores modernos, representando aproximadamente 99% do tráfego web global.

No entanto, o suporte a navegadores legados permanece um desafio que deve ser abordado com mecanismos de fallback adequados.

Implementando WebP: Abordagens Técnicas

Existem várias abordagens para implementar WebP em escala, cada uma com diferentes níveis de complexidade e compatibilidade:

1. Conversão Manual com Fallbacks

Para implementações de pequena escala ou testes iniciais, a conversão manual fornece uma abordagem controlada:

<picture>
	<source srcset="/images/exemplo.webp"
  type="image/webp"
  />
	<source srcset="/images/exemplo.jpg"
  type="image/jpeg"
  />
	<img src="/images/exemplo.jpg"
  alt="Imagem de exemplo"
  />

</picture>

Embora esta abordagem garanta compatibilidade, gerenciar múltiplos formatos de imagem manualmente torna-se incontrolável em escala.

2. Detecção e Entrega Server-Side

Detectar suporte do navegador no servidor e entregar o formato apropriado:

Configuração Apache:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Verifica se o navegador suporta WebP
  RewriteCond %{HTTP_ACCEPT} image/webp

  # Verifica se a versão WebP existe
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # Serve imagem WebP em vez disso
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,L]
</IfModule>

Configuração Nginx:

location /images/ {
    if ($http_accept ~* "webp") {
        set $webp_suffix ".webp";
    }

    try_files $uri$webp_suffix $uri =404;
}

Esta abordagem requer manter versões paralelas de imagens mas automatiza a entrega baseada nas capacidades do navegador.

3. Conversão Dinâmica com CDN

Para implementações em larga escala, usar um CDN com capacidades de conversão on-the-fly:

Exemplo Cloudflare Workers:

addEventListener("fetch", (event) => {
	event.respondWith(tratarRequisicao(event.request));
});

async function tratarRequisicao(request) {
	const url = new URL(request.url);

	// Verifica se é uma requisição de imagem
	if (/\.(jpe?g|png)$/i.test(url.pathname)) {
		// Verifica se o navegador suporta WebP
		const acceptHeader = request.headers.get("Accept") || "";
		const suportaWebP = acceptHeader.includes("image/webp");

		if (suportaWebP) {
			// Constrói URL da versão WebP
			const webpURL = url.pathname.replace(/\.(jpe?g|png)$/i, ".webp");

			// Tenta buscar a versão WebP
			try {
				const respostaWebP = await fetch(
					new Request(url.origin + webpURL, request)
				);
				if (respostaWebP.ok) {
					return respostaWebP;
				}
			} catch (e) {
				// Versão WebP não disponível, continua com requisição original
			}
		}
	}

	// Fallback para requisição original
	return fetch(request);
}

4. Automação em Tempo de Build

Integrar a geração WebP no seu processo de build garante que todas as imagens sejam otimizadas sem intervenção manual:

Configuração Webpack com image-webpack-loader:

// webpack.config.js
module.exports = {
	// ...
	module: {
		rules: [
			{
				test: /\.(jpe?g|png)$/i,
				use: [
					{
						loader: "file-loader",
						options: {
							name: "[path][name].[ext]",
						},
					},
					{
						loader: "image-webpack-loader",
						options: {
							webp: {
								quality: 80,
								lossless: false,
							},
						},
					},
				],
			},
		],
	},
};

Task Gulp para conversão WebP:

const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const webp = require("imagemin-webp");
const extReplace = require("gulp-ext-replace");

gulp.task("webp", () => {
	return gulp
		.src("src/images/**/*.{jpg,png}")
		.pipe(
			imagemin([
				webp({
					quality: 80,
					method: 6,
				}),
			])
		)
		.pipe(extReplace(".webp"))
		.pipe(gulp.dest("dist/images/"));
});

gulp.task("default", gulp.series("webp"));

Estratégia de Implementação em Escala Completa

Para sites de nível empresarial com milhares de imagens, uma estratégia de implementação abrangente é necessária:

1. Inventário e Priorização

Comece auditando seus assets de imagem:

Inventarie todas as imagens no seu site
Identifique imagens críticas que impactam LCP ou aparecem acima da dobra
Analise o uso atual de formatos para identificar os candidatos de conversão com maior impacto
Meça as métricas de performance atuais como baseline para comparação

2. Pipeline de Conversão Automatizada

Implemente um sistema de conversão automatizado que trata tanto imagens existentes quanto novas:

// Script Node.js de exemplo para converter recursivamente um diretório de imagens
const fs = require("fs");
const path = require("path");
const { execSync } = require("child_process");

function processarDiretorio(diretorio) {
	fs.readdirSync(diretorio).forEach((arquivo) => {
		const caminhoCompleto = path.join(diretorio, arquivo);

		if (fs.statSync(caminhoCompleto).isDirectory()) {
			processarDiretorio(caminhoCompleto);
		} else if (/\.(jpe?g|png)$/i.test(arquivo)) {
			const caminhoSaida = caminhoCompleto.replace(/\.(jpe?g|png)$/i, ".webp");

			// Pula se a versão WebP já existe
			if (!fs.existsSync(caminhoSaida)) {
				console.log(`Convertendo: ${caminhoCompleto}`);

				try {
					// Usa cwebp para conversão com qualidade 80
					execSync(`cwebp -q 80 "${caminhoCompleto}" -o "${caminhoSaida}"`);
					console.log(`Criado: ${caminhoSaida}`);
				} catch (erro) {
					console.error(
						`Erro convertendo ${caminhoCompleto}:`,
						erro.message
					);
				}
			}
		}
	});
}

// Inicia processamento a partir do diretório images
processarDiretorio("./public/images");

3. Implementação Front-end

Escolha a implementação front-end mais apropriada baseada na arquitetura do seu site:

Componente React para WebP com Fallback

// WebPImage.jsx
import React from "react";

const WebPImage = ({ src, alt, width, height, className }) => {
	// Extrai caminho base e extensão
	const caminhoBase = src.substring(0, src.lastIndexOf("."));
	const ext = src.substring(src.lastIndexOf(".") + 1);

	// Fornece alternativa WebP apenas para JPG e PNG
	const deveUsarWebP = ["jpg", "jpeg", "png"].includes(ext.toLowerCase());

	return (
		<picture className={className}>
			{deveUsarWebP && (
				<source srcSet={`${caminhoBase}.webp`} type="image/webp" />
			)}
			<source
				srcSet={src}
				type={`image/${ext === "jpg" ? "jpeg" : ext}`}
			/>
			<img
				src={src}
				alt={alt}
				width={width}
				height={height}
				loading="lazy"
			/>
		</picture>
	);
};

export default WebPImage;

Abordagem de Componente Vue.js

<!-- WebPImage.vue -->
<template>
	<picture :class="className">
		<source v-if="webpSrc" :srcset="webpSrc" type="image/webp" />
		<source :srcset="src" :type="tipoFonte" />
		<img
			:src="src"
			:alt="alt"
			:width="width"
			:height="height"
			loading="lazy"
		/>
	</picture>
</template>

<script>
export default {
	props: {
		src: { type: String, required: true },
		alt: { type: String, default: "" },
		width: { type: [Number, String], default: null },
		height: { type: [Number, String], default: null },
		className: { type: String, default: "" },
	},
	computed: {
		extensao() {
			return this.src.split(".").pop().toLowerCase();
		},
		tipoFonte() {
			const ext = this.extensao;
			if (ext === "jpg" || ext === "jpeg") return "image/jpeg";
			if (ext === "png") return "image/png";
			return `image/${ext}`;
		},
		webpSrc() {
			if (!["jpg", "jpeg", "png"].includes(this.extensao)) return null;
			return this.src.substring(0, this.src.lastIndexOf(".")) + ".webp";
		},
	},
};
</script>

4. Integração com Sistema de Gerenciamento de Conteúdo

Para sites gerenciados através de um CMS, integre a conversão WebP no fluxo de trabalho de conteúdo:

Implementação WordPress

Usando o plugin WebP Express ou funções personalizadas:

// Adicione ao functions.php
function gerar_webp_ao_upload($metadata) {
    if (!isset($metadata['file'])) {
        return $metadata;
    }

    $upload_dir = wp_upload_dir();
    $caminho_arquivo = $upload_dir['basedir'] . '/' . $metadata['file'];
    $info_arquivo = pathinfo($caminho_arquivo);

    // Converte apenas JPG e PNG
    if (!in_array(strtolower($info_arquivo['extension']), ['jpg', 'jpeg', 'png'])) {
        return $metadata;
    }

    $caminho_webp = $info_arquivo['dirname'] . '/' . $info_arquivo['filename'] . '.webp';

    // Usa exec para chamar cwebp
    $cmd = "cwebp -q 80 " . escapeshellarg($caminho_arquivo) . " -o " . escapeshellarg($caminho_webp);
    exec($cmd);

    // Também converte todos os tamanhos
    if (isset($metadata['sizes']) && is_array($metadata['sizes'])) {
        foreach ($metadata['sizes'] as $size) {
            $arquivo_redimensionado = $info_arquivo['dirname'] . '/' . $size['file'];
            $webp_redimensionado = $info_arquivo['dirname'] . '/' . pathinfo($size['file'], PATHINFO_FILENAME) . '.webp';

            $cmd = "cwebp -q 80 " . escapeshellarg($arquivo_redimensionado) . " -o " . escapeshellarg($webp_redimensionado);
            exec($cmd);
        }
    }

    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'gerar_webp_ao_upload');

// Função para substituir URLs de imagem por elementos picture no conteúdo
function substituir_imagens_por_picture($conteudo) {
    if (empty($conteudo)) {
        return $conteudo;
    }

    $padrao = '/<img(.*?)src=[\'"](.*?)\.(jpe?g|png)[\'"](.*?)>/i';
    return preg_replace_callback($padrao, function($matches) {
        $antes = $matches[1];
        $src = $matches[2] . '.' . $matches[3];
        $webp_src = $matches[2] . '.webp';
        $depois = $matches[4];

        return '<picture>' .
               '<source srcset="' . $webp_src . '" type="image/webp">' .
               '<source srcset="' . $src . '" type="image/' . ($matches[3] === 'jpg' || $matches[3] === 'jpeg' ? 'jpeg' : 'png') . '">' .
               '<img' . $antes . 'src="' . $src . '"' . $depois . '>' .
               '</picture>';
    }, $conteudo);
}
add_filter('the_content', 'substituir_imagens_por_picture');

5. Configuração CDN para Conversão WebP Automática

Para máxima eficiência, configure seu CDN para tratar conversão e entrega WebP:

Cloudflare com Polish

Habilite o recurso "Polish" no Cloudflare com opção WebP:

Vá para Speed → Optimization
Em "Polish", selecione "WebP"
Configure Cache Level para "Standard" ou "Aggressive"

Amazon CloudFront com Lambda@Edge

// Função Lambda@Edge para origin response
exports.handler = async (event) => {
	const resposta = event.Records[0].cf.response;
	const requisicao = event.Records[0].cf.request;

	// Verifica se a resposta é uma imagem
	const contentType =
		resposta.headers["content-type"] &&
		resposta.headers["content-type"][0].value;
	if (!contentType || !contentType.startsWith("image/")) {
		return resposta;
	}

	// Verifica se o cliente suporta WebP
	const acceptHeader =
		requisicao.headers["accept"] && requisicao.headers["accept"][0].value;
	const clienteSuportaWebP =
		acceptHeader && acceptHeader.includes("image/webp");

	if (clienteSuportaWebP) {
		// Modifica cache control para diferenciar variante WebP
		if (resposta.headers["cache-control"]) {
			resposta.headers["vary"] = [{ key: "Vary", value: "Accept" }];
		}

		// Aqui você chamaria um serviço de conversão WebP ou usaria uma versão pré-convertida
		// Este é um exemplo simplificado que assume que a conversão é tratada em outro lugar
	}

	return resposta;
};

Medição e Otimização de Performance

Implementar WebP só é efetivo se você puder medir e demonstrar os ganhos de performance:

1. Medindo o Impacto do WebP

Use estas ferramentas para quantificar as melhorias de performance:

Lighthouse: Compare pontuações antes/depois, focando em:
- Largest Contentful Paint (LCP)
- First Contentful Paint (FCP)
- Speed Index
WebPageTest: Analise:
- Tempo Visual Complete
- Bytes baixados por tipo MIME
- Waterfall de requisições para carregamento de imagens
Google Analytics: Rastreie:
- Tempo de carregamento de página
- Mudanças na taxa de rejeição
- Impacto na taxa de conversão

2. Script de Teste de Performance de Exemplo

Este script compara performance de carregamento com e sem WebP:

const puppeteer = require("puppeteer");
const lighthouse = require("lighthouse");

async function executarTeste(url, comWebP) {
	const browser = await puppeteer.launch({ headless: true });
	const pagina = await browser.newPage();

	// Habilita/desabilita WebP baseado no parâmetro
	if (!comWebP) {
		await pagina.setRequestInterception(true);
		pagina.on("request", (requisicao) => {
			const headers = requisicao.headers();
			// Remove WebP do header Accept
			if (headers.accept && headers.accept.includes("image/webp")) {
				headers.accept = headers.accept.replace("image/webp,", "");
				requisicao.continue({ headers });
			} else {
				requisicao.continue();
			}
		});
	}

	// Executa Lighthouse
	const { lhr } = await lighthouse(url, {
		port: new URL(browser.wsEndpoint()).port,
		output: "json",
		logLevel: "error",
		onlyCategories: ["performance"],
	});

	await browser.close();

	return {
		lcp: lhr.audits["largest-contentful-paint"].numericValue,
		fcp: lhr.audits["first-contentful-paint"].numericValue,
		speedIndex: lhr.audits["speed-index"].numericValue,
		pesoTotalBytes: lhr.audits["total-byte-weight"].numericValue,
	};
}

async function compararPerformanceWebP(url) {
	console.log(`Testando ${url}...`);

	const semWebP = await executarTeste(url, false);
	console.log("Sem WebP:", semWebP);

	const comWebP = await executarTeste(url, true);
	console.log("Com WebP:", comWebP);

	// Calcula melhorias
	const melhoriaLCP = (
		((semWebP.lcp - comWebP.lcp) / semWebP.lcp) *
		100
	).toFixed(2);
	const melhoriaBytes = (
		((semWebP.pesoTotalBytes - comWebP.pesoTotalBytes) /
			semWebP.pesoTotalBytes) *
		100
	).toFixed(2);

	console.log(`\nResultados:`);
	console.log(`Melhoria LCP: ${melhoriaLCP}%`);
	console.log(`Redução de peso em bytes: ${melhoriaBytes}%`);
}

// Executa teste no seu site
compararPerformanceWebP("https://exemplo.com");

Técnicas Avançadas de Implementação WebP

Para sites com estratégias maduras de otimização de imagem, estas técnicas avançadas oferecem benefícios adicionais:

1. WebP Responsivo com Qualidade Adaptativa

Gere múltiplas versões WebP baseadas nas capacidades do dispositivo:

const sharp = require("sharp");
const fs = require("fs");

async function gerarWebPResponsivo(caminhoEntrada, dirSaida) {
	const nomeArquivo = path.basename(caminhoEntrada, path.extname(caminhoEntrada));

	// Tamanhos de imagem para gerar
	const tamanhos = [320, 640, 960, 1280, 1920];

	// Gera cada tamanho
	for (const largura of tamanhos) {
		const caminhoSaida = path.join(dirSaida, `${nomeArquivo}-${largura}.webp`);

		// Calcula qualidade - qualidade maior para imagens maiores
		const qualidade = Math.max(60, Math.min(80, Math.floor(largura / 30)));

		await sharp(caminhoEntrada)
			.resize(largura)
			.webp({ quality: qualidade })
			.toFile(caminhoSaida);

		console.log(`Gerado ${caminhoSaida} com qualidade ${qualidade}`);
	}

	// Gera atributo srcset
	const srcset = tamanhos
		.map((tam) => `${nomeArquivo}-${tam}.webp ${tam}w`)
		.join(", ");

	return srcset;
}

2. Lazy-conversion Client-side com Service Workers

Para sites com uma grande biblioteca de imagens legadas, implemente progressive enhancement:

// service-worker.js
self.addEventListener("fetch", (event) => {
	const url = new URL(event.request.url);

	// Intercepta apenas requisições de imagem para JPG e PNG
	if (
		/\.(jpe?g|png)$/i.test(url.pathname) &&
		event.request.headers.get("accept").includes("image/webp")
	) {
		// Muda requisição para versão WebP
		const webpUrl = url.pathname.replace(/\.(jpe?g|png)$/i, ".webp");

		event.respondWith(
			fetch(webpUrl)
				.then((resposta) => {
					if (resposta.ok) return resposta;

					// Fallback para imagem original se WebP não disponível
					return fetch(event.request);
				})
				.catch(() => fetch(event.request))
		);
	}
});

3. Otimização de Qualidade com Análise de Similaridade Visual

Implemente configurações de qualidade adaptativas baseadas no conteúdo da imagem:

const sharp = require("sharp");
const { ssim } = require("ssim.js");
const fs = require("fs-extra");

async function encontrarQualidadeWebPOtima(caminhoImagem) {
	// Carrega imagem original
	const bufferOriginal = await fs.readFile(caminhoImagem);
	const imagemOriginal = await sharp(bufferOriginal).raw().toBuffer();
	const { width, height } = await sharp(bufferOriginal).metadata();

	let melhorQualidade = 80; // Qualidade padrão
	let melhorTamanho = Infinity;
	const similaridadeAlvo = 0.95; // 95% similaridade

	// Tenta qualidades de 50 a 90
	for (let qualidade = 50; qualidade <= 90; qualidade += 5) {
		const bufferWebP = await sharp(bufferOriginal)
			.webp({ quality: qualidade })
			.toBuffer();

		// Converte WebP de volta para raw para comparação
		const webpRaw = await sharp(bufferWebP).raw().toBuffer();

		// Calcula similaridade
		const similaridade = ssim(imagemOriginal, webpRaw, width, height).mssim;

		// Se similaridade é aceitável e tamanho é menor
		if (similaridade >= similaridadeAlvo && bufferWebP.length < melhorTamanho) {
			melhorQualidade = qualidade;
			melhorTamanho = bufferWebP.length;
		}
	}

	return melhorQualidade;
}

Estudos de Caso Reais

Estudo de Caso 1: Migração de Plataforma E-commerce

Plataforma: Loja Shopify Plus com 12.000+ imagens de produto

Abordagem de Implementação:

App personalizado usando a Asset API do Shopify
Geração WebP automatizada ao upload de imagem
Entrega baseada em CDN com client hints
Otimização de imagem responsiva

Resultados:

64% de redução no payload de imagens
LCP melhorado em 28% (2.3s → 1.8s)
Taxa de conversão mobile aumentou 6.2%
Tempo médio de carregamento de página reduzido em 34%

Estudo de Caso 2: Otimização de Site de Mídia

Plataforma: Site de notícias baseado em WordPress com 50.000+ imagens históricas

Abordagem de Implementação:

Processamento batch em background para imagens legadas
Plugin personalizado para geração WebP automática
Distribuição CloudFront com Edge Lambda para entrega
Lazy-loading de imagem com LQIP (Low Quality Image Placeholders)

Resultados:

71% de redução em bandwidth para assets de imagem
Core Web Vitals passando threshold para 94% das páginas (acima de 62%)
38% de melhoria em viewability de anúncios
41% de redução na taxa de rejeição para usuários mobile

Preparando Sua Estratégia de Imagem para o Futuro

Enquanto WebP oferece vantagens significativas hoje, o panorama de formatos de imagem continua a evoluir:

1. Preparando-se para AVIF e JPEG XL

Formatos de próxima geração como AVIF e JPEG XL oferecem compressão ainda maior:

<picture>
	<!-- Ordenação à prova de futuro do mais ao menos eficiente -->
	<source srcset="imagem.avif"
  type="image/avif"
  />
	<source srcset="imagem.jxl"
  type="image/jxl"
  />
	<source srcset="imagem.webp"
  type="image/webp"
  />
	<img src="imagem.jpg"
  alt="Descrição"
  />

</picture>

2. Implementando Content Negotiation com Headers Accept

Content negotiation server-side fornece uma solução limpa para suporte multi-formato:

Exemplo Node.js Express:

const express = require("express");
const app = express();

app.get("/images/:imagem", (req, res) => {
	const caminhoImagem = req.params.imagem;
	const acceptHeader = req.headers.accept || "";

	// Remove extensão para seleção de formato
	const nomeBase = caminhoImagem.replace(/\.[^/.]+$/, "");

	// Verifica header accept para formatos suportados
	if (acceptHeader.includes("image/avif")) {
		res.type("image/avif").sendFile(`${nomeBase}.avif`);
	} else if (acceptHeader.includes("image/webp")) {
		res.type("image/webp").sendFile(`${nomeBase}.webp`);
	} else {
		// Determina formato original (jpg/png)
		const extOriginal = caminhoImagem.match(/\.(jpe?g|png)$/i)
			? caminhoImagem.match(/\.(jpe?g|png)$/i)[0]
			: ".jpg";
		res.type(
			`image/${extOriginal === ".jpg" || extOriginal === ".jpeg" ? "jpeg" : "png"}`
		).sendFile(`${nomeBase}${extOriginal}`);
	}
});

app.listen(3000);

Conclusão: Melhores Práticas para Implementação WebP

Implementar WebP em escala requer planejamento e execução cuidadosos. Estas melhores práticas garantem máximos benefícios de performance mantendo compatibilidade:

Use o padrão do elemento picture para a mais ampla compatibilidade
Implemente detecção server-side ou baseada em CDN para entrega otimizada
Automatize a conversão através de processos de build ou integrações CMS
Mantenha paridade de qualidade entre formatos para garantir experiência de usuário consistente
Teste completamente em diferentes navegadores e dispositivos
Meça ganhos de performance para demonstrar ROI e identificar oportunidades de otimização

Seguindo estas melhores práticas, você pode implementar WebP com sucesso em todo o seu site, alcançando melhorias significativas de performance enquanto garante compatibilidade perfeita com todos os navegadores. As melhorias de velocidade resultantes não apenas melhoram a experiência do usuário mas também impactam positivamente métricas SEO e taxas de conversão.

No competitivo panorama digital de hoje, otimização de imagem não é mais opcional—é essencial. Implementação WebP representa uma das formas mais efetivas de melhorar drasticamente a performance do site mantendo qualidade visual. Adotando uma abordagem sistemática para implementação WebP, você pode transformar o perfil de performance do seu site enquanto estabelece uma base para futuras tecnologias de otimização de imagem.