HTML Academy
The img tag for images
Links and images7/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
JPEG format
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Image formats, SVG format

Muffin is unhappy. He checked the site on his phone while catching mice (even a successful businesscat deserves some downtime). Away from Wi-Fi, the page took too long to load over the mobile network: the image file was too large. What went wrong? We chose an unsuitable format for the avatar. Let’s explore the available formats and switch to the provided image in a more suitable one.

There are many image formats. In this chapter, we’ll focus on four: JPEG, PNG, SVG and GIF. Let’s learn what each one is useful for.

In this step, we’ll explore SVG, short for “scalable vector graphics.” Vector graphics stay sharp when resized. Simple SVG graphics can also have small file sizes, making the format useful for graphs, logos and icons. Suitability depends on the image’s complexity, not simply on how many colors it contains.

SVG uses readable text markup, much like HTML. This means you can write the markup for an SVG image by hand.

The SVG format is suitable if:

  • We need to resize vector graphics without losing sharpness;
  • We want to change the color of the image elements;
  • We need to animate parts of the image.

We’ll explore the other formats in the next steps. For now, let’s switch our blog’s avatar to the provided SVG file.

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> <h1>The website of a beginning coder</h1> </header> <main> <!-- Replace the address for this image --> <img src="img/raccoon.jpg"> <nav> <h2>Recent Posts</h2> <ul> <li><a href="day-1.html">Day One. How I forgot to feed the cat</a></li> <li><a href="day-2.html">Day Two. I want to become a coder</a></li> <li><a href="day-3.html">Day Three. My cat is upset with me</a></li> <li><a href="day-4.html">Day Four. How I almost got sick</a></li> <li><a href="day-5.html">Day Five. I am relaxing</a></li> <li><a href="day-6.html">Day Six. How I failed to understand anything</a></li> <li><a href="day-7.html">Day Seven. Muffin gave me an assignment</a></li> <li><a href="day-8.html">Day Eight. It’s getting very serious</a></li> <li><a href="day-9.html">Day Nine. Or, more precisely, night</a></li> <li><a href="day-10.html">Day Ten. Summing up</a></li> <li><a href="day-11.html">Day Eleven. Everything should be taken in moderation</a></li> </ul> </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found <a href="https://htmlacademy.org/courses">interactive courses in HTML and CSS</a> and I have set myself the goal of becoming one. I was even assigned an instructor, Muffin, who won’t let me slack off and will track my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> Skills section </section> </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: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

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 an avatar in SVG format by changing the image address from img/raccoon.jpg to img/raccoon.svg.

    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.