🤯HTML picture? Was ist es und warum sollte man es nutzen! 👍 [TUTORIAL]

[@christianachleitner9439]

Einfach jeden Tag froh diesen Kanal vor 2 Jahren entdeckt zu haben :)

[@UnleashedDesign]

hehe freut mich das der Kanal dir gefällt :P

[@hedoban_nord]

Sehr cool, vielen Dank! Kannte ich noch nicht, werde ich aber zukünftig dann in allen Projekten berücksichtigen. :)

[@eldestructor1322]

Uuuuuund...abonniert! Klasse Kanal!

[@UnleashedDesign]

Danke freut mich wenn dir die Inhalte gefallen ;)

[@TechniTrick]

Kannte es nich... 🙈 Aber echt hammer! Werde es an meinem aktuellen Projekt mal ausprobieren 🙂 Liebe deinen Channel! 😍

[@UnleashedDesign]

Freut mich wenn dir der Channel und das Video gefällt :)

[@caroman6761]

Stümmt, hab ich so noch nicht gekannt, thanks !!!!

[@UnleashedDesign]

Man lernt niemals aus :) freut mich wenn es dir geholfen hat

[@HolgerJakobs]

Es wird nicht klar gesagt, was mit dem Inhalt des src-Attributs passiert. Ist das völlig egal, denn eine "Demo.jpg" ist gar nicht vorhanden? Kann man das Attribut dann auch leer oder ganz weg lassen?

[@thielicious2156]

Also ich habe diesen Tag bisher nie genutzt, weil ich mir unsicher war wegen der Semantik mit SEO und ggf. sonst Workarounds machen müsste, da es sich nicht genau herauskristallisieren konnte bisher nach meinen Recherchen, ob und wie weit die Bilder von Crawlern im Picture-Tag gefasst werden und evtl. mit welcher Density und Auflösung sich Google schnappt und was beim Ranking priorisiert wird. Ich will ja keine inkompatible Bildversionen angezeigt bekommen wenn ich google. SEO ist ja heute leider viel wichtiger als nur dass Dinge funktionieren und einem nützlich sind. Diesbezüglich gab es leider keine Info in deinem Video darüber, aber trotzdem netter Vortrag für mich, um das nochmal neu aufzugreifen.

[@jkk1337]

Lädt der Browser dann initial alle Sources oder werden diese dann nur bei Bedarf nachgeladen?

[@UnleashedDesign]

Nur bei Bedarf, das kannst du auch einfach testen, im Netzwerk Tab der Entwicklertools dürfte nur 1x das Bild geladen werden.

[@benherbst3620]

Problem ist das nuxt / image nicht mehrere bilder hiermit unterstützt

[@muh_huh]

Was sind denn die richtigen Auflösungen für die verschiedenen Displaygrössen? Und warum ist cover nicht cover?

[@bhBlacky82]

was ich persönlich am svg schade finde ist, dass es nicht 100% als breiten wert akzeptieren kann und image-ration height auto. oder wenn doch wär da vielleicht ein tutorial interessant.

[@ChrisFraczkowiak]

Kannte es nicht, aber ist echt praktisch zu wissen. Gab schon öfters den Moment wo ich mir sowas gewünscht hätte :) Danke

[@UnleashedDesign]

Absolut, also nutze es in fast jedem Projekt :D

[@leo848]

Welche Extensions verwendest du?

[@UnleashedDesign]

Habe hierzu vor kurzem ein Video gemacht :)

[@fwk010]

Das ist doch aber alles fast genau so über die CSS lösbar, ich versteh nicht wo jetzt der Vorteil liegt. Klar möchte sich css erweitern, aber außer das man das jetzt in den Code schreibt sehe ich da keine Vorteile, im Gegenteil wenn man mit Templates arbeitet habe ich sogar mehr Arbeit. Und je mehr Code man verwendest desto länger muss auch die Seite laden, so in das in wenigen bis einer CSS Datei die schneller lädt... auch das hier ist dabei nützlich

[@ShikuKID]

Dann mach es besser mach ein Video wie du mit css dass machen kanst

[@TheWhiteguard]

cool danke! kannte ich tatsächlich noch nicht und arbeite seit Jahren als It'ler :D

[@UnleashedDesign]

Man lernt niemals aus :)

[@SuperTruperHans]

Hi, ja ich kannte es ja ich dies im meinem Studium gerade habe. Meine Frage wäre muss ich zum Positionieren picture im css benutzen oder das img-tag?

[@martinwolf5888]

Picture ist nur ein Funktionscontainer, die Ausgabe erfolgt über das img Tag. Daher wendest du da das CSS auf img an.

[@DerGnoekianer]

Hey, kannte ich tatsächlich noch nicht. Danke dafür. :)

[@UnleashedDesign]

Dafür ist das Video da ;) freut mich wenn es dir geholfen hat.

[@deadlys2009]

Ich finde deinen Kanal echt interessant, auch wenn dein TH stumm ist 😛 witsss

[@UnleashedDesign]

Tja :D das ist der Grund warum der Kanal auf deutsch und nicht auf englisch ist :D aber freut mich wenn er dir gefällt :)

[@TryKiXx]

Richtig gut, danke dafür :-)

[@UnleashedDesign]

Danke freut mich wenn es dir gefällt :)

[@TryKiXx]

@@UnleashedDesign Super Tag, Super erklärt 👍👍👍

Aber wird das Bild dann nicht trotzdem geladen, mit Media Querys? Nur das im Hintergrund. Weil so nützt es mir ja nicht in der Performance ein Webseite

[@Meinungsmacher]

