prefacio
El primer artículo, el hermano menor hacer primero preséntese ^ ω ^
nombre no dice, edad 21 años, la Universidad de Wuhan, una sesión de dos de los graduados de 2016, desde el verano anterior a alto interés en la interfaz web y seis meses experiencias prácticas. marco en la ng alto, vue, reaccionar, y así entender completamente, sino también por el front-end de Intercambio de Grupos y Baidu se acumulará algo de poca experiencia. Por ejemplo la escritura es más tímido, con miedo de entendimiento no está en su lugar en el probable perjudicial para los demás. Pero después de ver nada más que hacer en el caso de Daniel Qué onda señalando en los comentarios, yo no gano grande que ^ ω ^ esperamos que usted puede echar un vistazo a mi artículo sostiene el punto de vista dialéctico, no hay nada malo con Por favor, hágamelo saber. ^ Ω ^
comparar
Aquí la comparación es en realidad tres juntos más reacios, para distinguir el tipo de la imagen, img / iconfont fondo y un par de referencia, el uso de distinguir la imagen, y el fondo de IMG es un par de referencia. Por lo tanto, uno por uno que vemos.
1.img con el fondo usando la diferencia
El enlace anterior es un contenido de alto nivel para la penetración img y el fondo. Muy muy potente, no puedo imaginar cómo SEO ir aquí, de acuerdo con la generación anterior, de acuerdo con el mecanismo de navegador resolución, html prioridad de la etiqueta de resolver , como el logotipo de la página web oficial requiere una imagen icónica muy llamativo, sería más apropiado para seleccionar img . Uso img Otra ventaja es que los mensajes de imagen. A medida que navegamos iQIYI sitio, a veces demasiado largo porque el texto bajo el vídeo, que se omiten, que tendrá un pequeño ratón para hacer estallar las burbujas pasar a la imagen, que muestra todo el contenido del título del vídeo. Esta es propicio para la lectura de la ayuda.
El atributo uso del fondo para cargar la imagen tiene un truco muy útil es el mapeo de Sprite (sprites CSS). De todos los temas en la optimización del sitio, archivos de recursos son comprimidos representan una gran proporción. Si se puede en una serie de pequeñas imágenes en cuadros grandes, después, sólo tendrá una petición http a ser capaz de obtener los recursos que necesitamos, puede aumentar la velocidad de carga de la página. Al igual que la imagen en imagen Enlace Baidu se utiliza como presentación backgeound-imagen, y la combinación de sprites uso de CSS. Y en términos relativos, más apoyo fondo de diseño adaptativo, siempre y CSS3 atributo background-size, la imagen se puede estirar hasta el tamaño de escala deseado.
Para resumir: Cuando es necesario cargar la prioridad, la necesidad de proporcionar más información cuando elegimos img más apropiado; y algunos iconos pequeños, como los avatares de los usuarios, y otra cantidad de pequeños y grandes de la imagen, apta para fondo de carga. En términos generales, si se trata de imágenes decorativas en el uso de fondo-img, si el contenido es relevante para el estilo y el uso img .
Aquí es también un enlace a distinguir entre un resumen de alto nivel tanto de la utilización del medio ambiente, deja que te veo y discreción.
uso 2.iconfont del entorno
iconfont chino fuente llamada icono, como su nombre indica es un tipo de fuentes para el acuerdo en nombre de código de buena correspondiente al estilo, capaz de hacer sin el uso de imágenes y mostró imágenes de los efectos correspondientes al resumen tiene las siguientes ventajas:
Peso ligero: el icono de fuente de una serie de imágenes (especialmente el uso de la doble imagen en la pantalla Retina) es más pequeña. Una vez que el icono fuente cargada, el icono se representará de inmediato, sin necesidad de descargar una imagen. Puede reducirse petición HTTP, también se puede almacenar en línea que ver con la optimización del rendimiento de HTML5.
Flexibilidad: la propiedad font-size fuentes de iconos se pueden utilizar se ajusta a cualquier tamaño, también puede agregar una variedad de efectos de texto, incluyendo el color, el estado estacionario, la transparencia, sombras y efectos de flip. Se puede mostrar en cualquier fondo. Mapa de bits, debe tener un archivo diferente la imagen de salida para cada uno de diferentes tamaños y diferentes efectos para.
Compatibilidad: El soporte para fuentes Web para todos los navegadores modernos, incluyendo la versión de IE baja. Nos podemos encontrar por su compatibilidad con los navegadores más importantes en caniuse.com.
Mientras soporte para fuentes web puede utilizar el icono fuentes.
Además de las ventajas anteriores, por supuesto, hay desventajas:
Icono de fuentes sólo se pueden representar monocromo o en color gradientes CSS3 debido a esta limitación de manera que no puede ser ampliamente utilizado.
Hay restricciones en el uso de los derechos de autor, hay una gran cantidad de fuentes para un cargo. Por supuesto, hay muchos libre de finos Fuentes de código abierto icono para su descarga.
La creación de su propio icono de fuente es mucho tiempo, el costo de la reconstrucción de personal post-mantenimiento es alto.
Icono no se describe fuente a utilizar aquí, usted está interesado puede echar un vistazo al siguiente enlace.
Taobao para las fuentes de iconos son muy a favor de que Taobao ha desarrollado una propia biblioteca iconfont. Si necesita mostrar imágenes en color sólidos, el uso iconfont sería una buena opción, también se mencionó anteriormente la fuente icono con unas características de peso ligero, y se puede personalizar el color, tamaño, tipo de letra se puede utilizar para controlar las propiedades del control icono de fuente. Por el lado móvil se refiere, la más extensa iconfont uso. Muchos icono en la página, como por ejemplo los pulgares, comentarios, favoritos y otros icono de color sólido utilizará iconfont, muy conveniente.
epílogo
Para resumir, resumí una lista:
| img | antecedentes | iconfont |
|---|---|---|
| la insignia Web site | Imágenes carrusel | Pequeño icono de color sólido |
| Productos / vídeo / Noticias lista de columnas | La imagen combinada (sprites CSS) | |
| cargando foto prioridad |
Espero que esta ayuda cuando se construye una página.
Este artículo se reproduce en: img / fondo / IconFont --- ¿Quién es el mejor para usted?