Quand utiliser IMG vs. CSS background-image?


777

Dans quelles situations est-il plus approprié d'utiliser une IMGbalise HTML pour afficher une image, par opposition à un CSS background-image, et vice-versa?

Les facteurs peuvent inclure l'accessibilité, la prise en charge du navigateur, le contenu dynamique ou tout type de limites techniques ou de principes d'utilisation.


Avez-vous besoin de l'image pour prendre de la place ou voulez-vous la réécrire?
geowa4

9
En tant que mise à jour, puisque cela se classe assez haut sur Google, la mise à l'échelle du navigateur et l'étirement de l'image pour l'image d'arrière-plan sont maintenant possibles et assez largement pris en charge (IE8 et inférieurs, bien sûr, étant l'exception), rendant les éléments 4 et 7 sans objet dans les cas qui peut permettre un repli ou ignorer un tel effet pour IE8 et les versions antérieures. caniuse.com/#search=background-image
Shauna

grand et utile post, j'ajouterai une question pour la comparaison, l'avantage du css c'est aussi les effets de survol? peut-il être répliqué à l'aide de balises img?
ericosg

J'ajoute généralement l'attribut alt et l'attribut title à toutes les images de contenu. N'est-ce pas préférable?
HartleySan

2
Img peut également avoir une carte avec des zones cliquables et des indices
Vitim.us

Réponses:


797

Utilisations correctes d'IMG

  1. À utiliser IMGsi vous avez l'intention d' imprimer votre page et que vous souhaitez que l'image soit incluse par défaut. - JayTee
  2. Utilisez IMG(avec du alttexte) lorsque l'image a une signification sémantique importante, telle qu'une icône d'avertissement . Cela garantit que la signification de l'image peut être communiquée dans tous les agents utilisateurs, y compris les lecteurs d'écran.

Utilisations pragmatiques d'IMG

  1. Utilisez l' IMGattribut plus alt si l'image fait partie du contenu , comme un logo ou un diagramme ou une personne (personne réelle, pas des gens de la photo). - sanchothefat
  2. À utiliser IMGsi vous comptez sur la mise à l'échelle du navigateur pour rendre une image proportionnellement à la taille du texte.
  3. À utiliser IMG pour plusieurs images de superposition dans IE6 .
  4. Utilisez IMGavec un z-indexpour étirer une image d'arrière-plan afin de remplir toute sa fenêtre.
    Notez que ce n'est plus vrai avec la taille d'arrière-plan CSS3; voir n ° 6 ci-dessous.
  5. L'utilisation imgau lieu de background-imagepeut améliorer considérablement les performances des animations sur un arrière-plan.

Quand utiliser CSS background-image

  1. Utilisez des images d'arrière-plan CSS si l'image ne fait pas partie du contenu . - sanchothefat
  2. Utilisez des images d'arrière-plan CSS lors du remplacement d'image du texte, par exemple. paragraphes / en-têtes. - sanchothefat
  3. À utiliser background-imagesi vous avez l'intention d' imprimer votre page et que vous ne souhaitez pas que l'image soit incluse par défaut. - JayTee
  4. À utiliser background-imagesi vous avez besoin d'améliorer les temps de téléchargement, comme avec les sprites CSS .
  5. Utilisez cette option background-imagesi vous avez uniquement besoin qu'une partie de l'image soit visible, comme avec les sprites CSS.
  6. Utilisez background-imageavec background-size:coverpour étirer une image d'arrière-plan afin de remplir toute sa fenêtre.

3
Je suis toujours incertain sur les images d'arrière-plan pour la pièce de remplacement de texte. Je vois des gens utiliser des images d'arrière-plan puis utiliser le retrait de texte: -9999px pour le texte. Cependant, je sais qu'avoir des retraits de texte comme celui-ci était mauvais pour le référencement et j'imagine que cela doit encore l'être pour certains moteurs de recherche. Mais le plus important, si vous désactivez les images mais laissez css sur l'image disparaît mais le texte est toujours hors de l'écran. En ce qui me concerne, le texte alternatif sur une image est destiné aux images qui ne sont pas affichées, les balises img sont donc meilleures.
Scott Reed

