Você já ouviu falar que a Web se tornou mais visual e que imagens excelentes no site da sua empresa são importantes.
Mas essas imagens podem ser o flagelo dos visitantes do seu site. As imagens representam 1MB dos 1.7MB que a página da Web média contém.
Isso pode não ser um grande problema para seus visitantes em computadores de mesa que usam conexões de alta velocidade com a Internet. No entanto, se você está vendo ou quer ver mais tráfego de visitantes de dispositivos móveis, essas imagens podem ser um problema. Páginas da Web pesadas em imagens podem levar muito tempo para serem baixadas. Os visitantes ficam frustrados e saem do site.
$config[code] not foundVocê pode ter implementado um Web design responsivo, pensando que resolve todos os seus problemas móveis. E é verdade que um Web design responsivo resolve alguns problemas. Ele organiza e exibe automaticamente os elementos do seu site para serem visualizados em telas menores e mais estreitas.
Mas o Web design responsivo não é a resposta para tudo. Não resolve necessariamente o problema de download de imagens. Mesmo com design responsivo, muitas vezes essas imagens pesadas ainda são baixadas de qualquer maneira. Como especialista em desempenho Web Yoav Weiss aponta sucintamente no site da Opera:
“Responsive Web Design RWD combinou novos recursos de navegador e técnicas de CSS para criar websites que se adaptam ao dispositivo que os exibe, e parecem ideais em todos os lugares. Isso permitiu que os desenvolvedores parassem de se preocupar com a detecção de dispositivos não confiáveis e pensassem em seus sites em termos de dimensões da janela de visualização.
Mas, embora os sites do RWD parecessem diferentes em cada dispositivo, a maioria continuava a baixar os mesmos recursos para todos os dispositivos. ”
O novo
Se você não sabe nada sobre código HTML, uma definição não técnica é: é um idioma especial. Quando usado nos bastidores do código do seu site, esse idioma fornece instruções sobre como o navegador deve exibir o texto e as imagens. O novo elemento Imagem é um tipo de linguagem de marcação HTML. Está escrito assim (de acordo com o Grupo de Comunidade de Imagens Responsivas): O elemento Imagem é sobre responsivo imagens, não responsivo desenhar. Para pessoas de negócios não-técnicos, essa distinção pode parecer pequena. No entanto, quando se trata do desempenho do seu site em dispositivos móveis, isso pode ser significativo. De acordo com um relatório da ArsTechnica, o novo elemento de marcação resolve os problemas causados por imagens que deveriam ser vistas em um monitor de tamanho real - imagens que não se traduzem bem em dispositivos móveis. o
“Quando o navegador encontra um elemento Picture, ele primeiro avalia as regras que o desenvolvedor da Web pode especificar. *** Depois de avaliar as várias regras, o navegador escolhe a melhor imagem com base em seus próprios critérios. Esse é outro recurso interessante, pois os critérios do navegador podem incluir suas configurações. Por exemplo, futuros navegadores podem oferecer uma opção para impedir que imagens de alta resolução sejam carregadas por meio de 3G, independentemente do que qualquer elemento de imagem na página possa dizer. Quando o navegador sabe qual imagem é a melhor escolha, ela carrega e exibe essa imagem em um bom e velho elemento img. … O que acontece é que a Picture envolve uma tag img. Se o navegador é muito antigo para saber o que fazer de um Nem todos os desenvolvedores aceitaram o novo elemento Picture em primeiro lugar. A história da Ars Technica descreve o processo pelo qual os líderes da comunidade de desenvolvimento da Web passaram para chegar ao ponto de $config[code] not found Mas a questão agora parece resolvida, com o novo elemento HTML de imagem sendo adotado. o
Como pessoas de negócios, uma coisa importante a saber é que Implementar o elemento Picture HTML para imagens é algo para discutir com seu desenvolvedor da Web. Os tecnicamente atentos e os que fazem você mesmo podem ir aqui para aprender como usar o elemento Imagem. É um excelente artigo de Scott Gilbertson. Sinta-se à vontade para implementar
Imagens: Shutterstock; RICG O que é o elemento HTML de imagem?
Pontos-chave sobre o
