Tipe Grafis

Pilih format grafis yang tepat

The most common graphics mistake people make on the Web is to use the wrong graphics format for their images. Yang umum grafis kebanyakan orang membuat kesalahan di Web adalah dengan menggunakan format grafis yang salah untuk gambar mereka. But the choice is really quite simple... Tapi pilihan benar-benar cukup sederhana ...

• If your graphics have a lot of colors (such as a photo), choose JPG. Jika grafis Anda memiliki banyak warna (seperti foto), pilih JPG.
• If your graphics have few colors , choose GIF. Jika grafis Anda memiliki beberapa warna, pilih GIF.

For more information see Web Graphics Formats . Untuk informasi lebih lanjut lihat Web Graphics Format .

Optimize GIF files Optimalkan file GIF

When saving your work as a GIF file, use optimized palettes that contain only the colors used - they can cut file sizes in half. Saat menyimpan pekerjaan Anda sebagai file GIF, gunakan palet dioptimalkan yang hanya berisi warna yang digunakan - mereka dapat memotong ukuran file dalam setengah. Newer graphics software gives you a preview before you save - this allows you to experiment with the number of colors to choose the best compromise between quality and file size. grafis baru perangkat lunak memberikan preview sebelum Anda menyimpan - ini memungkinkan Anda untuk bereksperimen dengan jumlah warna untuk memilih kompromi terbaik antara kualitas dan ukuran file.

JPG compression JPG kompresi

Compression and quality will vary from image to image, so when saving your work as a JPG file, experiment with various levels of compression to choose the best compromise between quality and file size. Kompresi dan kualitas akan berbeda dari gambar untuk gambar, sehingga saat menyimpan pekerjaan Anda sebagai file JPG, percobaan dengan berbagai tingkat kompresi untuk memilih kompromi terbaik antara kualitas dan ukuran file. For example... Sebagai contoh ...

Quality: 80 Kualitas: 80 Size: 4260 Ukuran: 4260

Quality: 30 Kualitas: 30 Size: 2026 Ukuran: 2026

Quality: 10 Kualitas: 10 Size: 1077 Ukuran: 1077

Raising the JPG compression from 80 (the first image) to 30 (the second image) cuts file size in half, yet the loss of quality is not too obvious. Meningkatkan kompresi JPG dari 80 (gambar pertama) ke 30 (gambar kedua) memotong ukuran file dalam setengah, namun kehilangan kualitas tidak terlalu jelas. The third image is saved with JPG compression set at 10, and while the file is only 1K, there's a clear loss of image quality. Gambar ketiga adalah disimpan dengan kompresi JPG ditetapkan pada 10, dan sementara file hanya 1K, ada kehilangan yang jelas kualitas gambar.
Different programs use different numbers for JPG compression, but generally, the higher the number, the higher the quality and the bigger the file size. program yang berbeda menggunakan nomor yang berbeda untuk kompresi JPG, tetapi secara umum, semakin tinggi angka, semakin tinggi kualitas dan semakin besar ukuran file.

Web safe colors Warna aman web

One of the biggest ironies in Web development is that most of us creating Web sites have better systems than our audience has. Salah satu ironi terbesar dalam pembangunan web adalah bahwa sebagian besar dari kita membuat situs Web memiliki sistem yang lebih baik dari penonton kami.
Some visitors to your Web site are using computers that can only display 8-bit color (256 colors). Others have newer systems that include 16-bit or 32-bit video cards, but they don't even know they can check or change their settings from 8-bit! Beberapa pengunjung situs Web Anda menggunakan komputer yang hanya dapat menampilkan warna 8-bit (256 warna),. Lain yang lebih baru memiliki sistem yang mencakup 16-bit-bit video 32 atau kartu tetapi mereka bahkan tidak tahu bahwa mereka dapat memeriksa atau mengubah mereka pengaturan dari 8-bit! This means they can't see every color in the spectrum like you can, and that's where the Web safe colors come into play. Ini berarti mereka tidak bisa melihat setiap warna dalam spektrum seperti Anda bisa, dan di situlah warna-warna aman Web ikut bermain.
Web safe colors are also colled the browser-safe palette, the Web palette, the color cube, or the 216-color palette. warna aman web juga colled the-aman palet browser, palet Web, kubus warna, atau warna palet 216. Regardless of the name used, it always refers to the same set of colors. This palette is composed of 216 fixed colors that are universally recognized by browsers and operating systems, even on 8-bit systems. Terlepas dari nama yang digunakan, selalu merujuk ke set yang sama warna. Palet ini terdiri dari 216 warna tetap yang secara universal diakui oleh browser dan sistem operasi, bahkan pada sistem 8-bit.
The Red, Green, and Blue settings of Web safe colors are always some combination of the values 0, 51, 102, 153, 204, or 255 (00, 33, 66, 99, CC, or FF in HEX). An 8-bit browser can't display any colors outside of the safe palette, but it doesn't simply shift the colors to the safe palette, it uses dithering. Yang, Hijau, dan Biru Merah pengaturan warna aman web selalu beberapa kombinasi dari nilai-nilai, 51, 102, 153, 0 204, atau 255 (00, 33, 66, 99, CC, atau FF dalam HEX). Sebuah 8 -bit browser tidak bisa menampilkan setiap warna luar palet yang aman, tetapi ia tidak hanya menggeser warna palet yang aman, menggunakan dithering.
Dithering is the process of sprinkling two or three browser-safe colors to simulate the non-safe color in your graphic. Dithering adalah proses dua atau tiga browser-aman warna sembur untuk mensimulasikan-aman warna non grafis Anda. When the dithering process appears in a solid color, it will cause your images to look unprofessional, and unattractive. Bila proses dithering muncul dalam warna yang solid, akan menyebabkan gambar Anda untuk melihat tidak profesional, dan tidak menarik. Here's an example... Berikut ini adalah contoh ...