53
Utilisation pragmatique de l'image backbround : lorsque vous ne voulez pas perdre de cheveux à propos des problèmes de centrage vertical (des images de taille verticale variable);)
Frank Nocke

12
Oui, problèmes de centrage vertical - apportez Flexbox!
Dean_Wilson

3
@BinaryFunt - De <div class="my-css-page-styles" style="background-image:url(blah.png);"></div>cette façon, vous pouvez le styliser dans votre feuille de style CSS, mais si l'image d'arrière-plan est plus une question de contenu que de style, vous la modifiez toujours du côté HTML des choses.
Jimbo Jonny

2
Il semble y avoir un clickbait au point 5 des utilisations pragmatiques d'IMG - pointant vers un blog japonais sur les cosmétiques. le lien est www.ajaxline.com/browsers-performance-in-dependence-of-html-coding [NE CLIQUEZ PAS SUR CECI]
wick3d

292

C'est une décision en noir et blanc pour moi. Si l'image fait partie du contenu tel qu'un logo ou un diagramme ou une personne (personne réelle, pas des gens de la photo), utilisez l' <img />attribut tag plus alt. Pour tout le reste, il y a des images d'arrière-plan CSS.

L'autre fois pour utiliser des images d'arrière-plan CSS est lors du remplacement d'image du texte, par exemple. paragraphes / en-têtes.


Excellent cas! CON - Utilisez background-image lors du remplacement d'image du texte.
système PAUSE

2
C'est un bon point, mais sûrement le remplacement d'image du texte (par exemple pour un titre) vous obligerait à ajouter un "alt" pour que les lecteurs d'écran le lisent? Ou si les images ne s'affichent pas, vous obtenez toujours l'en-tête? Oui, un titre puis un style seraient mieux, mais vous voulez sûrement le texte?
Theo Scholiadis

4
@TheoScholiadis utilisant le remplacement d'image ne signifie pas utiliser une image au lieu de texte, mais cacher le texte d'une certaine manière en utilisant CSS et fournir l'image comme arrière-plan en utilisant CSS. Le document reste sémantiquement intact.
roborourke

57
Personnellement, je déteste quand je ne peux pas copier de "texte" car c'est en fait une image. Appelez-moi paresseux mais bon ...
Shaz

1
Lorsque vous avez besoin d'une image à des fins de référencement, utilisez la balise img avec l'attribut alt. Sinon, utilisez l'image en arrière-plan en utilisant css.
Super Model

107

Je suis surpris que personne ne l'ait encore mentionné: les transitions CSS .

Vous pouvez effectuer une transition native sur l' divimage d'arrière-plan de:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

Cela enregistre tout type d'animation JavaScript ou jQuery pour estomper <img/>les uns src.

Plus d'informations sur les transitions sur MDN .


3
Ce n'est pas une bonne raison. Vous pourriez avoir un div avec 2 images revêtus, et éléments essentiels suivants: #some_div { transition: opacity 0.5s; }, #some_div:hover #top_img { opacity: 0; }
warkentien2

5
Si vous lisez cet article MDN lié (ou les spécifications w3c), vous constaterez que l'image d'arrière-plan n'est PAS l'une des propriétés animables, et tout navigateur qui le fait (chrome), ne suit pas les normes Web. Cela dit, je pense que ça devrait l'être, et c'est un bel effet facile, donc je suis déçu qu'il ne fasse pas partie de la norme.
Robert McKee

73

Les réponses ci-dessus ne prennent en compte que l'aspect Design. Je l'énumère dans les aspects SEO.

Quand utiliser <img />

  1. Quand votre image doit être indexée par le moteur de recherche
  2. Si cela a un rapport avec le contenu, pas avec le design.
  3. Si votre image n'est pas trop petite (pas d'images iconiques).
  4. Images où vous pouvez ajouter altet titleattribuer.
  5. Images d'une page Web que vous souhaitez imprimer à l'aide du support d'impression CSS

