Css vs Images

[rafinos]

Γεια σας παιδιά!

 

Θα ήθελα την άποψη των πιο έμπειρων σχετικά με το ποια από τις δύο περιπτώσεις έχει καλύτερο performance. 

 

Css buttons ή Εικόνες κουμπιά;

 

Το ποστάρω στον προγραμματισμό και όχι στο web development γιατί ρωτάω κυρίως για την χρήση τους τοπικά και όχι διαδικτυακά (στη δεύτερη περίπτωση είναι λογικό το css να φορτώνει ταχύτερα αν και σε ορισμένες περιπτώσεις ίσως μια εικόνα είναι πιο βέλτιστη λύση).

 

Αυτό που με ενδιαφέρει είναι ποιο καταναλώνει λιγότερους πόρους. Το css ή μια εικόνα;

[defacer]

CSS όπως και να το δεις, αλλά τι ακριβώς πόρους έχεις στο μυαλό σου και κάνεις την ερώτηση; Επίσης έχεις κάποιο λόγο να θες να βάλεις εικόνα;

[rafinos]

Απλά, ψάχνω τρόπους να βελτιώσω τις android εφαρμογές μου που τρέχουν σε webview και όχι σε java. Κατά κύριο λόγω έχω κουμπιά που είναι έτοιμες εικόνες και όχι css για αυτό ρωτάω περισσότερο. 

[jimex]

Όλα εξαρτώνται από το τι εμφάνιση θες να πετύχεις σ' αυτό το κουμπί. Ωστόσο η CSS στη συντριπτική πλειοψηφία είναι προτιμότερη.

 

Είσαι σίγουρος όμως ότι σε μια εφαρμογή που τρέχει τοπικά το πρόβλημα είναι το rendering των κουμπιών; Μιλάμε το πολύ για ms αν όχι μs...

[rafinos]

Πιο πολύ αναρωτιέμαι, αν θα έχω τους ίδιους ή και καλύτερους χρόνους φόρτωσης σε περίπτωση που καταφέρω σχεδόν το ίδιο αποτέλεσμα με css αντί για τις εικόνες.

 

Βέβαια στην περίπτωσή μου παίζει ρόλο και η απόδοση του ίδιου του webview που αν και έχει βελτιωθεί αισθητά στις πιο πρόσφατες εκδόσεις android ακόμα δεν πιάνει τους χρόνους του ίδιου του browser (εκτός και αν είναι ιδέα μου).

[jimex]

Πιο πολύ αναρωτιέμαι, αν θα έχω τους ίδιους ή και καλύτερους χρόνους φόρτωσης σε περίπτωση που καταφέρω σχεδόν το ίδιο αποτέλεσμα με css αντί για τις εικόνες.

 

Βέβαια στην περίπτωσή μου παίζει ρόλο και η απόδοση του ίδιου του webview που αν και έχει βελτιωθεί αισθητά στις πιο πρόσφατες εκδόσεις android ακόμα δεν πιάνει τους χρόνους του ίδιου του browser (εκτός και αν είναι ιδέα μου).

 

Με css μικραίνεις πρώτον το μέγεθος της εφαρμογής και άρα κάνεις ευκολότερο το distrubution. Κατά 2ον αν γράψεις σωστά css έχεις κάτι που κάνει σωστό scaling σχετικά εύκολα.

 

Οι χρόνοι φόρτωσης τώρα αν μιλάμε για 3 buttons όλο κι όλο εξαρτάται από το αν είναι πιο γρήγορος ο υπολογισμούς του css σε σχέση με το loading από τη flash storage. Επίσης αν φορτώνονται εξ' αρχής οι εικόνες στη μνήμη, γενικά μπορεί να καθυστερεί στην αρχή, αλλά κατά τη χρήση της εφαρμογής να είναι και πιο γρήγορο. Επίσης ανάλογα με το που χρειάζονται οι εικόνες, αν φορτώνονται σε νεκρό χρόνο μπορεί να είναι και γενικά πιο γρήγορο. Αλλά μιλάμε για χρόνους που στη χειρότερη να είναι μερικά ms. Δεν ενδιαφέρουν κανέναν αυτά σε τέτοιες περιπτώσεις και ο λόγος για να χρησιμοποιήσεις css σίγουρα δεν είναι το performance gain...

[rafinos]

Δείτε παρακάτω τη λύση με css και τη λύση με Εικόνα.

 

