Where an image is placed in the code will affect how it is displayed.
For example, if you placed the image in the html before a paragraph, the paragraph will start on a new line after the image. This is because block elements always appear on a new line and, in this case, you would be starting a new block element <p>. On the other hand, if you place the picture inside the start of a paragraph, the first row of text aligns with the bottom of the image. Finally, if you place the image in the middle of the paragraph, the image will be placed between the words it appears in.
There are three rules to remember when creating images for your website.
The first thing to remember is to save your images in the right format. Websites mainly use jpg, giv, or png, and choosing the wrong format could make the page slower to load, so this is an important step. Next, it's important to save your images at the right size. In this case, you should save the images at the same size they will appear on the website (measured in pixels). With this in mind, the third rule is to measure images in pixels. This is because computer screens are made up of pixels, so you should save your images as the same unit of measurement.
Many designers use a grid structure to help them position items on a page, and the same is true for web designers.
Grids are important because they help set consistent proportions and spaces between items. This leads to professional looking design. Although a grid might seem like a restriction, it does a few things that are really helpful. It creates continuity between pages that may use different designs and it helps users predict where information can be found. It also makes adding new content easier and helps people collaborate on the design of the site in a consistent way.