Quand utiliser CSS background-image

  1. Images purement utilisées pour la conception.
  2. Aucune relation avec le contenu.
  3. Petites images que nous pouvons jouer avec CSS3.
  4. Images répétées (Dans l'icône d'auteur du blog, l'icône de date sera répétée pour chaque article, etc.).

Comme je vais les utiliser en fonction de ces raisons. Ce sont de bonnes pratiques d'optimisation des images par les moteurs de recherche.


54

Les navigateurs ne sont pas toujours configurés pour imprimer des images d'arrière-plan par défaut; si vous avez l'intention d'imprimer votre page :)


9
Sonne comme: PRO - Utilisez IMG si vous souhaitez que l'image s'imprime par défaut. CON - Utilisez background-image si vous ne voulez pas que l'image s'imprime par défaut. Joli!
système PAUSE

7
Je pense que l'idée est d'avoir des styles CSS séparés en impression seule qui cachent les images ou les changent en quelque chose de plus approprié.
Blazemonger

52

Si vous avez votre CSS dans un fichier externe, il est souvent pratique d'afficher une image fréquemment utilisée sur le site (comme une image d'en-tête) en tant qu'image d'arrière-plan, car vous avez alors la possibilité de modifier l'image plus tard.

Par exemple, supposons que vous disposez du code HTML suivant:

<div id="headerImage"></div>

... et CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

Quelques jours plus tard, vous modifiez l'emplacement de l'image. Tout ce que vous avez à faire est de mettre à jour le CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

Sinon, vous devrez mettre à jour l' srcattribut de la <img>balise appropriée dans chaque fichier HTML (en supposant que vous n'utilisez pas un langage de script côté serveur ou un CMS pour automatiser le processus).

Les images d'arrière-plan sont également utiles si vous ne voulez pas que l'utilisateur puisse enregistrer l'image (bien que je n'ai jamais eu besoin de le faire).


14
Les images d'arrière-plan peuvent certainement être enregistrées avec une spéléologie de source de vue minimale, mais pas aussi facilement qu'un clic droit sur une image.
Michael Hackner

2
Firefox. Clic-droit. "Voir l'image d'arrière-plan". Pas si difficile.
TRiG

1
@TRiG À moins qu'il n'y ait une superposition transparente ou une modification du menu contextuel spécifique à la page pour vous empêcher de le faire. Je l'ai déjà vu auparavant, et à mon avis, c'est assez idiot parce que vous n'avez même pas besoin de faire de la spéléologie dans la source, si la page est entièrement chargée, dans Firefox au moins, vous pouvez cliquer sur Outils> Informations sur la page / alt + t, i / faites un clic droit et sélectionnez Afficher les informations sur la page, accédez à la section Média et enregistrez tous les éléments de votre choix dans la liste. Bien sûr, il existe des moyens d'empêcher cela, comme l'intégration de l'image dans un fichier Flash ou d'autres astuces étranges, mais même celles-ci peuvent être contournées ou prises en compte.
JAB

Je pense que la technique d'arrière-plan n'est pas assez bonne pour refuser à un utilisateur de sauvegarder l'image ...
ncubica

45

À peu près la même chose que la réponse de sanchothefat , mais sous un aspect différent. Je me demande toujours: si je supprimais complètement les feuilles de style du site Web, les éléments restants n'appartiennent-ils qu'au contenu? Si c'est le cas, j'ai bien fait mon travail.


42

Certaines réponses compliquent trop le scénario ici. Il s'agit d'une situation morte simple.

Répondez à cette question chaque fois que vous souhaitez placer une image:

Cela fait-il partie du contenu ou de la conception?

Si vous ne pouvez pas répondre à cela, vous ne savez probablement pas ce que vous faites ou ce que vous voulez faire!

En outre, ne considérez PAS à côté des deux techniques, simplement parce que vous souhaitez être "imprimable" ou non. Ne cachez PAS non plus le contenu d'un point de vue SEO avec CSS. Si vous vous retrouvez à gérer votre contenu dans des fichiers CSS, vous vous êtes tiré une balle dans la jambe. Ceci est juste une décision triviale de ce qui est contenu ou non. Tout autre aspect doit être ignoré.


J'aime cette réponse. C'est très clair. Les problèmes restants tels que les imprimantes ou le référencement doivent être pris en compte individuellement dans chaque scénario.
Juan Herrera

28

