Określanie wymiarów obrazu w celu poprawy wydajności przeglądarki

Niedawno przeprowadziłem audyt w mojej witrynie przy użyciu Narzędzi Google dla programistów. Moje obrazy są tego samego rozmiaru (500 w poziomie na 300 pikseli w pionie), więc pomyślałem, że lepiej byłoby pominąć atrybuty rozmiaru obrazu, ponieważ nie byłoby potrzeby obliczania rozmiaru obrazu, gdy jest on już prawidłowy.

W obszarze Wykorzystanie sieci określ wymiary obrazu. Widzę następujące elementy

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

Teraz jestem zdezorientowany. Czy naprawdę powinienem dodawać atrybuty szerokości i wysokości do moich zdjęć, mimo że mają już odpowiedni rozmiar? Wydaje się zbędne.

Przeglądarki pobierają dane równolegle i starają się jak najszybciej renderować stronę.

Jeśli nie określisz rozmiaru, przeglądarka nie będzie wiedziała, jak duży będzie rozmiar obrazu, dopóki pobieranie obrazu nie zostanie całkowicie ukończone.

Opóźnienie to zmusza przeglądarkę do odświeżenia lub zmiany układu - opóźniając czas ładowania strony.

Im więcej obrazów z tym problemem - tym wolniej strona będzie ładowana.

Jeśli określisz rozmiary obrazów, zarówno w HTML, jak i CSS, przeglądarka może uniknąć odmalowania i ponownego przepływu treści.

Z tego powodu należy zawsze określać rozmiary obrazów. Google ma kilka wskazówek na ten temat.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

Więcej informacji na temat procesu renderowania w przeglądarce można znaleźć na stronie: http://taligarsiel.com/Projects/howbrowserswork1.htm

Nie jestem pewien, jak to jest aktualne, ale daje wgląd w działanie przeglądarek i dlaczego możesz chcieć robić takie rzeczy, jak niestosowanie wbudowanego CSS do zastępowania arkuszy stylów.

Responsive Design zwykle nie używa żadnych atrybutów szerokości ani wysokości

Narzędzia programistyczne Google to przewodnik i nie powinieneś egzekwować wszystkiego, co czytasz na ich stronie, w rzeczywistości niektóre rzeczy są nieaktualne. Większość responsywnych stron internetowych nie używa widthlub heightdlatego, że chcą, aby obrazy dostosowały się do rozmiaru ekranu, a dzięki zastosowaniu stałej szerokości i wysokości, <img>co pogorszyłoby wrażenia użytkownika, a Google uznał to za jeden z najważniejszych czynników.

Obejście CSS

Możesz wybrać element poziomu bloku, który ma szerokość i wysokość, osobiście nie użyłbym jednego, ale oto, co Google mówi o poziomie bloku.

Podaj wymiary elementu obrazu lub elementu nadrzędnego na poziomie bloku Upewnij się, że wymiary zostały określone na samym elemencie lub obiekcie nadrzędnym na poziomie bloku. Jeśli element nadrzędny nie jest na poziomie bloku, wymiary zostaną zignorowane. Nie ustawiaj wymiarów na przodku, który nie jest bezpośrednim rodzicem.

Wyobrażam sobie, że wyglądałoby to mniej więcej tak:

Projekt statyczny .ic {width:500px;height:500px;}

Elastyczny projekt:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

Następnie musisz użyć JavaScript lub innego rozwiązania, aby wykryć punkt widzenia i podać 4 różne wersje obrazu, co znowu jest mniej niż praktyczne. Więc jeśli używasz responsywnego projektu, to śmiało bym śmiało dodawał szerokość i wysokość, aby twoja strona była płynna bez względu na to, jaki ekran ją ogląda.

Właśnie odpowiedziałem na podobne pytanie na Wordpress Stack Exchange. Przesłanie go tutaj (administratorzy / moderatorzy: jeśli nie jest to dozwolone, daj mi znać właściwy sposób pomocy).

tak naprawdę nie oznacza, że ​​musisz podać szerokość i wysokość w HTML. Oznacza to, że musisz zarezerwować odpowiednią przestrzeń, a kiedy obraz zostanie załadowany, przeglądarka nie będzie musiała przepełniać i odmalowywać strony.

Poza tym, jeśli zakodujesz wymiary na stałe, będzie to w pewnym sensie pokonywało reagowanie. Jeśli twój układ nie reaguje, jest w porządku, ale jeśli chcesz zachować pewien czas reakcji, możesz użyć tylko CSS, aby osiągnąć wyniki.

Większość czasu, używając zarówno szerokości, jak i max-width:100pracy, wykona pracę, ale ten post z Smashing Magazine ma ciekawą technikę: zamiast używać maksymalnej szerokości: 100%, możesz użyć The Padding-Bottom Hack :

„Dzięki tej technice definiujemy wysokość jako miarę względem szerokości. Wypełnienie i margines mają takie wewnętrzne właściwości i możemy je wykorzystać do tworzenia współczynników kształtu dla elementów, które nie zawierają w sobie żadnej zawartości. Ponieważ wypełnienie ma taką możliwość , możemy ustawić padding-bottom w stosunku do szerokości elementu. Jeśli również ustawimy wysokość na 0, otrzymamy to, czego chcemy. [...]

Następnym krokiem jest umieszczenie obrazu w pojemniku i upewnienie się, że wypełnia pojemnik. Aby to zrobić, musimy umieścić obraz absolutnie wewnątrz kontenera, tak:

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Proces przebiega mniej więcej tak:

1. przeczytaj plik .html
2. z nagłówka pliku .html przeczytaj pliki .css, .js (.js powinno być PO .css ...)
3. przeczytaj img i skrypt ze strony

Tak więc tagi graficzne są odczytywane „późno”. Jednak, aby obliczyć formatowanie strony, dobrze jest mieć rozmiar obrazu (w przeciwnym razie przeglądarki używają „losowego” rozmiaru, takiego jak 1x1, 25x25, ... cokolwiek zaprogramuje przeglądarka).

Aby uniknąć sytuacji, w której strona wygląda na zepsutą, dopóki obrazy nie zostaną odczytane, ustawienie atrybutów szerokości i wysokości pozwala przeglądarce natychmiast obliczyć właściwy układ strony. Dlatego dobrze jest mieć je tam, nawet jeśli mają te same rozmiary.