...
✅ Notícias, temas e plug-ins da WEB e do WordPress. Aqui compartilhamos dicas e as melhores soluções para sites.

Otimização de imagens usando o pacote artisansweb / image-otimizer

39

Já faz 4 anos que estou executando este blog. Junto com este blog, também tenho um canal no YouTube onde compartilho vídeos que mostram como implementar meus artigos.

Eu acredito em código aberto. No meu site, não realizo nenhuma assinatura paga, não vendo e-books ou cursos. Gosto de manter os recursos gratuitos. Com isso em mente, criei meu primeiro pacote GitHub artisansweb / image-optimizer que faz a tarefa de otimizar imagens para seu site.

Já escrevi alguns artigos sobre otimização de imagens. Até agora, o TinyPNG era meu favorito e ainda é. Mas a limitação do TinyPNG é que eles permitem otimizar 500 imagens gratuitas por mês. Acima de 500 imagens, você cobrará por imagem.

Alguns dos artigos anteriores sobre otimização de imagem:

Existem outros pacotes também, mas eles exigem que instalemos softwares como JpegOptim, Optipng, etc. em nossa máquina. Essa também não é uma solução viável.

No ano passado, estava trabalhando em um projeto de cliente que tem milhares de imagens necessárias para compactar. Estávamos à procura de código aberto e serviço eficiente que possa fazer o nosso trabalho. Então conhecemos o reSmush.it, que é um serviço totalmente gratuito para a otimização de imagens.

Embora eu tenha escrito um artigo sobre reSmush.it, sinto que posso criar um pacote GitHub a partir dele e fiz isso. Se você ler meu artigo em reSmush.it, verá que ele precisa adicionar cerca de 25-30 linhas de código. Mas se você escolher o pacote, isso pode ser feito em 5-6 linhas.

Dito isso, vamos discutir como instalar e usar o artisansweb/image-optimizerpacote.

Otimização de imagens usando PHP

Primeiramente, você precisa instalar o pacote usando o Composer executando o comando:

composer require artisansweb/image-optimizer

Após a instalação do pacote, você pode otimizar a imagem usando o código abaixo.

<?php
require_once "vendor/autoload.php";
 
use ArtisansWebOptimizer;
 
$img = new Optimizer();
 
$source = 'SOURCE_PATH_OF_IMAGE';
$img->optimize($source);

Aqui, você precisa passar o caminho completo do diretório da imagem de origem e sua imagem de origem é otimizada automaticamente. Às vezes, você precisa manter a imagem original e armazenar a versão otimizada em outro diretório. Nesse caso, você pode usar um segundo parâmetro para o destino.

<?php
$source = 'SOURCE_PATH_OF_IMAGE';
$destination = 'DESTINATION_PATH_OF_IMAGE';
$img->optimize($source, $destination);

Usando o código acima, você pode otimizar suas imagens que estão lá dentro de seu diretório. No entanto, eu recomendaria otimizar a imagem no upload para que você não precise executar tarefas de otimização separadamente.

O usuário pode otimizar a imagem no upload da seguinte maneira.

<?php
require_once "vendor/autoload.php";
 
use ArtisansWebOptimizer;
 
if (isset($_POST['submit'])) {
    $img = new Optimizer();
    move_uploaded_file($_FILES['file']['tmp_name'], 'images/'.$_FILES['file']['name']);
    $img->optimize('images/'.$_FILES['file']['name']);
}
?>
 
<form method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" name="submit" value="Submit" />
</form>

Embora o reSmush.it tenha compactado bilhões de imagens até agora, é possível que seu serviço esteja inativo por algum motivo. Lidei com este cenário no pacote. Por alguma razão, se o pacote não obtiver a versão otimizada de reSmush.it, então, como alternativa, ele usa os métodos nativos do PHP como imagecreatefromjpeg, imagecreatefrompng, imagecreatefromgif, imagejpeg para otimização.

Existem vários novos recursos em andamento que irei adicionar no pacote e lançá-lo em breve.

Ficarei feliz se você usar o pacote e me contar como está funcionando na seção de comentários abaixo. Por favor, compartilhe seus comentários para que juntos possamos melhorar este pacote que ajudará a comunidade.

Fonte de gravação: artisansweb.net

Este site usa cookies para melhorar sua experiência. Presumiremos que você está ok com isso, mas você pode cancelar, se desejar. Aceitar Consulte Mais informação