J'ajouterais deux autres arguments:

  • Une balise img est bonne si vous devez redimensionner l'image. Par exemple, si l'image d'origine mesure 100 pixels par 100 pixels et que vous souhaitez qu'elle soit de 80 pixels par 80 pixels, vous pouvez définir la largeur et la hauteur CSS de la balise img. Je ne connais aucun bon moyen de le faire en utilisant background-image. EDIT: Cela peut maintenant aussi être fait avec une image d'arrière-plan, en utilisant l' background-sizeattribut CSS3.

  • Utiliser background-image est bon lorsque vous devez basculer dynamiquement entre les sprites . Par exemple, si vous avez une image de bouton et que vous souhaitez afficher une image distincte lorsque le curseur survole l'élément, vous pouvez utiliser une image d'arrière-plan contenant à la fois les images-objets normales et planées, et modifier dynamiquement la position d'arrière-plan.


2
C'est une très bonne réponse, en particulier le point de redimensionnement. Les gens diront que vous pouvez utiliser la taille d'arrière-plan, mais si vous essayez de prendre en charge d'anciens navigateurs, ce n'est pas nécessairement la meilleure solution.
dudewad

1
Voici comment cela se fait en CSSbackground-size: 80px 80px;
Kareem

2
Merci @Kareem. Je vois que cela a été introduit avec CSS3, qui n'existait pas encore lorsque j'ai répondu à l'origine. J'ai modifié ma réponse pour refléter cela.
Anders Rabo Thorbeck

Je pense qu'il est important de noter que le redimensionnement des photos peut être délicat en termes de pixelisation ou d'interpolation. Lorsque cela est possible, je ne redimensionnerais pas plus de 40% (et c'est un étirement - 20% est standard) sans apporter votre image dans un logiciel d'imagerie photo pour être correctement redimensionnée sans perdre en qualité. La qualité DPI peut être importante ici s'il n'y a pas suffisamment d'informations pour étirer et remplir la quantité de pixels allouée.
dale landry

18

Un autre avantage de l'utilisation de la balise <IMG> est lié au référencement - c'est-à-dire que vous pouvez fournir des informations supplémentaires sur l'image dans l'attribut ALT de la balise image, alors qu'il n'y a aucun moyen de fournir de telles informations lors de la spécification de l'image via CSS et dans ce cas, seul le nom du fichier image peut être indexé par les moteurs de recherche. L'attribut ALT donne définitivement à la balise <IMG> un avantage SEO sur l'approche CSS. C'est pourquoi selon moi, il est préférable de spécifier les images que vous souhaitez bien classer dans les résultats de recherche d'images (par exemple Google Image Search) en utilisant la balise <IMG>.


background-images Les valeurs ALT peuvent être définies dans le plan du site. google.com/schemas/sitemap-image/1.1
Kareem

17

Premier plan = img.

Arrière-plan = arrière-plan CSS.


5
Bien sûr, mais qu'en est-il du petit indicateur de flèche vers le bas à côté du bouton "menu", ou d'autres éléments de ce type. Comment classifiez-vous ce premier plan ou ce fond?
dudewad

@dudewad Je dirais au premier plan, car ils sont (visuellement) dans la couche "supérieure" de la page, superposés à d'autres éléments.
jkdev

14

Utilisez des images d'arrière-plan uniquement lorsque cela est nécessaire, par exemple des conteneurs avec une image qui tuile.

L'un des principaux avantages de l'utilisation d' IMAGES est qu'il est préférable pour le référencement .


3
Probablement parce que vous pouvez utiliser l'attribut alt.
David

4
Cela ne dépend-il pas du fait que vous VOULEZ SEO pour cette image spécifique? Je ne vois pas pourquoi vous opteriez pour le référencement sur une image qui fait partie du style de la page, pas du contenu (par exemple une icône de courrier électronique sur votre page de contact). Donc, en fait, je préfère retourner votre déclaration. N'utilisez IMAGES que lorsque cela est nécessaire (qu'il s'agisse du contenu, de l'impression et / ou du référencement).
Volzy

12

À l'aide d'une image d'arrière-plan, vous devez absolument spécifier les dimensions. Cela peut être un problème important si vous ne les connaissez pas à l'avance ou si vous ne pouvez pas les déterminer.

