Spróbuję sporządzić krótką instrukcję dotyczącą właściwego wykorzystania obrazów na stronie.

Nie chodzi o elementy projektu, ale o zdjęcia jako treści (zdjęcia, galerie, zrzuty ekranu, instrukcje, skany dokumentów itp.).

Główny problem polega na tym, że Menedżer treści lub sam klient otrzymuje zdjęcia do opublikowania na stronie i natychmiast przesyła je na stronę.

Jest to problem numer 1, ponieważ nikt nie obserwuje, jakie są tam zdjęcia, jaki są rozmiar, waga i jak się je nazywa, a to wszystko są ważne punkty, ponieważ:

• Rozmiar zdjęcia nie powinien przekraczać szerokości bloku, w którym będzie obraz , tzn. Jeśli to zdjęcie zostanie umieszczone wewnątrz artykułu, a jego rozmiar w treści wynosi 300 pikseli, nie trzeba przesyłać zdjęcia o szerokości 5000 pikseli, jeśli jest to zdjęcie dla suwaka lub galerii, które mogą używać wyskakującego okienka, wtedy maksymalna szerokość zdjęcia będzie odpowiadała szerokości ekranu, zwykle ustawiam 1920px.
• Ciężar zdjęć nie powinien być mierzony w megabajtach , optymalny jest rozmiar zdjęć do 200 KB, ale może być większy, w zależności od rozmiaru i formatu obrazu. Ale jeśli zdjęcie waży więcej niż 1 MB, jest to problem.
• Nazwa zdjęcia powinna być zapisana tylko po łacinie bez spacji i znaków specjalnych . Cyrylicy, spacji i znaków specjalnych nie można używać ze względu na fakt, że różne hostingi w tym formacie mogą powodować problemy, a niemal cały hosting po archiwizacji-archiwizacji (podczas przesyłania lub przywracania z kopii zapasowej) cyrylica zostanie przekształcona w niezrozumiałe znaki , a ścieżki plików zapisane w bazie danych lub zapisane w kodzie nie będą odpowiadać zaktualizowanym nazwom plików ... Tylko łaciński .

Teraz wyobraź sobie sytuację, w której otrzymaliśmy od klienta 20 zdjęć, które należy dodać do galerii. Moglibyśmy je pobrać od razu, ale zacząłeś czytać ten artykuł i zacząłeś myśleć.

20 zdjęć waży 93 MB? Prawdopodobnie warto zmniejszyć ich wagę. Szerokość niektórych zdjęć 5000px? Dlaczego, jeśli galeria witryny ogranicza rozmiar zdjęcia do 1200 pikseli. Wszystkie zdjęcia mają różne nazwy i częściej, czy jest to zestaw znaków i liczb generowanych przez aparat i nieprzydatnych ani dla użytkownika, ani dla wyszukiwarek? Następnie lepiej jest użyć prostego szablonu w nazwie zdjęć w odniesieniu do jakiegoś wydarzenia lub nazwy artykułu.

Jeśli chcesz zmienić jeden lub dwa obrazy, będzie łatwiej i szybciej zrobić z Photoshopem, poprzez CTRL + ALT + zmienię rozmiar i zapisz wynik dla WEB poprzez CTRL + ALT + SHIFT + S.

Ale mamy 20 zdjęć (a czasem więcej), a następnie potrzebujemy narzędzia do zmiany obrazów w serii.

Dzięki programowi FastStone Photo Resizer możemy zmieniać rozmiar zdjęć i nazywać zdjęcia. Pobierz go tutaj. faststone.org/FSResizerDownload.htm .

Krótka instrukcja:

1. Dodaj pliki do przetwarzania (1), wybierz folder dla przetwarzanych plików (2), ustaw nową nazwę dla plików (3) i ustaw ustawienia dla zmiany rozmiaru (4)
   
2. W ustawieniach tej witryny ustawiam rozmiar na 1200 pikseli, ponieważ galeria ogranicza rozmiar zdjęcia do 1200, a zazwyczaj dla galerii ustawiam rozmiar na 1920
   
3. Na wyjściu otrzymujemy następujące wyniki:
   
   Jak widać, całkowita waga wynosiła 93 MB i wynosiła 6 MB , co jest całkiem dobre dla 20 plików.

Ten wynik nie jest zły, ale nie doskonały. Aby Google Page Speed nie przysięgał na ciężar zdjęć, optymalizujemy je nieco bardziej.

Do ostatecznej optymalizacji obrazu jest idealny 1 z 2 zasobów online tinypng.com lub kraken.io . Teraz używam głównie pierwszego.

I pozwala nam kompresować zdjęcia o kolejne 46% , zachowując kolejne 3 MB

W rezultacie nasza strona nie załaduje użytkownika z 93 MB dużych obrazów , ale załaduje tylko 3 MB zdjęć o pożądanym rozmiarze . Dodatkowo, przestrzeń jest zapisana na twoim hostingu, ponieważ 10 z tych galerii i tani hosting będą już oceniane przez prawie 1 GB, podczas gdy 10 galerii 3 MB zajmie tylko 30 MB.

W tym artykule tylko 4 zdjęcia, ale optymalizując je za pomocą tinypng.com zmniejszyłem wagę z 1370 KB do 350 KB, lub 75%, może drobiazg, ale użytkownik będzie musiał pobrać 1 MB mniej, co oznacza, że ​​strona będzie ładowana szybciej.

Ważne jest, aby sprawdzić jakość obrazów po wszystkich procedurach, ponieważ mogą pojawić się artefakty, cienkie linie mogą się rozmazywać, a skomplikowane rysunki z drobnymi szczegółami mogą się unosić. Dlatego, jeśli jakość materiałów graficznych jest dla Ciebie ważniejsza niż ich waga i prędkość pobierania na stronie, możesz pominąć ostatni krok.

Nieco później napiszę coś o altach i tytułach, ale nie wiadomo kiedy.