MaterializeCSS

CodeIgniter

Grafika DTP

Skrypty

Ostatnie Artykuły:

Grafika na stronie.

Grafika na stronie internetowej zawsze dodaje jej pewnego indywidualizmu, wystarczy z przykładowego szablonu zabrać grafikę i często czar pryska, możemy ze zdziwieniem stwierdzić, że layout który jeszcze chwilę temu nam się podobał już wcale nie jest taki wyjątkowy i efektowny.

Częsty błąd to brak jej optymalizacji, zdjęcia bez edycji często zajmują po kilka megabajtów, efekty łatwo przewidzieć, długi czas ładowania strony zniechęci odwiedzającego na starcie, dodatkowo osoby, które mają skromniejsze pakiety internetowe nie będą zachwycone jeśli każde wejście na stronę zabierze im kilkanaście megabajtów transferu.

Recepta jest bardzo prosta:

Zmniejszenie rozmiaru

Rodzaju kompresji

Lekkie zmniejszenie jakości

I już mamy plik kilkukrotnie mniejszy

Bardzo fajnym programem (i dość prostym w obsłudze) jest Infranview (jest do niego spolszczenie).

Ściągnij IrfanView-32bit

Ściągnij IrfanView-64bit

Spolszczenie

Program prócz podstawowych funkcji przycinania, edycji wielkości, koloru, jest również kilka filtrów, przy zapisie pliku JPG możesz wybrać jakość, tutaj zwykle można zejść do wartości 80-85 bez mocno widocznej utraty jakości.

Infranview

Tak więc bazowo zdjęcie które ma wielkość 3000×2000 (2-4MB) spokojnie możemy zmniejszyć do powiedzmy 800×600 i jakości 85% co da nam raptem 80-150kb tak więc różnica jest znaczna. Jeśli chodzi o grafikę na stronie internetowej nie warto przesadzać z jej ilością i dostosować ją do treści, strona powinna zajmować nie więcej jak 1-2MB co pozwoli na bezstresowe z niej korzystanie, jak sprawdzić prędkość strony?

Doskonałym narzędziem jest PageSpeed Insights, który jest częścią bardziej rozbudowanego narzędzia od Google - Lighthouse (dostępny w przeglądarce Google - Chrome).

Na stronie po wpisaniu adresu naszej strony internetowej rozpocznie się test, który pokazuje ogólną wydajność.

Na przykład ta strona otrzymuje bardzo wysoki wynik, co przekłada się na szybkie ładowanie:

speed test

Jak widać wynik to 100 co daje maksymalną możliwą wydajność.


PHP CodeIgniter

Tutorial frameworka PHP, pokazujący konfigurację i instalację podstawowej aplikacji na serwerze.


Zobacz
  • Frameworki
  • Skrypty
  • Nawigacje
  • Przyciski
  • Animacje CSS
  • Javascript
  • jQuery
  • Grid system
  • Gradienty
  • Pluginy
MaterializeCSS

Tutorial frameworku Materialize który pokazuje jak zbudować prostą i responsywną stronę internetową.


Zobacz