Un gros problème avec les <img />superpositions. Et si je veux une ombre intérieure CSS sur mon image ( box-shadow:inset 0 0 5px rgb(0,0,0,.5))? Dans ce cas, comme <img />il ne peut pas y avoir d'éléments enfants, vous devez utiliser le positionnement et ajouter des éléments vides, ce qui équivaut à un balisage inutile.

En conclusion, c'est assez situationnel.


11

Quelques autres scénarios où background-imagedevraient être utilisés:

  • Lorsque vous souhaitez que l'image change lorsque la souris est survolée.
  • Lorsque vous souhaitez ajouter des coins arrondis à l'image. Si vous utilisez img, l'image s'échappe des coins arrondis.

Vous pouvez réellement faire:img { border-radius: 10px; }
Rafff

@RafcioKowalsky vous avez raison. Je ne me souviens pas des conditions exactes dans lesquelles border-radiusne fonctionnait pas.
Behrang Saeedzadeh

10

Utilisez l'image d'arrière-plan CSS dans le cas de plusieurs skins ou versions de conception. Javascript peut être utilisé pour changer dynamiquement une classe d'un élément, ce qui le forcera à rendre une image différente. Avec une balise IMG, cela peut être plus délicat.


vous pouvez également modifier dynamiquement l'attribut src d'une balise d'image, aussi simple que de changer une classe
roborourke

3
@sanchothefat, c'est vrai, cependant, dans ce cas, la source d'image devrait être conservée dans JS au lieu de CSS. Le fichier css de l'OMI serait plus approprié pour conserver le nom du fichier.
MK_Dev

7

Voici une considération technique: l'image sera-t-elle générée dynamiquement? Il est généralement plus facile de générer la <img>balise en HTML que d'essayer de modifier dynamiquement une propriété CSS.


1
Et qu'en est-il des styles en ligne? Cette question ne doit vraiment pas être tranchée par cette idée.
viam0Zah

peut-être que je devrais formuler la phrase de cette façon: préféreriez-vous travailler avec un élément DOM ou un attribut d'élément?
Bryan M.

vaut probablement la peine de considérer bacl en '09, mais avec jQuery ce n'est guère un problème. Il est encore plus facile et plus fluide de changer de CSS ou de classe sur un élément que de changer d'élément.
dfherr

7

Et la taille de l'image? Si j'utilise la balise img, le navigateur redimensionne l'image. Si j'utilise l'arrière-plan CSS, le navigateur coupe juste un morceau de l'image plus grande.


7

En ce qui concerne l'animation d'images à l'aide de CSS TranslateX / Y (la bonne façon d'animer du HTML) - Si vous effectuez un enregistrement Chrome Timeline d'images d'arrière-plan CSS en cours d'animation par rapport aux balises IMG en cours d'animation, vous verrez que les temps de peinture sont considérablement plus courts pour le CSS images de fond.


7

Il y a une autre raison! Si vous avez une conception réactive et que vous souhaitez fractionner l'utilisation des images basse, moyenne et haute résolution pour les appareils via des requêtes multimédias, vous devez également utiliser des arrière-plans.


1
maarten, terscheling is not Pipeable J'ai entendu parler de Vincent willems. Alors, comment pensez-vous que cela peut fonctionner sur PyMol
Mehdi Nellen

1
Veuillez vous référer à la documentation pour savoir comment il est canalisable pieterpeitshoeve.nl/rondleiding
Maarten

@Maarteen, je suppose que cela peut maintenant être fait en utilisant des balises image et source html 5
Tick20

6

De plus, j'ai une section galerie qui a des tailles d'image incohérentes donc même si ces images sont évidemment considérées comme du contenu, j'utilise des images d'arrière-plan et je les centre en div avec une taille définie. C'est similaire à ce que Facebook fait dans leurs albums.


6

img est une balise html pour une raison, elle doit donc être utilisée. Pour référencer ou illustrer des choses, les gens par exemple: dans les articles.

De plus, si l'image a un sens ou doit être cliquable, une img est meilleure qu'un arrière-plan CSS . Pour toutes les autres situations, je pense, un fond CSS peut être utilisé.

