HTML & CSS για αρχάριους (Μέρος 09): Γραφικά για το διαδίκτυο (01)

Όταν αποθηκεύετε εικόνες σε ένα γραφικό πρόγραμμα, προσφέρονται πολλές διαφορετικές μορφές αρχείων εικόνας. Αλλά ποια από αυτές θα πρέπει να επιλέξετε όταν πρόκειται να ενσωματώσετε την εικόνα σε μια ιστοσελίδα;



Αν θέλετε να παρουσιάσετε μια εικόνα στην ιστοσελίδα σας, έχετε τρεις επιλογές μορφών.

• GIF

• JPEG

• PNG

Αλλά ποια μορφή θα πρέπει να επιλέξετε για ποια χρήση; Θα πρέπει να χρησιμοποιήσετε GIF ή PNG για φωτογραφίες; Αρχικά, μια σύντομη επισκόπηση των δυνατοτήτων κάθε μορφής.

Αυτή η μικρή επισκόπηση δείχνει ήδη τις διαφορετικές ιδιότητες των μορφών. Φυσικά, δεν είναι λίγο το παράξενο ότι ορισμένες μορφές είναι πιο κατάλληλες για συγκεκριμένες χρήσεις από άλλες. Ακριβώς σε αυτό το σημείο επικεντρώνεται η παρακάτω ενότητα. Εκεί θα δείτε πότε είναι καλύτερο να χρησιμοποιήσετε κάθε μορφή.

Φωτογραφίες

Καμία αμφιβολία, για φωτογραφίες χρησιμοποιείτε το JPEG. Εδώ μπορείτε να συμπιέσετε πολύ καλά τις εικόνες, μεταβάλλοντας μεταβλητά την ποιότητα. Βρίσκετε τη σωστή ισορροπία μεταξύ ποιότητας και ρυθμού συμπίεσης.

Στιγμιότυπα οθόνης/διαγράμματα

Γι' αυτό το λόγο, η μορφή PNG είναι η καλύτερη επιλογή. Το PNG είναι ενδιαφέρον επίσης για τεχνικά σχέδια, διαγράμματα κ.λπ. Το PNG μπορεί επίσης να χρησιμοποιηθεί για εικόνες όπου υπάρχουν διαφανής τμήματα στην επεξεργασία.

Γραφικά/Λογότυπα

Αν έχετε κείμενο στο λογότυπό σας ή θέλετε γενικά να απεικονίσετε κείμενο, πρέπει να χρησιμοποιήσετε GIF ή PNG. Λόγω της καλύτερης απόδοσης, συνήθως προτιμάτε το PNG. Το JPEG δεν είναι κατάλληλο για την απεικόνιση γραφικών, καθώς οι περιθώρια εμφάνισης είναι ανακάτεμα.

Διαφάνεια

Όταν πρόκειται για την απεικόνιση διαφανών περιοχών, το JPEG ξεκινάει κατ' αρχήν. Αυτό σημαίνει ότι απομένουν μόνο τα GIF και PNG. Αλλά ποια από τις δύο μορφές προτιμάτε τώρα όταν συζητείτε για τη διαφάνεια; Το GIF αντιμετωπίζει αρχικά τη διαφάνεια, αλλά τα αποτελέσματα είναι συνήθως ανεπαρκή. Ένα pixel στη μορφή GIF μπορεί να είναι είτε πλήρως ορατό είτε πλήρως διαφανές. Αυτό το φαινόμενο δεν εμφανίζεται στο PNG. Αυτή η μορφή διαθέτει ένα επιπλέον κανάλι άλφα, που δίνει τη δυνατότητα για λεπτομερέστερα αποτελέσματα διαφάνειας.

Ενσωμάτωση εικόνων

Οι γραφικές εικόνες μπορούν να ενσωματωθούν μέσω του στοιχείου img. (Παρακαλώ σημειώστε ότι συχνά τα στοιχεία εικόνας ενσωματώνονται μέσω CSS. Λεπτομερείς πληροφορίες για το CSS θα ακολουθήσουν φυσικά. Η παρουσιαζόμενη μέθοδος HTML είναι πλήρως συμμορφωμένη με τα πρότυπα και μπορεί να χρησιμοποιηθεί ανένδοτα σε HTML5.)

<img src="logo.png" alt="PSD-Tutorials.de" />

Το img είναι ένα αυτόνομο στοιχείο. Με τις αντίστοιχες ιδιότητες μπορούμε να περιγράψουμε λεπτομερέστερα την εικόνα. Η σημαντικότερη ιδιότητα είναι αναμφισβήτητα το src. Διότι μέσω αυτού ορίζετε ποια εικόνα θα ενσωματωθεί. Στο παραδειγμένο παράδειγμα θεωρώ ότι η γραφική logo.png βρίσκεται στον ίδιο φάκελο με το αρχείο HTML όπου ορίστηκε το στοιχείο img.

