Optymalne wykorzystanie obrazów wymaga przeliczenia wysokości i szerokości oryginału w celu prawidłowego wstawienia do projektu witryny. Zazwyczaj obraz jest wprowadzany przez odwiedzającego, menedżera sklepu internetowego, pracownika firmy itd. Wprowadzenie informacji i obrazów zależy od celu zasobu sieciowego. We wszystkich przypadkach konieczne jest dostosowanie rzeczywistego obrazu do miejsca przydzielonego mu na stronie zasobu sieciowego.

Znacznik HTML do wyświetlania rysunków

Tag img służy do wyświetlania obrazu w przeglądarce. Deweloper określa w tym znaczniku wymiary HTML obrazu, szerokość ramki i rzeczywisty adres pliku zawierającego rysunek. Tag img nie ma możliwości określenia położenia obrazu. Możesz tylko określić faktyczną zmianę rozmiaru lub rozmiaru.


W tym przykładzie rzeczywisty obraz jest wyświetlany w rzeczywistym rozmiarze w lokalizacji znacznika img, 50% redukcja wysokości i szerokości oraz zniekształcona wersja, gdy wysokość zmieniła się. Praktyczny sposób zmiany rozmiaru obrazu w HTML oraz jego faktycznej pozycji sugeruje użycie CSS. W tym miejscu znacznik img zawiera informację o źródle obrazu, a jego wymiary i położenie są opisane w pliku arkusza stylów CSS. Należy zauważyć, że tak jak w przypadku img, zmiana rozmiaru arkusza stylów jest proporcjonalna do rozmiaru obrazu.

Miejsce obliczania rozmiarów obrazów

Dostępne są dwie opcje, a także miejsce konwersji wysokości i szerokości obrazu. Wariant serwera (na przykład PHP) jest statyczny,Wariant przeglądarki (javascript) jest cechą dynamiki.


Wykorzystanie języka serwera występuje podczas przetwarzania dużych ilości danych i jest ukierunkowane na tworzenie baz danych, na przykład asortyment towarów w sklepie internetowym. Pobierając rysunki towarów do sklepu, kierownik może nie dbać o to, jak ten lub ten produkt będzie wyglądał. Twórca zasobu sieciowego (sklepu internetowego) może opracować algorytm automatycznego określania wymaganego rozmiaru dla dowolnego produktu: lodówka i kapelusz do pływania będą wyświetlane w tej samej jakości. Funkcje javascript są zwykle używane do nie konwersji wysokości i szerokości obrazu, ale zwiększenia komfortu użytkownika. Na przykład programista może przypisać zdarzenie do tagu zawierającego obraz produktu, a przesuwanie myszy nad nim spowoduje wyświetlenie produktu w większej formie. Pobieranie obrazu nie jest tutaj wymagane, ale jeśli użyto małego obrazu, powiększenie obrazu spowoduje rozmycie konturów. Powszechna jest praktyka używania javascript do zmiany rozmiaru obrazu w HTML. Szczególnie ważne jest nie tylko powiększenie obrazu, ale także wyświetlenie jego części w osobnym oknie (znaczniku). W tym celu zwykle używane są dwa obrazy tego samego produktu: jeden jest główny, drugi jest szczegółowy.

Inne możliwości przedstawiania obrazów

Korzystanie z bezpośredniego obrazu jest wymagane w codziennej praktyce, ale nie w przypadku obrazów w kontekście: towarów w sklepie, zdjęcia pracownika na arkuszu zksięgowość pracowników, proces projektowania ekranów, link do prezentacji lub portfolio.
Najlepiej zastosować tag img dla małych rysunków - ikon. Jest to wygodne, praktyczne i nie wymaga użycia CSS do opisania tego tagu. Bardziej wygodne jest używanie HTML i rozmiarów obrazów div lub span. W tym przykładzie znacznik div id scLine zawiera obraz, który jest pozycjonowany przy użyciu CSS. Rozmiary obrazów HTML są określane przez reguły CSS. Wewnątrz tego cudu znajduje się znaczek img, który można również łatwo umieścić, a także można go ustawić na żądany rozmiar. Główną cechą tego rozwiązania - znacznik div div i rozmiar obrazu tła mogą stanowić pomocniczy projekt dla img. Styl opisu może pozostać niezmieniony, ale styl tagu zewnętrznego może się zmienić. Deweloper może sformułować wiele ciekawych rozwiązań i stworzyć wygodny wyświetlacz informacji graficznej.

Korzystanie z CMS i ręcznego programowania

Wystarczy użyć HTML. Rozmiar obrazu, jego położenie i przejrzystość można łatwo zmienić. Wystarczy podłączyć obsługę javascript do zdarzenia i nadać obrazowi dynamikę. Podczas korzystania z systemów zarządzania witryną niektóre możliwości są trudne w użyciu. Każdy CMS "uważa za swój obowiązek" narzucenie swojej doktryny na temat reprezentacji obrazów i ich dynamiki podczas oglądania przez odwiedzającego stronę. Jednak każdy CMS daje programistom możliwość uzupełnienia zarówno kodu PHP, jak i funkcji javascript. Możesz użyć tej funkcji, aby zapewnić swojej witrynie wyjątkową widoczność w tleprodukty wykonane na podobnym CMS. Osoba zasobów sieciowych zawsze ma znaczenie, zwłaszcza gdy jest wykonywana nie w rozwoju ręcznym (co zawsze jest unikalne), ale na podstawie znanego systemu zarządzania witryną.