Learn HTML / Fundamentals

Adding images

Enroll now!
Free
+ All lessons.
+ Ready-to-use code.
+ Step-by-step projects.
+ Quiz tests.
+ Future updates.
+ Upcoming free courses.

Ready-to-use code

HTML Images / Basic

See the Pen HTML Images / Basic by In a Rocket (@inarocket) on CodePen.

HTML Images / Figure

See the Pen HTML Images / Figure by In a Rocket (@inarocket) on CodePen.

HTML Images / Picture

See the Pen HTML Images / Picture by In a Rocket (@inarocket) on CodePen.

HTML Images / Placeholders

See the Pen HTML Images / Placeholders by In a Rocket (@inarocket) on CodePen.

What you have learned

  • When you should load your images via HTML or CSS.
  • How to insert an image in your HTML code.
  • What's the difference between bitmap and vector images.
  • Which are the best web formats for bitmap and vector images.
  • What's the difference between GIF, JPG, PNG, and SVG.
  • How to optimize an image for the web.
  • How to use an image placeholder.

References

Free images

Stock images

Edit images (bitmap)

Edit images (vector)

Newsletter

  • Free Stuff. Exclusive access to new courses, latest news and free resources.
  • No spam. Just real content that's meant to make a difference.