Adding images to websites is one of the fundamentals of HTML content creation. It allows you not only to enhance the visual appeal of a page but also to provide additional information to users and search engine crawlers.
Inserting HTML photos step by step
To insert an image in HTML, simply use the tag .
The basic syntax looks like this:
<img src="sciezka/do/obrazka.jpg" alt="Opis obrazka">
Marker is empty, meaning there is no separate closure – all information about the image is passed through attributes. The most important of these are src and alt.
(The rest of the article can be found below the form)
HTML src attribute
The src attribute (short for source) specifies the source of the image. It can be:
- the so-called relative path, e.g. images/logo.png, if the file is located in the project directory;
- the so-called absolute path, e.g. /assets/logo.png, if you refer to a specific location in the website structure;
- full URL, e.g. https://example.com/logo.png when using an external source.
When it comes to linking images from external sources, you can do so by specifying the full URL – as in the last point.
Remember, however, that using someone else's resources without permission is unethical and may violate copyright laws, and on a larger scale, consume the bandwidth of the server hosting the file. A better solution is to host the files on your own server.
If the file is not found, the browser will display a blank area or the alternative text specified in the alt attribute.
Inserting HTML images and the alt attribute
The alt attribute should not be underestimated – it affects the friendliness of the website for people with disabilities and is very important in terms of SEO.
The alt text is read by screen readers and, if an image has trouble loading, it informs the user what the image was supposed to contain. It's also an important clue for Google's crawlers when indexing images.
<img src="produkty/buty-biegowe.jpg" alt="Buty do biegania Nike Air Zoom Pegasus 39">
It is worth creating descriptions that are clear and consistent with the image content, but without overloading them with keywords.
How to resize an image in HTML?
The size of the graphic can be adjusted using the width and height attributes or – better – CSS styles.
For example :
<img src="logo.png" alt="Logo firmy" style="width:200px; height:auto;">
HTML attributes will work fine, although using CSS gives you more control and makes it easier to adapt images to mobile devices. Therefore, we recommend the CSS option in most cases.
How to add a description to a photo in HTML (figcaption)?
To add a caption under a photo, it's a good idea to use the semantic <figure> and <figcaption> tags. This format is readable by search engines and aids SEO :
<figure>
<img src="jezioro.jpg" alt="Jezioro w górach o zachodzie słońca">
<figcaption>Jezioro Smreczyńskie – widok o zachodzie słońca.</figcaption>
</figure>
This turns the graphic into a standalone piece of content, with a description that can appear in image search results.
Figcaption doesn't "replace" alt and isn't required for an image to appear in image search results. Alt and figcaption simply play different roles – the former is one of the main signals search engines consider when indexing images.
The latter is a normally visible caption under the image, a content element for everyone, adds editorial context (title, comment, source, date, etc.) and is an optional semantic addition.
Image on HTML website – SEO optimization
In addition to the appropriate attributes, it's worth remembering technical image optimization: compress files (e.g., WebP or AVIF format) before inserting them into your website. If you're using JPG or PNG, use stronger compression in your graphics program:
- use descriptive file names instead of IMG_1234.jpg, e.g. nike-running-shoes.jpg;
- add image dimensions so the browser renders the page layout faster;
- use the loading=”lazy” attribute to delay loading images, which improves page loading time – if you use WordPress, for example, there are plugins for this.
A well-prepared image is not only a matter of appearance, but also of user experience, positioning and website speed.
Frequently asked questions about inserting images in HTML
A simple tag is used to place graphics on a website. ![]()
(from English: image). Unlike many other HTML elements, this is an empty tag—that is, it doesn't have a closing tag (we don't use ). For the image to actually appear on the page, you need to add the appropriate attributes.
To properly display and describe graphics, you need two basic attributes:
- src (source): this is an absolutely required attribute that specifies the path to the image file (its URL or location on your server), e.g. < img src=”my-photo.jpg” >.
- alt (alternative text): this is alternative text that precisely describes what is in the graphic, e.g. <img src=”moje-zdjecie.jpg” alt=”Man working on a laptop in a cafe”>.
Alt text serves three key functions on a modern website:
- SEO: Google's bots don't "see" images like humans do, so they analyze the alt text to understand what the image represents. This is the foundation of SEO in Google Images.
- Accessibility: It is read by special screen readers, helping people with visual impairments understand the page content.
- Usability (UX): Displays on the screen as plain text if, for technical reasons (e.g. poor internet connection), the image cannot be loaded.
The image size can be defined directly in the HTML code by adding the width and height attributes. By default, the values are given in pixels.
Providing these dimensions helps the browser reserve adequate space on the page before loading the image (which prevents annoying page layout jumps – so-called Cumulative Layout Shift ). However, it's worth remembering that full responsiveness and adaptation to smartphone screens are best controlled using CSS styles.
The format you choose determines the file's weight, which has a huge impact on the loading speed of your entire website. Current standards include:
- WebP / AVIF: Modern (so-called Next-Gen) formats that offer excellent image quality with very high compression. Google strongly recommends their use.
- JPEG (JPG): a classic and universal format, great for standard photos and multi-color graphics.
- PNG: A format that supports transparency – ideal for graphics without a background.
- SVG: A lossless vector format that's perfect for logos and icons (it stays sharp no matter how much you enlarge it).
Summary
The above article covers the following topics:
- Images in HTML are inserted using a single tag with src and alt attributes, which improves the aesthetics and readability of the page for users and search engines.
- The src attribute specifies the source of the image via a relative path, absolute path, or full URL, with best practice being to host files on your own server to avoid legal and technical issues.
- The alt attribute provides an alternative description of an image, which is crucial for page accessibility, correct SEO indexing, and informing the user about the image's content in the event of an error loading it.
- While image size can be specified using the width and height attributes in HTML, it is recommended to use CSS styles, which provide greater control over responsiveness and the appearance of the image on different devices.
- Using semantic tags and allows you to add a user-visible caption under a photo, which enriches the content context and improves the SEO structure of the page without replacing the technical role of the alt attribute.
- Technical image optimization through the use of modern formats (WebP, AVIF), descriptive file names and the loading=”lazy” attribute significantly improves page loading speed, search engine positioning and the overall user experience.
