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. Link to the file
  • 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, demonstrative material
  • 15. Links with a blank href, 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.

The format was designed for transmitting bitmap images over the Internet. GIF has a color palette consisting of 256 colors. The GIF algorithm chooses the 256 colors that are the most used in the original image, and it creates all of the other shades by mixing and matching the neighboring pixels so that the human eye perceives them as the desired color. This is why the GIF format is not suitable for storing full-color images and photographs and why it is suitable for very 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.

Recently, GIF images have started to be used less frequently, since they have been replaced by other, more optimal formats.

Thus, the GIF format is suitable if:

  • You need a very simple animation.

Actually, there is one other image format we need to mention, called WebP. It supports lossy and lossless compression, as well as animation and alpha transparency, and is a smaller file size than JPG or PNG. However, Safari doesn’t support it. It can, however, be used in conjunction with the <picture> tag to deliver an image that will work in Safari too, but that is an advanced topic that is out of scope for this chapter.

Comments

  • day-14.html
  • style.css
HTML
23
24
<p>Here we have the PNG format:</p>
<img src="files/portrait.png">
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CSS
1
2
body {
padding: 0 30px;
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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 out of 1
    1. Add the image with the address files/gifka.gif to the blog entry.

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

    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.