54
votos
Aceito
Reduzir o tamanho de uma imagem e manter a proporção com CSS
Falta o valor auto para o width e height. Assim a escala é feita conforme largura ou altura (o que atingir primeiro) e a proporção é feita automaticamente.
.container img {
max-width:200px;
...
47
votos
Como contar os objetos presentes na imagem com PHP?
Vale ressaltar que nesta resposta prezou-se mais pela simplicidade da solução a que a performance da mesma.
Lógica
O mais natural de se pensar é: vou percorrer todos os valores da minha matriz ...
30
votos
Aceito
Uma imagem base64 carrega mais rápido que uma url?
Primeiramente quero que pense que tudo é RELATIVO e apenas experiencias de cada situação poderão determinar CASO á CASO qual terá melhor performance no seu projeto e servidor.
Existem dois ambientes/...
19
votos
Reduzir o tamanho de uma imagem e manter a proporção com CSS
'Solução' usando JQuery: Substitua o elemento IMG por um outro que suporte background, como DIV. Passe o valor de src para background-image, assim como os valores de largura e altura da tag IMG ...
19
votos
Aceito
Como inverter (espelhar/flip) uma imagem
É possível sim, com a propriedade tansform: scaleX(..) fazes isso facilmente:
img {
width: 260px;
}
#esquerda {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-...
18
votos
Aceito
Upload de imagens com crop e resize, com jQuery e PHP
Vamos lá, vamos lá. Pode ser que a explicação seja longa.
Pontos a esclarecer
Quando você utiliza um crop via Javascript/jQuery, você não está cortando a imagem propriamente dita. Você está apenas ...
17
votos
Aceito
Algoritmo de Anti-Aliasing em Java
Estratégias para o anti-aliasing
O algoritmo de anti-aliasing em geral não é muito complexo, mas ele torna-se complexo quando você entra nos detalhes mais sórdidos e nas otimizações. Para efeitos de ...
17
votos
Aceito
O que é um SVG?
O que é svg ?
SVG é a abreviatura de Scalable Vector Graphics que pode ser traduzido do inglês como gráficos vetoriais escaláveis. Trata-se de uma linguagem XML para descrever de forma vetorial ...
16
votos
Aceito
Qual o DPI recomendado para imagens utilizadas em websites?
Resposta rápida:
Tanto faz :)
Calma, tem explicação!
DPI significa "Dots per Inch", ou "Pontos por polegada". No arquivo digital, esta informação é um mero número armazenado nos metadados.
O ...
13
votos
Aceito
Como acessar a imagem do print screen?
Quando você usa a tecla Print Screen, uma cópia do que está na tela vai para a Área de Transferência. É o mesmo lugar para onde vai qualquer informação que você copia ou recorta.
Em .NET, você pode ...
13
votos
Reduzir o tamanho de uma imagem e manter a proporção com CSS
No CSS existe ainda a propriedade object-fit que define como um objeto deve se comportar perante um elemento com dimensões definidas. Para efeito de exemplo, vamos considerar um elemento quadrado com ...
12
votos
Aceito
Como funciona a lógica para se descobrir o tamanho da imagem?
Obviamente o arquivo possui metadados com as informações relevantes. Normalmente é um cabeçalho com os dados, seu formato varia em cada tipo de imagem de acordo com alguma especificação normalmente ...
12
votos
Como contar os objetos presentes na imagem com PHP?
Se você puder instalar uma extensão é possível fazer com php-opencv.
Primeiro, com a imagem com nome feijao.jpg salva, podemos lê-la em tons de cinza.
$image = imread('feijao.jpg', ...
11
votos
Aceito
Como substituir o src de uma tag img?
Faça com javascript, coloque um id ou classe para indentificar, resgate com javascript, e altere a propriedade
var img = document.getElementById('teste');
img.src = 'teste';
desculpe...
para vc ...
11
votos
Aceito
Redimensionar imagem com PHP mantendo proporção
Solução com a biblioteca GD
Uma coisa muito comum nas instalações padrão do PHP é a biblioteca GD estar integrada na distribuição. Se for este o seu caso, basta usar a função imagecopyresampled() ...
11
votos
Como faço para o navegador não armazenar cache de imagem com HTML ou PHP?
Solução 1 - Servindo as imagens via PHP:
Esta é uma solução para servir imagens de maneira a não ficarem no cache do navegador, setando os headers apropriados via PHP:
<?php
header( 'Expires: ...
10
votos
Aceito
Existe alguma vantagem em reunir todos os ícones de um site em uma única imagem?
A questão aqui é diminuir a quantidade de requisições que o navegador faz ao servidor e, portanto, otimizar o tempo de carregamento da página e diminuir o tempo de resposta ao usuário.
Desempenho
Isso ...
10
votos
Aceito
Como recortar uma imagem - HTML
Recortar imagem usando object-fit
Podes recortar uma imagem com a tag img utilizando o object-fit da seguinte forma:
.objectImage {
width: 600px;
height: 120px;
object-fit: cover;
...
10
votos
Uma imagem base64 carrega mais rápido que uma url?
Uma imagem base64 carrega mais rápido que uma url?
Não, imagens codificadas são 37% maiores que as originais, o que irá aumentar a utilização da banda. Por outro lado, incluindo-o no arquivo irá ...
10
votos
Aceito
Quais são os formatos utilizados para se representar valores (cor, contraste, brilho) em imagens digitais?
Para imagens em memória, existem vários formatos possíveis, basicamente de acordo com o número de bits por pixel, que em geral pode variar de 1 (preto ou branco) até 32 (8 para o vermelho, 8 para o ...
9
votos
Como acessar a imagem do print screen?
Um código pronto para uso complementando a resposta do Renan:
using static System.Drawing.Imaging.ImageFormat; //Somente à partir do C# 6
using static System.Clipboard; //Somente à partir do C# 6, ...
9
votos
Aceito
Uso de memória imagens PHP
O consumo é alto mesmo pois além da leitura da imagem na memória ela é "decodificada" e estes dados decodificados também ficam na memória, podemos dizer que é quase impossível reduzir o pico do uso de ...
9
votos
Aceito
Como carregar imagem padrão caso o src="" não encontre?
Outros fallbacks mais simples que pode experimentar, com javascript:
<img src="imagem-nao-existe.png" onerror="this.src='fallback.png'">
Um exemplo no jsfiddle do @Randrade: https://jsfiddle....
9
votos
É possível fazer este efeito com CSS?
Em princípio, não tem muito o que fazer com CSS neste caso, e provavelmente seria melhor uma animação ou vídeo embedded.
Pra não ficar completamente sem solução, montei um exemplo de manipulação de ...
9
votos
Aceito
Devemos usar ícones em SVG ou PNG para websites?
Razões para o SVG ser uma boa escolha:
Ele suporta navegadores com janelas de qualquer tamanho suavemente, especialmente com o CSS background-size
você pode escalá-los para cima/para baixo, como para ...
8
votos
Como recortar uma imagem ao centro ao fazer o upload da mesma
Baixe o pacote JCrop e faça duas páginas assim:
Página Inicial: (crop.php)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Arquivo</title>
<link ...
8
votos
Contar quantos pixels de uma cor tem a imagem
Como a pergunta não tem detalhes, responderei sem detalhes. Seria alguma mais ou menos assim.
var count = 0;
var searchColor = Color.FromName("SlateBlue");
for (var x = 0; x < pictureBox1.Image....
8
votos
Aceito
Contar quantos pixels de uma cor tem a imagem
EDIÇÃO: Surgiu outra pergunta com um problema similar, mas utilizando
Java. Então eu essencialmente traduzi o código que criei aqui (e até
usei o mesmo exemplo). Se por um acaso algum leitor ...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
imagem × 700php × 157
html × 112
javascript × 88
android × 84
java × 76
css × 76
c# × 57
upload × 44
processamento-de-imagens × 32
jquery × 31
mysql × 29
banco-de-dados × 27
python × 26
html5 × 26
asp.net-mvc × 13
asp.net × 13
opencv × 13
css3 × 12
sql × 10
laravel × 10
c++ × 10
wordpress × 10
arquivo × 10
canvas × 10