The first image shows dithering on non-safe colors. Gambar pertama menunjukkan dithering pada warna non-aman. The second image was created using Web safe colors, and even in 8-bit mode, the browser displays it without dithering. Gambar kedua adalah warna yang aman dibuat menggunakan Web, dan bahkan dalam mode 8-bit, browser menampilkan tanpa dithering.
Dithering only looks bad on solid colors; it is actually necessary on continuous tone images displayed on 8-bit systems. Dithering hanya terlihat buruk pada warna padat; itu sebenarnya perlu pada gambar warna kontinu ditampilkan pada sistem 8-bit.

Anti-aliasing Anti-aliasing

Because images are created using pixel, gridded squares, curved lines and text can appear jagged. The distinct division between pixels is called "alias," so many graphics programs use a technique called " anti-aliasing " to create the illusion of smoothness. Karena gambar yang dibuat dengan menggunakan pixel, kotak grid, garis melengkung dan teks dapat muncul bergerigi. Pembagian jelas antara piksel disebut "alias," begitu banyak program grafis menggunakan teknik yang disebut "anti-aliasing" untuk menciptakan ilusi halus.
Curved shapes and text should always be anti-aliased to maintain a clean and presentable look. bentuk melengkung dan teks harus selalu anti-alias untuk menjaga terlihat bersih dan rapi. Note that more colors are required to create the smooth look. In the image below, you can see the difference between aliased (left) and anti-aliased (right) text... Perhatikan bahwa warna yang lebih diperlukan untuk menciptakan terlihat halus. Dalam gambar di bawah, Anda dapat melihat perbedaan antara alias (kiri) dan anti-alias (kanan) Teks ...

"Halo effect" "Halo efek"

GIF files support a feature called transparency, in which one color out of the 256 colors is set to be transparent. file GIF mendukung fitur yang disebut transparansi, di mana satu warna dari 256 warna diatur harus transparan. If your GIF has a background that is much different from where it will appear on your page, making the background transparent after anti-aliasing will leave what is known as a "halo effect" around the object. Jika GIF Anda memiliki latar belakang yang jauh berbeda dari mana ia akan muncul pada halaman Anda, membuat latar belakang transparan setelah anti-aliasing akan meninggalkan apa yang dikenal sebagai "efek halo" di sekitar objek.
To prevent this, design your graphic objects over a background color close to your Web page background, and then define the background color as transparent. Untuk mencegah hal ini, desain objek grafis anda lebih dekat warna latar belakang dengan latar belakang halaman Web Anda, dan kemudian menentukan warna latar belakang sebagai transparan.

IMG tag IMG tag

Allways use WIDTH and HEIGHT attributes to declare the dimensions of the image. This will allow the browser to allocate the proper space on the page for the image to load in to, allowing text below the image to be rendered while the picture is still downloading. Allways menggunakan atribut WIDTH dan HEIGHT untuk menyatakan dimensi gambar. Ini akan memungkinkan browser untuk mengalokasikan ruang yang tepat pada halaman tersebut untuk memuat gambar ke, memungkinkan teks di bawah gambar yang akan diberikan sementara gambar masih men-download.
Use ALT tags on graphics. Gunakan tag ALT pada grafik. ALT text appears before the image does, or in place of the image for users who have turned graphics off for speed. teks ALT muncul sebelum gambar tidak, atau di tempat gambar untuk pengguna yang telah berpaling grafis off untuk kecepatan. If you don't use ALT text, then users may just see a bunch of boxes with no explanation of what they are. Jika Anda tidak menggunakan teks ALT, maka pengguna hanya dapat melihat sekelompok kotak tanpa penjelasan dari apa yang mereka.
If you use graphics as link anchors, adding a BORDER="0" attribute will make the border invisible instead of colored as a normal link would be. Jika Anda menggunakan grafis sebagai jangkar link, menambahkan BORDER = "0" atribut akan membuat perbatasan tak terlihat bukan sebagai link berwarna normal akan.