Cependant, c'est un sujet qui doit être discuté à plusieurs reprises.

Étudiant Web de Paris, France


5

Juste un petit ajout, vous devez utiliser la balise img si vous voulez que les utilisateurs puissent «cliquer avec le bouton droit» et «enregistrer l'image» / «enregistrer l'image», donc si vous avez l'intention de fournir l'image comme ressource pour autres.

L'utilisation de l'image d'arrière-plan désactivera (pour autant que je sache sur la plupart des navigateurs) l'option permettant d'enregistrer l'image directement.


5

Une petite entrée, j'ai eu des problèmes avec des images réactives qui ralentissaient le rendu sur iphone pendant une minute, même avec de petites images:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

Mais lors du passage à l'utilisation d'images d'arrière-plan, le problème a disparu, ce n'est viable que si vous ciblez des navigateurs plus récents.


Avez-vous un support ou une explication de ce comportement?
Todd

Désolé, je n'ai aucune idée pourquoi cela ralentirait la page à une exploration .. peut-être que la redistribution dans le navigateur sur iphone a très peu de ressources.
winthers

4

IMGcharger d'abord parce que se srctrouve dans le fichier html lui-même alors que dans le cas de background-imagela source est mentionnée dans la feuille de style de sorte que l'image se charge après la feuille de style chargée, retardant le chargement de la page Web.


De plus, certains navigateurs (par exemple Firefox 35) semblent actualiser CSS background-imageaprès un certain temps: si vous avez plusieurs onglets ouverts, lorsque vous revenez à votre onglet après un certain temps, l'arrière-plan CSS est vide pendant un certain temps.
Skippy le Grand Gourou

3

HTML est pour le contenu et CSS pour la conception. L'image est-elle nécessaire et doit-elle être récupérée par les lecteurs d'écran? Si la réponse est oui, mettez l'image dans le code HTML. Si c'est uniquement pour le style, vous pouvez utiliser la propriété background-image en CSS pour injecter l'image. Tout comme beaucoup de gens l'ont déjà mentionné, vous pouvez ensuite utiliser un pseudo-élément sur l'image si vous le souhaitez.


3

Notez également que la plupart des araignées des moteurs de recherche n'indexent pas les images d'arrière-plan CSS, donc les images d'arrière-plan seront ignorées et vous ne pourrez pas obtenir de trafic des moteurs de recherche (aucun avantage SEO en bref).

Où, car toutes les images définies avec des balises sont indexées (sauf si elles sont manuellement exclues) et peuvent générer du trafic provenant des moteurs de recherche si leurs attributs de titre / alt et leurs noms de fichiers sont optimisés correctement (par un mot clé).


2

Vous pouvez utiliser des balises IMG si vous souhaitez que les images soient fluides et à l'échelle de différentes tailles d'écran. Pour moi, ces images font surtout partie du contenu. Pour la plupart des éléments qui ne font pas partie du contenu, j'utilise des sprites CSS pour garder la taille de téléchargement minimale, sauf si je veux vraiment animer des icônes, etc.


2

J'utilise l'image au lieu de l'image d'arrière-plan lorsque je veux les rendre 100% extensibles, ce qui est pris en charge dans la plupart des navigateurs.


2

Si vous souhaitez ajouter une image uniquement pour le contenu spécial de la page ou pour une seule page, vous devez utiliser la balise IMG et si vous souhaitez placer l'image sur plusieurs pages, vous devez utiliser CSS Background Image.


2

Une autre image d'arrière-plan PRO: Images d'arrière-plan pour <ul>/ <ol>listes.

Utilisez des images d'arrière-plan si elles font partie de la conception globale et sont répétées sur plusieurs pages. De préférence sous forme de sprite en arrière-plan pour l'optimisation.

Utilisez des balises pour toutes les images qui ne font pas partie de la conception globale et qui sont très probablement placées une fois, comme des images spécifiques pour des articles, des personnes et des images importantes qui méritent d'être ajoutées aux images Google.

** La seule image répétée que j'inclus dans une <img>balise est le logo du site / de l'entreprise. Parce que les gens ont tendance à cliquer dessus pour accéder à la page d'accueil, vous l'enveloppez donc avec une <a>balise.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.