HTML Academy
PNG format
Links and images10/17
Back to the list of tasks
  • 1. What is a link? The a tag
  • 2. Relative addresses
  • 3. Absolute addresses
  • 4. Links to files
  • 5. An in-page link
  • 6. The img tag for images
  • 7. Image formats, SVG format
  • 8. JPEG format
  • 9. PNG format
  • 10. GIF format
  • 11. Image dimensions
  • 12. alt attribute
  • 13. Image link
  • 14. The figure and figcaption tags for illustrations and captions
  • 15. Links without href and the title attribute
  • 16. Summary of “Links and Images”
  • 17. Test: Cat tours travel agency gallery
Image dimensions
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

GIF format

The last image format that we’ll cover in this chapter is GIF.

GIF was designed for transmitting bitmap images. Each image uses a palette of up to 256 colors. When converting a full-color image to GIF, an encoder chooses a limited palette. It may use patterns of neighboring pixels to give the impression of additional shades; this is called dithering. The limited palette makes GIF less suitable for photographs with many colors and subtle gradients. GIF also supports multiple frames, making it useful for simple animations.

The format supports transparency: each pixel in the image can be in one of two states: transparent or opaque. Translucency is not supported.

GIF remains useful for simple animations, though other formats can offer better compression and color support.

Thus, the GIF format is suitable if:

  • You need a very simple animation.

One more format is worth mentioning: WebP. It supports lossy and lossless compression, animation and alpha transparency. WebP often produces smaller files than JPEG or PNG, depending on the image and settings. Modern browsers, including Safari, support it. The <picture> tag can provide alternative image formats when needed, but that is an advanced topic outside the scope of this chapter.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> <a href="index.html">Return to home</a> </nav> </header> <main> <article> <h1>Day Fourteen. A New Format</h1> <p>Yesterday, I found the right format for my avatar and added the image to my blog. I love how it looks! I decided to make a cheat sheet to remember the other image formats and what each one is used for.</p> <p>Here is my first GIF:</p> <!-- Add the image here --> <p>Here is a PNG image:</p> <img src="files/portrait.png"> <p>For example, here is a JPEG image:</p> <img src="files/instructor-muffin.jpg"> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>
CSS
body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } aside { margin: 20px 0; color: #c4c4c4; } a[href] { color: #0099ef; text-decoration-line: underline; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Add the image with the address files/gifka.gif to the blog entry.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2026

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.