• WITRYNY

Witryny i serwisy internetowe 2

Narzedzia

Formaty obrazow w sieci

JPG/JPEG ( Joint Photographic Experts Group )

  • najczesciej spotykany
  • stosunkowo dobra kompresja (stratna)
  • dobry do zdjec/obrazow
  • zly dla grafik liniowych (ikon, logotypy, wykresy - “pixeloza”)

JPG

GIF (Graphics Interchange Format)

  • kompresja bezstratna (8bit -> 256 kolorow)
  • dobry do ikon, wykresow etc.
  • animacje

GIF

PNG (Portable Network Graphics)

  • zamiennik dla GIF
  • dobry do zdjec codziennych (np screenshoty)
  • wspiera transparente tla
  • dla duzych plikow PNG < JPG
  • APNG

PNG

GIF vs APNG

APNG

GIF

WEBP

  • zamiennik dla JPG/PNG

WEBP vs JPG

WEBP

JPG

SVG (Scalable Vector Graphics)

  • wspiera tylko wektory
  • latwa kompresja bezstratna

Link

HTML i obrazy

SRC

<img src="jocker.jpg">
<img src="//www.google.com/images/jocker.jpg">
<img src="/relative/path/to/image/jocker.jpg">

ALT

<img src="jocker.jpg" alt="alt text">

Size

<img src="jocker.jpg" alt="alt text" style="width:20px;height:60px;">
<img src="jocker.jpg" alt="alt text" width="20" height="60">

Link

CSS i obrazy

body {
 background-image: url("jocker.jpg");
 background-color: #cccccc;
}

Zadanie do wykonania w domu

Do strony powstalej na poprzednich zajeciach, prosze o dodanie trzech miniaturek (tag img), ktore beda odnośnikami (tag a) do orginalych wersji poszczegolnych obrazkow.

Prosze o opracowanie minuaturek dla formatow: PNG, JPG oraz GIF.

3-images