Como otimizar dinamicamente as imagens do seu site PHP
Aprenda a otimizar de forma dinâmica e diversificada as imagens do seu site PHP utilizando a biblioteca Image Resize Gumlet.
PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO
🤝 Contrate minha equipe para trabalhar no seu projeto. Conversar agora ▶
E aí pessoal, bora lá pra mais um post bem bacana. Hoje vou falar de otimização de imagens publicadas em sites, um dos fatores mais importantes para um carregamento rápido das páginas e também para conseguir uma boa pontuação no Google Pagespeed.
Existem várias maneiras de fazer a otimização, desde o Photoshop até ferramentas online, mas o foco neste post será com recursos do próprio PHP, de forma dinâmica, através da biblioteca da Gumlet.
Qualquer dúvida sobre o post, vai lá no final da página e deixe seu comentário. Não se esqueça também de assinar a news do site e me seguir nas redes sociais pra ficar por dentro das novidades.
Otimizando dinamicamente as imagens com PHP
Para explicar o funcionamento da biblioteca na prática, eu criei uma página simples que exibe várias versões de uma mesma imagem, onde temos a original e depois ela mesma redimensionada, cortada e otimizada.
Tá com preguiça de ler o tutorial? Blz, tem o vídeo completo sobre como otimizar dinamicamente as imagens do seu site PHP aqui! Ah, não tá com preguiça não? Então segue comigo na leitura!
Como a biblioteca é em PHP, você precisa de um servidor web com a linguagem rodando. No caso deste post eu utilizei o XAMPP, ficando mais fácil pra quem não tem tanta experiência em PHP conseguir acompanhar também.
O projetinho eu coloquei na pasta C:\xampp\htdocs\tutoriais\otimizar-imagens-php, mas fique à vontade para colocar no melhor caminho de pastas da sua máquina.
Clique aqui e baixe os arquivos para otimizar imagens dinamicamente com PHP.
O arquivo index.php é o responsável por criar a página que queremos, e nele tem as chamadas para as imagens no HTML, além da chamada para a biblioteca ImageResize.php e todas as rotinas para gerar novas imagens otimizadas.
O link para baixar a biblioteca é https://github.com/gumlet/php-image-resize, mas como links mudam as vezes, você também pode pesquisar na internet por Gumlet Image Resize.
<?php
include 'ImageResize.php';
$image = new \Gumlet\ImageResize('google-analytics.jpg');
$image->scale(50);
$image->save('google-analytics-2.jpg');
$image = new \Gumlet\ImageResize('google-analytics.jpg');
$image->crop(200, 200);
$image->save('google-analytics-3.jpg');
$image = new \Gumlet\ImageResize('google-analytics.jpg');
$image->quality_jpg = 10;
$image->save('google-analytics-4.jpg');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Otimizar Imagens</title>
</head>
<body>
<h4>Original</h4>
<img src="google-analytics.jpg" alt="">
<h4>Redimensionada</h4>
<img src="google-analytics-2.jpg" alt="">
<h4>Cortada</h4>
<img src="google-analytics-3.jpg" alt="">
<h4>Otimizada</h4>
<img src="google-analytics-4.jpg" alt="">
</body>
</html>
A linha de código a seguir cria um novo objeto com base na imagem original.
$image = new \Gumlet\ImageResize('google-analytics.jpg');
Depois, é definida a ação que será aplicada, neste caso temos scale, crop e quality_jpg.
$image->scale(50);
Pra finalizar, ele salva uma nova imagem com as alterações efetuadas.
$image->save('google-analytics-2.jpg');
Na página de download da biblioteca você tem vários exemplos de aplicação, então não deixe de praticar agora pra ver o que é possível fazer com as imagens do seu site de forma dinâmica.
Então é isso, eu espero que você tenha gostado desta publicação. Fique à vontade para compartilhar nas suas redes sociais para ajudar na divulgação e crescimento do site.
Aproveite para se inscrever no meu canal do YouTube e também na News do site pra ficar por dentro das novidades em artigos, tutoriais e cursos online.
Abraço e até a próxima!
