Como otimizar imagens para e-mail e web

1. Boas-vindas ao curso: Oi, sou Vanessa Bias. Eu possuo e opero a Bias Creative Company, um estúdio de design de serviço completo para uma pessoa que logo estará sediado em Los Angeles, Califórnia. Nesta classe, abordaremos diferentes métodos para otimizar suas fotografias e gráficos para a web para ajudá-lo a carregar designs de sites ou e-mails mais rapidamente sem sacrificar muita qualidade. Vamos começar. 2. Por que otimizar?: Se você é como eu, você vive em uma área metropolitana onde Internet de alta velocidade ilimitada é uma realidade para a maioria de nossa comunidade. No entanto, existem muitos lugares no mundo onde apenas ter uma conexão com a Internet é um luxo. Mesmo nos Estados Unidos, existem algumas comunidades onde a Internet de alta velocidade é incomum. Como um web designer, é sua responsabilidade garantir uma boa experiência para seus usuários e isso inclui o crescente público global que pode acontecer em seu site. Raspar alguns segundos do tempo de carregamento da página web pode fazer toda a diferença na experiência do visitante e na taxa de rejeição. 3. Digitalize o tempo de carregamento da página do seu site: Para o seu projeto de classe, usaremos uma ferramenta de peso de página gratuita da imgix. Isso nos mostrará as imagens mais pesadas em seu site e dirá o que você pode fazer para otimizar. Então, para começar, vamos apenas digitar o URL aqui para o site. Este é o meu site. Você pode usar o seu próprio e ele vai otimizar ou analisar em segundo plano em vez, ele só vai demorar menos de um minuto. Assim, para o relatório de peso da página da área de trabalho, você pode realmente ver que o peso da página do meu site ou da página inicial, pelo menos, é bastante leve. No entanto, há uma economia potencial de 91%. Se você rolar para baixo, você pode ver onde ele está atualmente e onde ele pode estar tão longe quanto kilobytes ir. Você também verá a diferença no peso do código na página em comparação com o peso das imagens na página. A imagem de pior desempenho no meu site é a imagem de herói no topo da página. Então, parece que o que podemos fazer é que podemos realmente redimensioná-lo menor para caber o recipiente e podemos alterar o formato de saída. Se você rolar para baixo, você pode realmente ver três imagens que são ordenadas por economia de peso de imagem. Então use esta ferramenta para digitalizar o seu site e, em seguida, acompanhar comigo como eu otimizar algumas das imagens no meu próprio site nos próximos vídeos. 4. Como otimizar o PNG: Para começar, vamos otimizar a imagem de herói que foi o maior culpado pelo peso da página durante a digitalização da imagem. Aqui atrás eu tenho o Adobe Photoshop aberto. É o PSD original que eu uso para construir esta imagem. Nós vamos dizer para web e em um Mac é Shift, Command, Opção S. Então ele vai puxar para abrir sua janela web mais segura. Se você sabe algo sobre os diferentes formatos de imagem, você vai saber como, se é uma fotografia, você vai querer usar um PNG-24 ou JPEG. Se for muito limitado em sua palete de cores, você vai querer usar um GIF ou um PNG. Eu estou indo para ir com PNG-8 porque isso realmente não tem que muitas cores nele. Estamos com as 256 cores padrão. Vou clicar em “Salvar” e vamos salvá-lo. Você pode ver aqui a imagem salva em cerca de 43 kilobytes. Se formos para tinypng.com, esta é realmente uma ótima ferramenta para otimizar seus JPEGs e seus PNGs. Vamos arrastar essa imagem para aqui. Como você pode ver, passou de 42,6 kilobytes para 35,2 kilobytes. Outra coisa a observar é que o tamanho do arquivo da imagem é realmente o tamanho correto que é necessário. A digitalização original mostrou que a imagem era de cerca de 2.000 pixels, e não precisávamos de uma imagem tão grande. 5. Como otimizar GIFs estados: Está bem. Agora vou otimizar. Não era uma imagem que foi incluída como uma das imagens mais pesadas da página. Mas eu acho que este será um ótimo exemplo para mostrar bom uso para GIFs, como você quiser chamá-lo. Vou otimizar esta imagem aqui. Tem o logotipo preto e branco. Esta imagem é realmente salva agora como um JPEG, que eu abri aqui no Photoshop. Eu guardo para a web. Você pode realmente ver se é um JPEG com uma qualidade de 100 por cento, é cerca de 34,96 kilobytes. O que eu vou usar, eu vou salvá-lo como um GIF. Você pode brincar com as cores aqui, 256 cores vão te dar 22 kilobytes, que é menor, mas não precisamos de 256 cores para uma imagem que tem apenas duas cores. O que vou fazer é reduzir isto para 100. Você pode ver até mesmo ampliando, a qualidade ainda é boa. Há uma razão para não querer fazer duas cores. Isso é porque ele vai diminuir um pouco dessa nitidez e você vai começar a obter essas linhas de bitmap irregulares. Acho que 100 é muito bom. Ou separá-lo, reduzi-lo para 75, e isso ainda é muito bom. Isso agora é de 18,85 kilobytes, e isso é cerca de metade do tamanho original da imagem. 6. Como otimizar JPEGs: Agora vou mostrar a vocês como otimizar um JPEG. Esta imagem aqui é salva como um JPEG, e na verdade deve ser porque ela inclui fotografias em imagens altamente complexas nele. Há um monte de cores acontecendo aqui. Então você quer mantê-lo como um JPEG ou um PNG 24. Mas vamos ver o que um JPEG faz agora. Se usarmos o atalho livre seguro, podemos ver que ele está voltando para o formato original ou o último salvo, que é um presente, e ele realmente não parece muito bom. Você vê muito da pixilação aqui, porque está tentando criar uma fotografia com cores muito limitadas. Vamos mudá-lo para um JPEG. Neste momento, a qualidade máxima é de 122,8 kilobytes. Há este botão aqui onde é otimizado. Você pode ver que ele mastiga cerca de cinco kilobytes para ter isso verificado. O que vamos fazer é abaixar algumas dessas cores um pouco. Se você quiser vê-los lado a lado, você clica em dois para cima. Você pode ver a imagem original versus como você está mudando as configurações do lado aqui, você vê se ele vai todo o caminho para baixo, você pode ver toda aquela coisa de artefato que está acontecendo, toda essa pixilação. Nós não queremos isso. Vamos apenas começar do zero, aumentar lentamente a qualidade até chegar a um ponto em que estamos bem com a aparência. Eu não quero dizer que cerca de 65 por cento agora é bom para mim. O original era 469 kilobytes no tamanho original, economizado para 48,62 como um JPEG otimizado. Você pode usar PNG minúsculo em JPEGs. Quando terminou de salvar, ele economizou cerca de 51 kilobytes. Nós vamos fazer é, nós vamos apenas pegar isso e arrastá-lo, e como você pode ver, ele passou de 50 kilobytes para 44 kilobytes, economizando 14%. Vemos o que baixou. Você pode ver, há um pouco mais artefatos lá do que havia originalmente, é uma das razões pelas quais eu gosto de usar PNG minúsculo para PNGs, ou PNG 24 é se você pode salvar assim, em vez de salvar como um JPEG, mas ainda menor do que era originalmente. 7. O que é um WEBP?: Outra coisa interessante para compartilhar agora é um novo formato de imagem que está acontecendo chamado WebP. Isso é considerado superior aos PNGs porque o tamanho do arquivo é cerca de 26% menor e 25-34% menor do que JPEGs. O único problema com WebPs agora é que ele não é totalmente compatível com a maioria dos navegadores populares. Como você pode ver, ele é totalmente compatível com Chrome, totalmente compatível com Chrome para Android, UC Browser para Android, Opera Mini e Samsung Internet, mas não é compatível com Safari, Firefox, Internet Explorer ou Borda. Esperemos que este novo formato de imagem ganhe tração e se torne prontamente disponível e todos possam usá-lo, mas no momento, ele não está totalmente funcional para todos os usuários. 8. Projeto final: Agora que você tem os conceitos básicos de otimização de suas imagens para a web, é hora de trabalhar em seu projeto. Primeiro, use a página [inaudível] para revisar as áreas de sua página da Web para melhorias. Faça uma captura de tela de seus resultados para adicionar ao seu projeto. Em seguida, use o que você aprendeu para otimizar suas imagens. Anote antes e depois dos tamanhos da imagem e anote qualquer outra coisa que você possa ter alterado, como o formato do arquivo de imagem. Em seguida, recarregue todas as suas imagens para o seu site, substituindo os arquivos originais. Finalmente, execute novamente a ferramenta de peso da página para ver o quanto a velocidade do seu site melhorou ou pode ter havido qualquer coisa que você tenha esquecido. Faça uma captura de tela para mostrar as melhorias do antes e do depois de suas páginas da Web. Vou postar meu projeto como exemplo. Espero que tenha gostado desta aula cobrindo o básico de otimizar seus gráficos e fotografias para a web.