Czy zmiana rozmiaru obrazów w CSS jest nadal złym pomysłem?

Zawsze sprawdzano, że użycie atrybutów szerokości / wysokości na obrazach, które nie są tym, czym jest oryginalny obraz, jest złym pomysłem. Może to oznaczać pikselizowane obrazy lub pliki do pobrania większe niż niepotrzebne.

Ale czy to wciąż problem? Nie sugerowałbym powiększania zdjęć, ale zmniejszanie nie powinno być problemem, pod warunkiem, że nie różni się zbytnio od oryginału i skalowania.

Na przykład mam zdjęcie o wymiarach 600 x 400 i przyklejam na nim szerokość 400 pikseli. Większość współczesnych przeglądarek skaluje obraz w dół i wygląda na to, że renderowanie jest nadal przyzwoite.

A więc, co na to wszyscy myślą?

Nie martw się o skalowanie (większość przeglądarek sprawi, że skalowane obrazy będą wyglądały dobrze, z mojego doświadczenia), martw się o rozmiar ładunku, który wysłałeś do użytkownika końcowego.

Jasne, możesz argumentować, że marnujesz tylko niewielką ilość przepustowości na obu końcach dla tych dodatkowych pikseli, które wysyłasz bez zamiaru użycia, ale wiąże się to również z kosztem czasu.

Dla każdego wysyłanego obrazu o rozmiarze przekraczającym wymagany, dodajesz odrobinę opóźnienia w ładowaniu strony dla użytkownika. W przypadku witryn zawierających tylko kilka zdjęć nie będzie to stanowić problemu, ale w przypadku witryny z dużą liczbą zasobów pomocniczych zaczniesz dodawać zauważalne opóźnienia, a opóźnienie będzie kosztować Twoje pieniądze .

Również w odniesieniu do niewielkiego kosztu przepustowości, wraz ze wzrostem ruchu w witrynie, wzrośnie również koszt niewielkiej przepustowości.

Zaoszczędź pieniądze swojej firmy i poświęć 30 sekund, aby samodzielnie zmienić rozmiar obrazu! :)

Jak zawsze, wykonaj testy porównawcze, ale jeśli aplikacja nie jest naprawdę popularna / krytyczna dla misji, nie martwiłbym się zbytnio zmniejszeniem z 600 do 400, jeśli jesteś w sytuacji, w której musisz często zmieniać szerokość. Jeśli jest to jednorazowe, jasne, uruchom convert -geometry 400x photo1.jpg photo2.jpg, ale jeśli jest to aplikacja, którą szybko iterujesz, prawdopodobnie ważniejsze są rzeczy, o które należy się martwić, nawet w zakresie wydajności. np. opóźnienie; na przykład ładowanie obrazów z wyprzedzeniem.

Rozmiar obrazu może być ważny na urządzeniach mobilnych, gdzie duże rozmiary obrazu mają potrójny efekt powolnego ładowania (mobilny Internet szerokopasmowy), dłuższego renderowania (sprzęt niższej jakości) i - po renderowaniu - nie są w pełni widoczne w wysokiej rozdzielczości tak czy siak.

Możesz także zajrzeć do responsywnych obrazów. Wiele pracy wykonali ludzie, na przykład automatyczne zmniejszanie rozmiarów - a następnie buforowanie - obrazów na serwerze to dobre podejście, jeśli często się pojawia.

Problemem jest ładowność, przeglądarka wyrenderuje jest w porządku w dowolnym rozmiarze (szczególnie o mniejszych rozmiarach, o których mówisz)

W przypadku witryny o dużej objętości nawet pojedyncze bajty mają znaczenie. Nie chcesz wysyłać niechcianych danych.

Mówiąc o złym pomyśle, nie jest złym pomysłem dostosowanie szerokości / wysokości o kilka pikseli lub może to być 10 lub 20 pikseli. Ale to bardzo zły pomysł, jeśli zmniejszasz duży obraz do miniatury :)