Για να εμφανιστούν πραγματικά οι εικόνες, πρέπει να ορίσετε σωστά το μονοπάτι προς αυτές. Το HTML παρέχει διάφορες επιλογές για την αναφορά τους.

• Απόλυτα μονοπάτια

• Απόλυτες αναφορές μονοπατιών σε σχέση με τη βασική διεύθυνση

• Σχετικές αναφορές μονοπατιών σε σχέση με τη βασική διεύθυνση

Πρώτα απ' όλα για τα απόλυτα μονοπάτια. Αυτήν την επιλογή τη χρησιμοποιείτε συνήθως όταν η εικόνα δεν βρίσκεται στον δικό σας διακομιστή. Αν ϸέλετε να ενσωματώσετε τη γνωστή πεταλούδα από το PSD-Tutorials.de στην ιστοσελίδα σας, μπορείτε να το κάνετε αυτό άμεσα από τον διακομιστή στον οποίο βρίσκεται. Ανακαλύψτε πρώτα το μονοπάτι της εικόνας. Αυτό γίνεται ευκολότερα κάνοντας δεξί κλικ στην εικόνα στον περιηγητή και επιλέγοντας το "Αντιγραφή διεύθυνση URL εικόνας".

Αυτό που φορτώνεται στο πρόχειρο μνήμης θα πρέπει να μοιάζει τελικά με αυτό:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Αυτή είναι η πλήρης

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Έτσι, αναθέτουμε στο γνώρισμα src την πλήρη διαδρομή για την εικόνα.

Το πρόβλημα με αυτές τις απόλυτες διαδρομές είναι ότι στην τελική δεν έχετε πραγματικό έλεγχο επί του περιεχομένου που έχετε ενσωματώσει. Αν η γραφική που αναφέρετε διαγραφεί από τον διακομιστή ή μετακινηθεί σε ένα διαφορετικό κατάλογο, τότε θα υπάρξει ένα σφάλμα εμφάνισης.





Γι' αυτό η απόλυτη αναφορά πρέπει πραγματικά να αποτελεί την εξαίρεση.

Απόλυτες αναφορές διαδρομής σχετικά με τη βασική διεύθυνση

Αυτή η παραλλαγή είναι πάντα προτιμητέα όταν η εικόνα βρίσκεται στον ίδιο υπολογιστή/διακομιστή με το αρχείο HTML και είναι προσβάσιμη μέσω του τρέχοντος πρωτοκόλλου. Ακούγεται περίπλοκο, αλλά δεν είναι.

Ένα παράδειγμα:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Εδώ πρόκειται για την πλήρη διεύθυνση. Ο ακόλουθος τομέας αποτελεί την απόλυτη αναφορά διαδρομής.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Αυτή η απόλυτη αναφορά διαδρομής σχετίζεται σχετικά με τη βασική διεύθυνση http://4eck-media.de.

Σχετικές αναφορές διαδρομής σχετικά με τη βασική διεύθυνση

Αυτή η παραλλαγή που παρουσιάζεται τώρα είναι σίγουρα η πιο διαδεδομένη. Εδώ πάντα λαμβάνεται ως σημείο αναφοράς η τρέχουσα διαδρομή από την οποία τελικά γίνεται η αναφορά. Και πάλι, μερικά παραδείγματα. Ας υποθέσουμε, λοιπόν, ότι υπάρχει το αρχείο index.htm, στο οποίο θέλετε να ενσωματώσετε μια εικόνα. Επιπλέον, υπάρχει στον ίδιο φάκελο ο κατάλογος images, στον οποίο βρίσκεται η αναφερόμενη εικόνα.

index.htm
images
--logo.png

Η κλήση στο γνώρισμα src θα ήταν σε αυτήν την περίπτωση:

src="images/logo.png"

Πώς θα φαινόταν, όμως, όταν η εικόνα βρίσκεται σε έναν φάκελο που βρίσκεται πάνω από το αρχείο HTML;

project
--images
-----logo.png
--archive
-----index.htm

Σε αυτήν την περίπτωση, το index.htm βρίσκεται ένα κατάλογο κάτω από την εικονιζόμενη εικόνα logo.png.

src="../images/logo.png"

Η σύνταξη εδώ σημαίνει: Πήγαινε ένα επίπεδο πάνω, μετάβασε στον κατάλογο images κι εμφάνισε την logo.png.

project
--images
----logo.png
----2013
------januar
--------index.htm

Εδώ η σύνταξη είναι:

src="../../images/logo.png"

Η εικόνα logo.png βρίσκεται σε αυτήν την περίπτωση δύο επίπεδα ανώτερα από το index.htm στον κατάλογο images.

Το πλεονέκτημα των σχετικών αναφορών διαδρομής είναι η ευελιξία τους. Έτσι μπορείτε, για παράδειγμα, να αναπτύξετε το έργο τοπικά και στη συνέχεια να το αντιγράψετε σε έναν "πραγματικό" διακομιστή. Οι διαδρομές θα παραμείνουν αμετάβλητες μετά από αυτή τη διαδικασία.