Τα πιο μικρά κουμπιά είναι με css. 

 

Ορίστε το css:

#buttons{
	background-color: #056571;
	border-bottom: 2px solid #000;
	width: 96%;
	padding: 2%;
	height: auto;
	text-align: center;
}
	
#buttons a{
	display: inline-block;
	width: 40%;
	color: #FF6A5C;
	background-color: #CCDFCB;
	text-decoration: none;
	margin: 0 auto;
	padding: 15px 5px;
	border: 2px solid #000;
	text-shadow: 1px 1px #414141;
}

Και για να πετύχω font-size που να είναι ίδιο σε όλες τις αναλύσεις χρησιμοποιώ την παρακάτω συνάρτηση.

<div id="buttons">
        <a href="#" id="a">new game</a>
        <a href="#" id="b">resume game</a>
</div>

function change_font_size(elem, num){
	var elem_width = $(elem).width();
	console.log(elem +"width:"+ elem_width);
	var new_font_size = parseInt(elem_width / num);
	$(elem).css("font-size",new_font_size + "px");
	console.log(elem +":"+ new_font_size);
}

Στην προκειμένη περίπτωση το num είναι 6 γιατί αν το κάνω μεγαλύτερο έχω πρόβλημα σε μερικές περιπτώσεις. 

 

Και με το κουμπί του high score γίνεται το ίδιο μόνο που είναι display: block;

 

Θεωρείται καλύτερο το css κομμάτι;

[jimex]

Χρησιμοποίησε relative μεγέθη και θα έχεις αυτόματο scaling.

[rafinos]

Χρησιμοποίησε relative μεγέθη και θα έχεις αυτόματο scaling.

Αυτό εννοείς;

https://css-tricks.com/viewport-sized-typography/

 

Η εφαρμογή τρέχει κ σε παλιότερες του android 4.4 εκδόσεις κ πολύ πιθανόν να μην τρέχει σωστά.

[jimex]

Και αυτά, αν και δε νομίζω το πρόβλημά σου εσένα να είναι το μέγεθος του viewport. Relative μεγέθη όπως em, ex, ποσοστά κλπ. που έχουν support από πολύ πριν το CSS3 κατά 99% στοιχηματίζω ότι είναι αρκετά στη δική σου περίπτωση που ανάλογα το dpi o browser θα κάνει και το αντίστοιχο rendering.

 

Πάντως πρέπει σίγουρα να παρακολουθήσεις κάποια css και responsive design courses αν έχεις σκοπό να ασχοληθείς σοβαρά με το αντικείμενο... 

[rafinos]

Ναι, αλλά τα relative μεγέθη όπως em, ex κτλ βασίζονται ξεκάθαρα στα pixels της προκαθορισμένης τιμής του font-size και διόρθωσέ με αν κάνω λάθος (γιατί όπως κατάλαβες δεν είμαι και ο μεγαλύτερος γνώστης), ενώ εμένα με ενδιαφέρει να έχω ένα μέγεθος ανάλογο με το μέγεθος του κουμπιού (που αυτό έχει να κάνει ξεκάθαρα με το width της οθόνης). 

 

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

 

Θέλω να έχει ίδια αναλογία σε όλες τις περιπτώσεις. Είτε το δει σε 4k ανάλυση είτε σε 144p.

[jimex]

Ναι, αλλά τα relative μεγέθη όπως em, ex κτλ βασίζονται ξεκάθαρα στα pixels της προκαθορισμένης τιμής και διόρθωσέ με αν κάνω λάθος (γιατί όπως κατάλαβες δεν είμαι και ο μεγαλύτερος γνώστης), ενώ εμένα με ενδιαφέρει να έχω ένα μέγεθος ανάλογο με το μέγεθος του κουμπιού (που αυτό έχει να κάνει ξεκάθαρα με το width της οθόνης). 

 

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

 

Θέλω να έχει ίδια αναλογία σε όλες τις περιπτώσεις. Είτε το δει σε 4k ανάλυση είτε σε 144p.

 

