Skip to content

Posts tagged ‘imagem’

18
Jul

Convertendo Imagens via Terminal

Recentemente fui nomeado como website mantainer do projeto TextFlow (projeto do Yuri Malheiros). Para que eu consiga fazer as mudanças no site utilizo ssh pra acessar o servidor, que foi liberado pelo meu amigo Og Maciel, responsável pela hospedagem do site do projeto.

E ao me deparar com a seguinte sitação: tinha acabado de enviar uma imagem pro servidor e seu tamanho não estava adequado ao layout. Me veio a seguinte questão: é possivel alterar o tamanho de uma imagem utilizando o terminal?

Fazendo essa mesma pergunta pro Google, ele me responde: Sim!

Foi ai que encontrei um artigo no Estúdio Livre falando sobre o assunto.

Para redimensionar uma imgem utilizando o terminal, podemos fazer isso utilizando a ferramenta convert que “converte entre diversos formatos de imagem bem como redimensiona, borra, corta, tira ruído, desenha, roda e mais. O convert usa o ImageMagick para realizar as operações. Digite “man convert” em um terminal para obter mais ajuda.”

Para redimensionarmos uma imagem basta o simples comando:

convert imagem.jpg -scale 50% imagem_pequena.jpg

Onde:

  • convert é nossa ferramenta.
  • imagem.jpg é a imagem original.
  • -scale 50% estamos dizendo para a ferramenta redimensionar a imagem original para 50% do tamanho original.
  • e finalmente imagem_pequena.jpg é o nome do arquivo que conterá a imagem redimensionada.

Com isso pude alterar o tamanho da imagem que não estava de acordo com o layout sem ter que modificar usando um editor de imagens e depois novamente ter que enviar o arquivo pro servidor.

Para maiores detalhes sobre as outras funcionalidades você pude consultar o manual dessa ferramenta utilizando o comando “man convert” ou pode visitar o artigo do Estúdio Livre para alguns exemplos.

[update] Para converter mais de um arquivo basta seguir a dica que o André Noel indicou [/update]

3
Oct

Modo correto de mostrar tooltip em imagens

Encontrei este tutorial que aborda o assunto de tooltip em imagens. Ao contrário de que muitos acham, inclusive eu achava, é que o atributo alt incluída dentro da tag img já mostrava como tooltip. Porém o atributo alt tem a semântica de mostrar o texto que lhe foi atribuido em caso da imagem não ser carregada.

Então, o que deve ser feito para mostrar um tooltip em uma imagem? Simples, mantém o atributo alt para que, caso a imagem não seja carregada, mostre o alternate text. E, assim como se faz em links, adicionar o atributo title e atribuir o texto que se deseja como tooltip a esse atributo.

Modo errado de mostrar a tooltip:

<img src="http://imagem.png" alt="Texto mostrado quando a imagem não está disponível" />

Modo correto de mostrar a tooltip:

<img title="Texto do tooltip para esta imagem" src="http://imagem.png" alt="Texto mostrado quando a imagem não está disponível" />

Lembrando que, isso é somente para navegadores que resolveram esse “problema”.

Fonte: ALT and TITLE.