Przekazywanie rozmiaru obrazu, najlepsza praktyka

12

Jeśli opracowujesz dokument HTML ściśle przy użyciu bieżącej najlepszej praktyki unikania stylizacji poza znacznikami, w jaki sposób najlepiej komunikować się ze zmianą rozmiaru obrazu?

Dotychczasowe najlepsze praktyki wymagają wysokości i szerokości obrazu z obrazem, ponieważ będzie on renderowany szybciej niż przeglądarka czeka na pobranie obrazu, aby uzyskać jego wymiary. Ale robienie tego wydaje się sprzeczne z izolowaniem stylu z dokumentu.

Dodać atrybut id do każdego obrazu i umieścić wysokość / szerokość w css? Czy to neguje premię renderowania wbudowanej wysokości i szerokości obrazu?

css html images

— Tomasz
źródło

12

Posiadanie szerokości i wysokości w elemencie IMG nie jest przestarzałe i jest zdecydowanie najlepszym sposobem na poinformowanie przeglądarki o szerokości i wysokości obrazu. Zejście z drogi, aby to zrobić, to inna droga jest zbędna i niepotrzebna (i być może głupia). Nie rób niepotrzebnej pracy dla siebie ani przeglądarki. Trzymaj się podstaw, które działają.

— John Conde
źródło

1

... i nie zapomnij też o ALTtagu, nawet jeśli jest pusty lub sprawdzą zgodność.

— Talvi Watia,

@Tchalvak Przepraszamy, ale się mylisz. Możesz dynamicznie zastępować szerokość i wysokość poprzez programowanie po stronie serwera i / lub JavaScript. A według twojej logiki nie można również przesłonić stylów wbudowanych.

— John Conde

Ups, wygląda na to, że myliłem się co do braku nadpisywania css i tak, !importantw css pozwala na przesłonięcie atrybutów szerokości i wysokości, więc początkowo użycie szerokości / wysokości działa dobrze. Teraz jednak utknąłem na pozycji do głosowania. Jeśli miałbyś ochotę edytować odpowiedź, zmieniłbym to. nie wzrusza ramionami. Nie ma to większego znaczenia.

— Kzqai,

8

Odpowiedź Johna Conde jest natychmiastowa. Obrazy mają szerokość i wysokość - to część ich zawartości , a nie ich styl . Nie ma więc potrzeby „separacji” tutaj.

Jednak jeden wyjątek: CSS dla wymiarów obrazu to przydatny, jeśli masz wiele obrazów tego samego rozmiaru (np. Miniatury). Tutaj znacznie lepiej jest użyć klasy CSS, aby zmniejszyć HTML i przyspieszyć rozwój.

W przypadku projektu strony internetowej, w tym przycisków i ikon, najlepszym rozwiązaniem są duszki CSS.

— DisgruntledGoat
źródło

+1, duszki css mają absurdalną różnicę w szybkości strony.

— Kzqai,