HTML Academy
Image formats, SVG format
Links and images8/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
PNG format
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

JPEG format

Let’s continue to explore image formats. We need to insert some more images into the blog. Some image formats are more appropriate for some types of images. Our first image is a photo, and the JPEG format is perfectly suited for it.

This format was designed to compress and store full-color photos. It supports over 16 million colors. But JPEG compresses images by reducing the information in the image, which results in a loss of quality. Therefore, if we want to reduce the file size of the image, we will have to degrade its appearance. The main task when working with JPEG images is to select an appropriate level of compression so that both the image size and quality are acceptable.

Thus, the JPEG format is better suited for:

  • full-color images and photos;
  • images with a smooth transition of brightness and contrast;
  • drawings with lots of colorful details.

Let’s add a JPEG image to the new blog entry.

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 discovered what image format is suitable for my avatar, and I added it to my blog. I really loved it. It’s so pretty. I decided to make a cheat sheet so that I would not forget what the other image formats are and what they are used for.</p> <p>For example, we have such a format as JPEG:</p> <!-- Add the image here --> </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/instructor-muffin.jpg to the end of 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.