Μπερδέυεσαι. Το em είναι ανάλογο του font size το οποίο κάνει render o browser και το ex του ύψους ενός 'x', όπως αυτό εμφανίζεται στο browser. Ο browser επιλέγει το κατάλληλο μέγεθος της γραμματοσειράς του σε pixel με βάση το dpi της συσκευής ώστε αυτή να είναι αναγνώσιμη από το χρήστη. Το μέγεθος σε pixel το οποίο είναι κατάλληλο για κάθε οθόνη δε σε ενδιαφέρει εσένα. Έχουν ασχοληθεί άλλοι με αυτό. Εσένα σε ενδιαφέρουν τα relative σε αυτό το μέγεθος μεγέθη τα οποία τα παίρνεις με μεγέθη όπως το em και το ex.

 

Από την άλλη δε βλέπεις αποτέλεσμα επειδή κάνεις λάθος δοκιμή. Κάνεις resize το viewport και όχι scale. Δεν αλλάζεις δηλαδή το dpi. Η πιο πρόχειρη δοκιμή είναι να πατήσεις "ctrl -" ή "ctrl +" για να κάνεις zoom out/in. Γιατί μεταξύ ενός κινητού με 480p και 4Κ δεν αλλάζει το μέγεθος της επιφάνειας που βλέπει ο χρήστης. 5" είναι στη μία περίπτωση, 5" είναι και στην άλλη. Απλά στη μία περίπτωση το 'x' καταλαμβάνει πχ. 300 pixel, στην άλλη 2000.

[rafinos]

Μπερδέυεσαι. Το em είναι ανάλογο του font size το οποίο κάνει render o browser και το ex του ύψους ενός 'x', όπως αυτό εμφανίζεται στο browser. Ο browser επιλέγει το κατάλληλο μέγεθος της γραμματοσειράς του σε pixel με βάση το dpi της συσκευής ώστε αυτή να είναι αναγνώσιμη από το χρήστη. Το μέγεθος σε pixel το οποίο είναι κατάλληλο για κάθε οθόνη δε σε ενδιαφέρει εσένα. Έχουν ασχοληθεί άλλοι με αυτό. Εσένα σε ενδιαφέρουν τα relative σε αυτό το μέγεθος μεγέθη τα οποία τα παίρνεις με μεγέθη όπως το em και το ex.

 

Από την άλλη δε βλέπεις αποτέλεσμα επειδή κάνεις λάθος δοκιμή. Κάνεις resize το viewport και όχι scale. Δεν αλλάζεις δηλαδή το dpi. Η πιο πρόχειρη δοκιμή είναι να πατήσεις "ctrl -" ή "ctrl +" για να κάνεις zoom out/in. Γιατί μεταξύ ενός κινητού με 480p και 4Κ δεν αλλάζει το μέγεθος της επιφάνειας που βλέπει ο χρήστης. 5" είναι στη μία περίπτωση, 5" είναι και στην άλλη. Απλά στη μία περίπτωση το 'x' καταλαμβάνει πχ. 300 pixel, στην άλλη 2000.

 

Οπότε το em με το οποίο θα είναι οκ σε ένα dpi θα μου προσφέρει το ίδιο αποτέλεσμα σε όλα τα dpi;

[jimex]

Οπότε το em με το οποίο θα είναι οκ σε ένα dpi θα μου προσφέρει το ίδιο αποτέλεσμα σε όλα τα dpi;

 

Αν τα υπόλοιπα css rules σου είναι αντίστοιχα γραμμένα και δεν έχουν κάτι που να χαλάει το scaling ναι. Γιατί αν είχες φτιάξει τίποτα div spaces με pixels και πάει λέγοντας κλάφτα. Γενικά όλα σου τα μεγέθη θα πρέπει να είναι relative. Φυσικά σε κάθε περίπτωση είναι σχεδόν απαραίτητο να γίνεται testing είτε σε real συσκευές είτε μέσω emulation ότι όλα είναι όντως εντάξει.

[rafinos]

Οκ, σε ευχαριστώ! Θα το τεστάρω.

 

Η αλήθεια είναι παίζω με % οπότε δε νομίζω να έχω θέμα. Θα φανεί...

 

Πρώτο τεστ απέτυχε (πρώτη εικόνα). 

 

Δεύτερο τεστ κάπως καλύτερα αλλά όπως θα δεις δεν είναι το ίδιο αποτέλεσμα. Έχουμε διαφορετικά περιθώρια δεξιά και αριστερά σε κάθε κουμπί πράγμα που σημαίνει πως δεν γίνεται αυτό που λέω. Άρα ή θα πρέπει να το κάνω με vw ή θα πρέπει να το κάνω με jquery όπως έδειξα παραπάνω (δεύτερη εικόνα).

 

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