Kαλοπιστικά γραφικά vs γραφικά περιεχομένου

Σε αυτό το μικρό postακι θα προσπαθήσω να εξηγήσω την διαφορά των συγκεκριμένων γραφικών/images καθώς και πως πρέπει να εμφανίζονται στην markup μας (με τι attributes κτλ.). Για κάποιον λόγο αυτή η απλή διαφορά δεν γίνεται αμέσως αντιληπτή, ιδιαίτερα στους  νέους του χώρου, οπότε ας ξεκαθαρίσουμε λίγο τα πράγματα.

Η λύση είναι απλούστατη και θέμα θέμα απλής λογικής. Όποιο γραφικό είναι μέρος του περιεχομένου, όπως πχ. μια φωτογραφία, ένα διάγραμμα, κτλ., πρέπει να παρουσιάζεται με το HTML img tag και να περιέχει – εκτός φυσικά από το src attribute – και ένα περιγραφικό alt attribute. Αντιθέτως τα γραφικά που δεν είναι μέρος του περιεχομένου, δεν θα πρέπει να υπάρχουν καθόλου στην markup μας (ως img tags)! Τα συγκεκριμένα γραφικά θα πρέπει να παρουσιάζονται είτε μέσω CSS, είτε μέσω DOM injection χρησιμοποιώντας κάποια Javascript library. Εάν φυσικά τα πράγματα δεν γίνονται αλλιώς (δεν μπορούμε να κάνουμε και μαγικά σε μερικές περιπτώσεις), τότε μπορούμε να προσθέσουμε τα συγκεκριμένα γραφικά με img tags τα οποία θα έχουν κενή την alt attribute τους (<img src="logo.jpg" alt="" />). Εύκολο έτσι;

7 thoughts on “Kαλοπιστικά γραφικά vs γραφικά περιεχομένου”

  1. Johnny ωραία τα λές αλλά πιστεύω ότι πρέπει να εξηγήσεις την φράση “τα γραφικά που δεν είναι μέρος του περιεχομένου” με κανένα παραδειγματάκι για τους άπειρους που ίσως να μην καταλάβουν!

    Συνέχισε την καλή δουλειά!!!

  2. Συμφωνώ. Επίσης για σκοπούς SEO τα γραφικά που δεν είναι μέρος του περιεχομένου πρέπει να έχουν null attribute.

  3. Ο John πρέπει να είναι πιο ειδικός για να απαντήσει σε αυτό αλλά ορισμένα παραδείγματα που μπορώ να σκεφτώ είναι
    – γραφικά που είναι μέρος του template
    – banners
    – η φάτσα μου που εμφανίζεται σε αυτό το comment

  4. Οτιδήποτε έχει να κάνει με το design της σελίδας, όπως γραφικά template, banners, γραφικά σε header/footer/background, κτλ κτλ. είναι καλοπιστικά γραφικά.

    Τώρα εάν γράψεις ένα άρθρο/post για τον Καραμανλή και προσθέσεις και κάποια φωτογραφία του, κάποιο σχεδιάγραμμα σχετικά με το πρόγραμμα του κτλ. κτλ., όλα αυτά είναι images (γραφικά/φωτογραφίες/εικόνες) περιεχομένου.

    Ελπίζω να βοήθησα 😉

  5. Πάντως αν γράψεις για τον Μητσοτάκη, όπως και να βάλεις την εικόνα το πρόβλημα θα μετατεθεί στον Server ίσως με ένα καλό outage ή ακόμα και πρόβλημα σε όλο το Datacenter 😀

    Good tip John 😀

  6. Φίλε odys, όλα τα κείμενα που γράφω σε αυτό το blog είναι δικά μου και όχι μεταφράσεις, αντιγραφές ή παραποιήσεις ξένων κειμένων (δεν έχει και πολύ νόημα άλλωστε να ξεκινήσω κάτι τέτοιο). Σκοπός μου είναι να δημιουργηθεί ποιοτικό ελληνικό περιεχόμενο με θέμα το web design και development, αλλά και να βοηθήσω κάποιους συναδέλφους/newbies σε αυτά τα θέματα… Το ότι τα πολύ μεγάλα ξενόγλωσσα site site που αναφέρεις, ασχολούνται και αυτά με το web design/develpment και όπως είναι φυσικό έχουν και ανάλογα posts/άρθρα κτλ. δεν λέει κάτι. Τέλος δίνω πάντα backlinks και credits όπου χρειάζεται.

Leave a Reply