html - logo - sprite redes sociales
¿Es bueno o malo utilizar la etiqueta del logotipo en sprites? (14)
Al crear páginas web, uno de mis colegas muestra cualquier logotipo con la propiedad de imagen de fondo CSS, en lugar de incrustar la imagen con una etiqueta <img> HTML. El colega informó que era para reducir el número de solicitudes HTTP. También me mostró un sprite de imagen y dijo que Google muestra su logotipo con imágenes de sprite.
No estoy de acuerdo con su enfoque y le mostré que la página principal de Google.com carga su logotipo en una etiqueta <img> .
¿Cuál es una mejor práctica?
EDITAR: Facebook también hace lo mismo en su página de inicio , cargando el logotipo en una etiqueta img, mientras que en sus páginas de perfil muestran su logotipo usando un sprite CSS .
A partir de esto, mi conclusión fue que tal vez debería cargar su logotipo principal en una etiqueta img, mientras que para los otros logotipos, como en un pie de página o subpágina, es posible que desee cargarlos en segundo plano mediante sprites CSS.
ACTUALIZADO : rutinariamente estoy cargando logotipos con etiquetas img y también sé por qué podemos usar sprites. Mi pregunta principal es: si tiene tres o más logotipos en una página, ¿cuál es la mejor manera de cargarlos?
Creo que deberías seguir con la etiqueta <img> hasta que Google invente la "Búsqueda de imágenes de fondo", un servicio que busca imágenes de fondo, divide los sprites en imágenes individuales y distingue inteligentemente entre imágenes decorativas y significativas mediante el análisis de CSS.
Editar: Hágase esta pregunta: ¿es su logotipo algo en lo que desea enfatizar; o es simplemente otra decoración. Responder e implementar en consecuencia.
Cuando estés en Roma, haz lo que hacen los romanos.
Acerca del logotipo en la etiqueta IMG, palabras oficiales de Google .. http://www.youtube.com/watch?v=fBLvn_WkDJ4
Razón para mantenerse en la etiqueta: para tener una buena visibilidad del motor de búsqueda, y cuando alguien busque su nombre de empresa en Google, el logotipo debe aparecer en los resultados de imagen.
Razón para mantenerse en css-sprites [imagen de fondo]: tiempo de carga más rápido
Grandes marcas: Todas las grandes marcas tienen una sección de medios en su sitio web, y también una sección de prensa donde mantienen todos sus logotipos en formato descargable.
Generalmente prefiero definir logos en una etiqueta IMG. Una ventaja simple y práctica es que si alguien imprime su página, el logotipo se mostrará, si el logotipo se configuró como un sprite de fondo, no lo haría.
Ver un sitio con CSS deshabilitado es útil cuando se toman decisiones como esta. Le da una buena idea acerca de la experiencia de visualización de mínimo denominador común de su sitio. Si su sitio tiene sentido en esas circunstancias, es como tener su casa construida sobre roca.
Me atrevería a suponer, aunque esto es solo una suposición, si la imagen del logotipo de su sitio está contenida dentro de un elemento de encabezado, como h1 , entonces es probable que se establezca una relación semántica entre esa imagen y la identidad del sitio. Además, por lo general, el logotipo se consideraría contenido significativo para los fines de la marca, ya sea la identidad visual de la compañía o de la marca.
El uso de un sprite para este propósito parecería disminuir la importancia de esa marca, ya que, en efecto, no sería más o menos importante que cualquier otra imagen incluida en ese sitio (ya que, efectivamente, todas las imágenes son la misma imagen) .
Si el ancho de banda es tan importante, sugeriría poner todas las demás imágenes juntas en un sprite, pero para mantener la independencia / identidad del logotipo.
No hay ninguna razón para no usar sprites para la optimización, incluso si el logotipo de la imagen es información semántica. El significado general (sēmantikós) de la página no se pierde si el uso de sprites se realiza con destreza, es decir, mediante el uso de la imagen dentro de un contenedor debidamente identificado. No existe un acuerdo universal sobre la web semántica: la semántica es un arte filosófico y está abierto a una gran interpretación.
Quizás podría decirse que más apropiado que una imagen para un logotipo es un encabezado ( h1 , por su propia definición) establecido como un elemento de bloque con visibilidad oculta. El texto se puede buscar, tiene un significado semántico para la página (lo que permite un reemplazo adecuado del contenido en los navegadores basados en texto y los lectores de pantalla), y el fondo del h1 establece en la posición del sprite según sea necesario.
Hay argumentos para ambos lados, al menos desde el punto de vista de SEO: cada imagen es un objeto con capacidad de búsqueda y una oportunidad para el tráfico entrante; pero cada solicitud http ocupa ancho de banda y ralentiza el tiempo de carga de la página, lo que la hace menos optimizada y, por lo tanto, de menor rango.
editar:
Cuando tiene 3 o más logotipos, el punto de las solicitudes http es discutible; Los logotipos posteriores probablemente serían la misma imagen, incluso si se cambia el tamaño. Si no es así, reconsidere por qué está utilizando el logotipo de esta manera.
Si son 3 logotipos diferentes para la misma compañía, ya no son semánticos y ya no afectan el significado de la página. Esto es similar a decir que una página sobre ABC Company también trata sobre su DBA (nombre comercial registrado, "Doing Business As") XYZ Corporation , que es una práctica deficiente. Tener una página para la empresa y luego otra para el DBA es la mejor práctica en esta situación. O bien la página es para la empresa principal o para su filial LLC. Incluso cuando diga " ABC Company es:" luego haga una lista de cada DBA con sus respectivos logotipos, el significado de la página es la descripción de ABC Company , que debe tener el h1 o h2 con el logo de ABC Company , con encabezados de nivel inferior con el encabezado otros logotipos; en este punto, reducir el tiempo de carga es una prioridad y no otorgar significado a los otros logotipos. La creación de contenido de búsqueda para los DBA debe relegarse a h3 y encabezados inferiores.
Quiero que la gente pueda descargar / enlazar mi logotipo. Por lo tanto no lo incluiré en el mapa de sprites.
Recomendaría utilizar la etiqueta IMG para el logotipo con un texto alternativo y combinar todas las demás imágenes como una hoja de sprites. Creo que usar hojas de cálculo solo es realmente útil cuando tienes más de 3 imágenes. Lea la respuesta de Rohan Patil en la parte superior de por qué ese es el caso.
Mi pregunta principal es si tiene 3 o más logotipos como LOGO en pie de página, subpágina, etc. Entonces, ¿cuál es la mejor manera?
En ese caso, sí, agregue el logotipo principal con una etiqueta IMG y use sprites para el resto.
Situación: su empresa decide actualizar / cambiar el logotipo, pero espere su logotipo en sprite. Así que tienes que recrear sprite de nuevo. Mi sugerencia, mantener el logotipo en la etiqueta img.
Sprites le permiten reducir el número de solicitudes. Sin embargo, esto solo funcionará si está todo en una hoja de estilo.
Ejemplo: la primera etiqueta que requiere el sprite se llama como una imagen de fondo, y luego se llama de nuevo en una etiqueta diferente en la misma hoja de estilo. Si están en hojas de estilo separadas, se solicitarán más de una vez.
Pequeño artículo: http://webmasterformat.com/blog/css-sprites
Un logotipo es contenido y, por lo tanto, debe estar representado por un elemento <img> (a pesar de la tendencia a optimizar el rendimiento al costo de la semántica).
Un logotipo es contenido, eso es correcto. Y probablemente te alegrarías cuando un robot de búsqueda lo atrape.
Pero a algunos sitios web les gusta aplicar un estilo de :hover en sus logotipos. Ahora, estás atrapado.
Pero puedes hacer lo siguiente, que es semánticamente correcto. Si desea obtener más información al respecto, puede leer un excelente artículo sobre este tema de Harry Roberts.
HTML
<body>
<div id="head">
<a id="header-logo" href="http://www.example.com/" title="Example Inc. - Your slogan">
<img src="/img/assets/header-logo.png" alt="Example Inc. - Your slogan"/>
</a>
<h1>Welcome to Example Inc.</h1>
</div>
</body>
CSS
body > #head a#header-logo {
background-image: url(/img/assets/logo-header-sprite.png);
background-position: left top;
}
body > #head a#header-logo:hover {
background-position: left -50%;
}
body > #head a#header-logo img {
visibility: hidden;
}
Un logotipo es parte del contenido de su sitio, por lo tanto, debe estar en una etiqueta img , no como imagen de fondo. Ayudará a aumentar el SEO (agregar un título y un atributo alt también lo hará) y la razón por la que las empresas como Google, Facebook y otros ponen su imagen en un sprite es por tiempos de carga, no por mejoras de SEO.
¿Su empresa tiene el mismo rango de SE que Google o Facebook? No. Hasta entonces, sigue colocando el logotipo en una etiqueta img donde pertenece. Cuando su sitio es siempre el sitio más visto en Internet, entonces puede comenzar a pensar en el rendimiento más que en SEO.
Además, como punto de partida, si el logotipo tuviera alguna vez un ajuste (tamaño, color, etc.), el sprite tendría que ser recreado al igual que el CSS. Si solo era una etiqueta img , esta molestia es inexistente.
puede usar un sprite en un elemento img a través de la propiedad css clip :. Usar sprites correctamente siempre es bueno para la optimización. a veces no es practico esa es una llamada de juicio que tiene que hacer para cada circunstancia diferente (sitio) que se encuentre.
Cuando una imagen tiene un significado semántico , por lo que se considera contenido, use una etiqueta IMG , sin sprites y una ALT configurada correctamente.
Cuando una imagen es solo una decoración , como el fondo de un cuadro, el fondo de un botón, el fondo de una opción de menú, etc., no tiene un significado semántico, por lo que puede usarla como fondo de un SPAN, DIV, etc. . desde CSS. Puedes usar sprites en este caso.
La razón por la que Image Sprite es una buena práctica es la forma en que funciona el protocolo HTTP y porque queremos minimizar el tiempo que tarda una página web en cargarse (hay muchas razones por las que debería querer que su sitio se cargue más rápido, una de ellas es Debido a que Google incorporó hace un tiempo la velocidad del sitio en su algoritmo de clasificación ) HTTP no es un protocolo basado en conexión, esto significa que para cada solicitud, el navegador debe hacer una nueva conexión y la ruta al servidor debe recalcularse. Por lo tanto, si cada imagen estaba en el mismo archivo, el navegador guarda múltiples solicitudes.
Cada solicitud que realiza el navegador está dividida en pasos: búsqueda de DNS, conexión, envío, espera, recepción. Podemos usar firebug para ver todas las solicitudes realizadas durante la carga de una página web.
Tomé un tema de WordPress y medí el tiempo necesario para cada recurso de imagen en cada paso (bueno, Firebug hizo eso, no yo) y calculé que el 38.8% del tiempo corresponde a la latencia (en este caso, latencia = búsqueda DNS + conexión + envío ), mientras que solo el 14.4% corresponde a la descarga de datos (el 46.7% restante corresponde a esperar a que el servidor responda). El tiempo de latencia debe reducirse al mínimo, ya que no se invierte en descargar realmente los recursos que debe mostrar el navegador.
Los pasos de búsqueda, conexión y envío de DNS son redundantes para cada solicitud de imagen estática en el mismo servidor. Entonces, ¿cómo podemos cortarlos? ¿Adivina qué? Usando sprites de imagen! Cada solicitud de imagen se agrupará en una sola, lo que resultará en un solo conjunto de tiempo de latencia para todos los kilobytes de imágenes que el navegador descargará.