Hai unha serie de formatos de imaxe que se poden usar nas páxinas web. Algúns exemplos comúns son GIF , JPG e PNG . Os ficheiros SVG tamén se usan habitualmente nos sitios web de hoxe, dando aos diseñadores web outra opción para a imaxe en liña.
Imaxes GIF
Use ficheiros GIF para imaxes que teñan un número pequeno e fixo de cores. Os ficheiros GIF sempre se reducen a non máis de 256 cores únicas. O algoritmo de compresión para ficheiros GIF é menos complexo que para os arquivos JPG, pero cando se usa en imaxes con cores planas e texto, produce tamaños de arquivos moi pequenos .
O formato GIF non é adecuado para imaxes fotográficas ou imaxes con cores de degradado. Debido a que o formato GIF ten un número limitado de cores, os gradientes e as fotografías acabarán con bandas e pixelación cando se gardan como un ficheiro GIF.
En poucas palabras, usarías GIFs só para imaxes simples con só algunhas cores, pero tamén podes usar PNGs para iso tamén (máis en breve).
Imaxes JPG
Use imaxes JPG para fotografías e outras imaxes que teñan millóns de cores. Utiliza un complexo algoritmo de compresión que permite crear pequenos gráficos perdendo parte da calidade da imaxe. Isto chámase compresión "perdida" porque se perde algo da información da imaxe cando a imaxe está comprimida.
O formato JPG non é adecuado para imaxes con texto, grandes bloques de cor sólida e formas simples con bordos nítidos. Isto ocorre porque cando a imaxe está comprimida, o texto, a cor ou as liñas poden desdibujar e unha imaxe que non é tan nítida como sería gardada noutro formato.
As imaxes JPG úsanse mellor para fotografías e imaxes que teñen moitas e moitas cores naturais.
Imaxes PNG
O formato PNG foi desenvolvido como un substituto para o formato GIF cando parecía que as imaxes GIF estarían suxeitas a unha taxa de dereitos. Os gráficos PNG teñen unha mellor taxa de compresión que as imaxes GIF que dan lugar a imaxes máis pequenas que o mesmo ficheiro gardado como GIF. Os ficheiros PNG ofrecen transparencia alfa, o que significa que pode ter áreas das túas imaxes que sexan totalmente transparentes ou incluso usen un rango de transparencia alfa. Por exemplo, unha sombra de caída usa unha variedade de efectos de transparencia e sería axeitado para un PNG (ou pode simplemente acabar connosco usando sombras CSS).
As imaxes PNG, como GIF, non son axeitadas para fotografías. É posible desfacer o problema de bandas que afecta ás fotografías gardadas como ficheiros GIF usando cores verdadeiras, pero isto pode xerar imaxes moi grandes. As imaxes PNG tamén non están ben soportadas por teléfonos celulares máis antigos e teléfonos con función.
Usamos PNG para calquera arquivo que requira transparencia. Tamén usamos PNG-8 para calquera ficheiro que sexa axeitado como GIF, usando este formato PNG.
Imaxes SVG
SVG significa Scalable Vector Graphic. A diferenza dos formatos baseados en ráster atopados en JPG, GIF e PNG, estes ficheiros usan vectores para crear arquivos moi pequenos que se poden renderizar en calquera tamaño sen perda de calidade de aumento no tamaño do ficheiro. Son creados para ilustracións como íconos e incluso logotipos.
Preparando imaxes para a entrega web
Independientemente do formato de imaxe que utilice, eo seu sitio web é seguro usar varios formatos diferentes en todas as súas páxinas, cómpre garantir que todas as imaxes nese sitio estean preparadas para a entrega web . As imaxes demasiado grandes poden facer que un sitio funcione lentamente e que teña un impacto no rendemento xeral. Para combater isto, estas imaxes deben ser optimizadas para atopar o equilibrio entre a alta calidade eo menor tamaño de arquivo posible a ese nivel de calidade.
Escoller o formato das imaxes correctas é parte da batalla, pero asegurarse de que preparou eses ficheiros é o seguinte paso neste importante proceso de entrega web.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard.