Codificador de imagem Base64 online - conversor base64 Este utilitário on-line é um conversor entre dados de imagem binários (gif, jpg, png. File) e uma string base64. Você pode escrever saída base64 string representação da imagem diretamente para um código html ou uma folha de estilos CSS, para que o navegador não precisa de URL URL do servidor de solicitação extra da imagem e você pode acelerar suas páginas usando o código image-to-base64. Sample Image-to-64 html code Próxima amostra html tag contém tal amostra de imagem escrita diretamente para html como um base64 dados. A tag representa um pixel transparente GIF com 42Byte tamanho: ltimg altOne pixel transparente GIF srcdata: imagegifbase64, R0lGODlhAQABAIAAAAAAAAAH5BAEAAAAALAAAAAABAAEAAAIBRAA7 gt Como você pode ver, toda a 42Bytes um pixel GIF em Base64 representação acima tem um tamanho semelhante a um URL simples para essa imagem armazenada em servidor. Http obter cabeçalhos de resposta de amplificador são geralmente cerca de 1kB, codificação base64 tem 33 saída maior do que a imagem binária original, então você pode usar essa tag HTML para pequenos arquivos individuais com tamanho até 3kB para acelerar suas páginas html. Por exemplo, se você tomar uma única imagem de 1kB como base64, você economizará até 600B dados de transferência e um tempo de requestresponse. O código image-to-base64 é grande velocidade, por exemplo, em imagens de gradiente web. Se você quiser decodificar imagem no formato Base64, use o decodificador Base64. Notas de privacidade para este conversor on-line Não guardamos quaisquer dados publicados neste formulário. Não registramos nem monitorizamos os dados. Os dados codificados e dectypted são armazenados apenas memória e convertidos on-the-fly usando ASP ou código ASP. Código-fonte do codificador de imagem Base64Is um importante problema de segurança e Im certeza isso deve ser possível. Um exemplo simples: Você executa um portal comunitário. Os utilizadores estão registados e carregam as suas imagens. Seu aplicativo fornece regras de segurança sempre que uma imagem é permitida para ser exibida. Por exemplo, os usuários devem ser amigos em cada lado pelo sistema, a fim de que você pode ver alguém elses imagens enviadas. Aqui vem o problema: é possível que alguém rastreia os diretórios de imagem do seu servidor. Mas você quer proteger seus usuários de tais ataques. Se for possível colocar os dados binários de uma imagem diretamente na marcação HTML, você pode restringir o acesso do usuário de seus dirs de imagem ao usuário e agrupar sua aplicação web e passar os dados de imagem para o seu usuário e grupo do Apache diretamente em O HTML. A única fraqueza possível é a senha do usuário que seu aplicativo da Web é executado. Existe já uma possibilidade Se eu precisava de segurança no meu diretório de imagens eu não iria expor o diretório em tudo. Em vez disso, meus atributos img src referenciariam uma página que levaria um ID de usuário e um id de imagem como um parâmetro. A página validaria que o usuário realmente tinha acesso para ver essa imagem. Se tudo bem, envie o binário de volta. Caso contrário, não envie nada. Além disso, eu não usaria ids adivinháveis. Em lugar de aderir a algo como base 64 codificados guids. Com HTML5 você poderia usar a tag de tela e JavaScript para fazer isso. Você poderia talvez fazer algo com CSS ou um layout de tabela para desenhar uma imagem (provavelmente desempenho realmente ruim, resolução, portabilidade). De qualquer forma, não há pessoas parar de tirar suas fotos. Eles poderiam pegar uma captura de tela e cortá-la. Como Chris mencionou em sua resposta, ter IDs de imagem longa para que o URL para cada imagem não é fácil de adivinhar ou força bruta é importante. E nenhuma lista de diretórios em seus diretórios de webserver também é. Você pode mover as imagens para fora da raiz do documento em um diretório particular e entregá-los através de seu aplicativo, que tem acesso a esse diretório. Cada vez que seu aplicativo gera uma tag de imagem, ele também gera um token de segurança de curta duração que deve ser especificado ao acessar uma determinada imagem: As chances são muito raras de que alguém force bruta o token direito no momento certo com a imagem correta. Há pelo menos possibilidades de verificar o token em getImage: Acompanhe todas as tags de imagem em seu aplicativo e armazene registros em um banco de dados que vincule os tokens gerados aleatoriamente e os IDs de imagem aos usuários solicitantes. A ação getImage verifica os parâmetros fornecidos contra esse banco de dados. Gere o token como uma soma de verificação (MD5, CRC, whatever) sobre o ID do usuário, o ID da imagem e talvez o dia atual do ano, e não se esqueça de misturar um sal unguessable. A ação getImage irá recalcular a soma de verificação e verificá-la contra a especificada para verificar o acesso dos usuários. Esse método produzirá menos sobrecarga do que o primeiro. Eu acho que é mais fácil apenas aplicar as restrições de acesso da página HTML de referência novamente para a ação quotgetImagequot como alguém escreveu acima. No entanto, o método de soma de verificação pode reduzir o impacto no desempenho, uma vez que não acede a recursos externos para verificar a solicitação. Ndash the-banana-king Mar 12 10 at 2:21 Sua resposta 2017 Stack Exchange, IncInline imagens com URLs de dados Resumo. Saiba como incorporar imagens em suas páginas da Web com URLs de dados. Os dados: o esquema URI inclui imagens diretamente em suas páginas XHTML usando código em vez de arquivos externos, salvando solicitações HTTP valiosas. As imagens em linha usam o esquema URI de dados para incorporar imagens diretamente em páginas da web. Conforme definido pela RFC 2397, dados URIs são projetados para incorporar pequenos itens de dados como dados imediatos, como se eles foram referenciados externamente. O uso de imagens em linha salva solicitações HTTP em objetos referenciados externamente. Suporte do navegador para URLs de dados Enquanto o Opera 7.2, Firefox, Safari, Netscape e Mozilla suportam URIs de dados, o Internet Explorer 5-7 não. No entanto, Internet Explorer 8 supostamente faz, passando o teste Acid2. Tornando os URLs de dados uma alternativa viável para incorporar imagens decorativas menores. Há soluções alternativas que você pode usar para versões mais antigas do Internet Explorer. O Esquema de URL de Dados Você sem dúvida viu outros esquemas de URL em suas viagens pela Web, como http. Ftp E mailto: esquemas. O esquema de dados: URL é uma forma de inserir dados imediatos como se fosse incluído externamente. Os URLs de dados usam a seguinte sintaxe: No caso de uma imagem, você usará um tipo mime identificando a imagem (imagegif, por exemplo) seguida de uma representação base64 da imagem binária. Aqui está um exemplo: a imagem resultante é um ícone de pasta (imagem cortada): Imagens CSS e Inline Incorporadas em arquivos XHTML, as imagens de URL de dados não são armazenadas em cache para uso repetido, nem são armazenadas em cache a partir de Página para página. Uma técnica para habilitar o cache é incorporar imagens de segundo plano em arquivos CSS externos. CSS é armazenado em cache pelos navegadores e essas imagens podem ser reutilizadas com um seletor, por exemplo: Agora a imagem da pasta é repetida para cada instância do LI (ou você poderia usar uma classe ou ID aqui também). Que se parece com isso no Firefox (screenshot recortado): URL de dados Questões Há dois problemas com esta abordagem. Você deve recalcular os dados base64 e editar o arquivo CSS sempre que a imagem for alterada. Além disso, as versões 5-7 do IE não suportam imagens in-line. O primeiro problema tem uma solução PHP simples assim: Este código lê a imagem e converte-a para base64 automaticamente no servidor. Você paga por esta conveniência de edição com algum processamento no lado do servidor. Soluções alternativas do Internet Explorer Existem duas maneiras de evitar a falta de suporte ao URL de dados do IEs. Usando browser sniffing você pode simplesmente mostrar a imagem externa para o IE e as imagens incorporadas para outros navegadores. Ou você pode usar o JavaScript para simular suporte de URL de dados no IE, mas este método requer uma quantidade razoável de código JavaScript. O código PHP acima torna fácil a inserção do equivalente de base64 de uma imagem: Agora, quando o servidor analisar o arquivo CSS, ele codificará automaticamente o arquivo de imagem binário em base64 e enviará os dados de imagem embutidos codificados diretamente dentro do arquivo CSS. Em seguida, você precisa adicionar navegador sniffing para entregar a imagem para o IE ea imagem em linha para todos os outros. Você poderia fazer isso dentro do arquivo CSS com PHP ou com comentários condicionais como este: onde o arquivo ie. css teria uma referência de imagem normal, assim: Vantagens dos URLs de dados URLs de dados salvar solicitações HTTP. Quando combinado com sprites CSS. Os URLs de dados podem salvar várias solicitações HTTP. Seria interessante ver se os URLs de dados podem ser combinados com USEMAPS ou criar um sprite CSS de URL de dados. As solicitações HTTPS são simplificadas e o desempenho melhorado Desvantagens dos URLs de dados As imagens em linha não são suportadas no Internet Explorer 5-7, embora a versão 8 supostamente as suporta . A representação textual base64 de dados de imagem também ocupa mais bytes do que a imagem binária. Em nossos testes os dados base64 foram 39 a 45 maiores do que a imagem binária, mas com a compressão gzip a diferença foi reduzida para apenas 8 a 9 maiores. Otimizar suas imagens antes de converter para base64 reduziu o tamanho da seqüência proporcionalmente. Há limitações de tamanho para imagens embutidas. Navegadores só são necessários para suportar URLs até 1.024 bytes de comprimento, de acordo com o acima RFC. Navegadores são mais liberais no que theyll aceitar, no entanto. O Opera limita os URLs de dados a cerca de 4.100 caracteres. O Firefox suporta URLs de dados até 100K, então essa técnica é melhor usada para imagens pequenas e decorativas. Em resumo: O IE 5-7 não suporta mais etapas para atualizar o conteúdo incorporado (reencode, reembed) Limites de comprimento - a técnica é útil para imagens menores e decorativas Imagens codificadas em Base64 são aproximadamente 33 maiores do que seu equivalente binário URLs de dados Abaixo você encontrará alguns Exemplos ao vivo para testar em seu navegador, espelhando o código acima. Conclusão Com o lançamento do Internet Explorer 8, os URIs de dados se tornarão uma opção viável. Você pode incorporar imagens pequenas diretamente em páginas da web com URLs de dados para salvar solicitações HTTP. Os URLs de dados são uma maneira conveniente de criar páginas da web auto-incluídas que não dependem de objetos externos para renderizar. Leitura adicional CSS Sprites: Como o Yahoo eo AOL melhoram o desempenho da Web Saiba como AOL e Yahoo usam sprites CSS para melhorar o desempenho de suas páginas ocupadas. Os sprites CSS salvam as solicitações HTTP usando o posicionamento CSS para exibir seletivamente imagens de fundo compostas. Para maximizar a acessibilidade e usabilidade, os sprites CSS são mais utilizados para ícones ou efeitos decorativos. Dados: URI esquema Página de Wikipedia em URLs de dados URL de dados cozinha Converte imagens em URLs de dados Criador de URL de dados Também converte imagens em URLs de dados RFC 2397 A especificação de esquema de URL de dados do IETF.
No comments:
Post a Comment