lässt sich relativ einfach testen. Willt ich gestern machen aber leider kam ein Projekt dazwischen

[@bartlog84]

Welchen Editor benutzt du ?

[@UnleashedDesign]

Ich Nutze VSC :)

[@princess2chiru]

Ich vermisse einen Link zu einem Video in dem Sass erklärt wird ... ich kenne den Begriff habe es bisher aber nie genutzt und könnte dein Tutorial nach einen solchen Video besser verstehen. (Oder gar parallel besser mitmachen)

[@UnleashedDesign]

Also habe ein Video über SASS aber es werden in Zukunft auch noch mehr kommen :)

[@profken1]

Geilomat, man lernt ja nie aus ;o)) Sag mal, was nutzt du für einen Editor, bzw. welchen nutzt du in dem Video?

[@koljakocht]

Atom von atom.io

[@Lemonschluck]

yannick n. sieht aus wie visual studio code

[@profken1]

@@koljakocht Hi, dachte ich auch, aber sieht der nicht anders aus, oder ist das so ein customized Ding?

[@profken1]

@@Lemonschluck Sicher? Sieht so aus, aber sicher bin ich nicht. Atom hatte ich zumindest mal in den Fingern und fand es ganz gut, wobei ich gerade bei Sublime bin.

[@Lemonschluck]

@@profken1 Nein, leider nicht sicher...

[@Inarilein]

Ich finde es ja ganz cool, aber warum genau sollte man es so machen und nicht in CSS? Das ist mir etwas unklar, da ich so etwas in CSS sonst immer gemacht habe und es auch immer gut ging.

[@cyber_chris]

Weil du die Bilder dann als Hintergrundbild einbinden musst oder es werden alle Bilder geladen aber nur ein Teil angezeigt. Oder wie machst du das?

[@Inarilein]

@@cyber_chris Oh, guter Punkt. Daran dachte ich in den Moment nicht.

[@DerTim]

Kannst du noch mehr HTML Tag vorstellen die keiner kennt?

[@UnleashedDesign]

Wird kommen :P gibt nur leider nicht unendlich viele davon haha

[@Crassus_Auratus]

Picture Tag, was macht es? Es leuchtet blau! Geile Sache! Danke!

[@UnleashedDesign]

xD warum leuchtet es blau? :D

[@Crassus_Auratus]

@@UnleashedDesign Das ist eine Anspielung auf Rambo. ;) 2:03 kzbin.info/www/bejne/fGOakpKioa52erc

[@Webdesigner_Mario]

Super Video aber ich kannte es schon hatte es selbst aber auch noch nicht genutzt kannte es aber wie gesagt schon

[@blarocyactaneon3201]

Habe dies bis jetzt nicht gekannt, werde dies aber beim nächsten Projekt verwenden 😉😁

[@UnleashedDesign]

Kann es nur empfehlen :P

[@mediadinger]

Du erklärst gerade die Media Queries ... aber nicht warum das Picture-Tag gerade so toll sein soll !? mit der entsprechenden CSS macht doch genau das gleiche, oder?

[@UnleashedDesign]

Nicht direkt ein Tag hat ja nur einen src Wert also kann man nur auf ein Bild zugreifen. Das heißt du hast eine Quelle für Bilder die evtl. 50px im Mobile einnehmen und in einer 4k Auflösung 500px. Wenn du das Picture Tag verwendest kannst du unterschiedliche Bilder Laden also z.B. Mobile ein 50px Bild das nur 2kb groß ist und in 4k ein 500px Bild das 50kb groß ist :) klingt alles nicht nach viel aber wenn du z.B. sowas wie eine Produktseite mit 20-50 Bildern hast wird das schnell zu einem Problem. Hoffe das kann es verdeutlichen.

[@ManuelB_]

nur mal so als info: des öfteren wäre der ausdruck "element" mehr angebracht als "tag". das liegt daran, weil "" und "" zwei verschiedene tags sind die gemeinsam(!) das picture-element bilden. du benutzt also 2 picture-tags, weil es mit einem nicht gehen würde jemand, der tutorial-videos macht, sollte den unterschied kennen und auch beachten.

[@jugibur2117]

Ich finde das etwas haarspalterisch... "Tag" hat sich aber doch durchaus etabliert, egal wie er beendet / geschlossen wird.

[@ManuelB_]

@@jugibur2117 na wenn du etwas falsches haarspalterisch findest, ist das deine sache. zu behaupten, diese falschen aussagen haben sich etabliert, zeigt inkompetenz. mag ja sein, dass den unterschied ein paar script-kiddies und möchtegern-webseitenbauer noch nicht kapiert haben, fakt ist, wenn es sich in deinem umfeld etabliert hat, bist du ein noob, umgeben von noobs

[@jugibur2117]

@@ManuelB_ Wow, kein Grund gleich komplett beleidigend zu werden... arbeite mal etwas an deiner charakterlichen Reife!

[@ManuelB_]

@@jugibur2117 die aussage, dass du inkompetent und ein noob bist, ist keine beleidigung sondern eine fundierte einschätzung aufgrund deines kommentars. und du darfst mir glauben, ich ändere mich nicht, nur damit du nicht anfängst zu heulen. werd erwachsen damit du mit gegenwind umgehen kannst. solange du das nicht kannst, spar dir deine inkompetenten kommentare auf leute, die ahnung haben, weil sie in dem bereich seit 40 jahren tätig sind

[@ferryc.7205]

Hi, super Tag kannte ihn noch nicht

[@UnleashedDesign]

Sehr gut dann hat man wieder etwas neues gelernt ;)

[@ferryc.7205]

@@UnleashedDesign ja war super