사이트에 이미지를 넣는 방법은 두 가지: 1) img 태그를 사용 해서 2) 태그 css|background-image 속성을 추가해서. 이 두 방법의 차이점은 몇가지 있다.
There are several differences between using the img tag and using css|background-image to place images on a webpage. Today, I learned the pros and cons of each method and when to use each method when writing my own code:
Benefits of using img tag
- search engine optimization (SEO): using the "alt" and "title" attributes enables search engines to index images found on websites, allowing for better placement in search results.
- accessibility: users can read semantic tags and attributes (using inspect) to gain a better understanding of web elements. Semantic tags give meaning to html elements and help users determine the purpose of different sections/elements on a website. Using the img tag and its relevant attributes gives context/meaning to the image.
- semantic web: semantic tags make information/data on the Internet more machine-readable, which provides significant advantages. Machines (not only humans) can read and understand Internet data and can automate/analyze this data to provide advanced services, including automation, information retrieval, data personalization, and more.
When to use img tag
- for search engine optimization
- to improve background animation performance
- when image is relevant to content on the wepage (has meaning)
Benefits of using css|background-image
- controllability: background images can be used in concert with other css properties such as background-color, background-repeat, background-attachment, background-position, etc., allowing for greater overall control of the image.
When to use css|background-image
- when image is not part of web content (purely for design)
- when you're using the same background image across multiple webpages (easier to edit code since you only have to edit the css properties of id/class associated with the container tag rather than editing every single "src" attribute)
To sum up, use the img tag when you want to convey meaning (semantics, content), and use css|background-image when you're using an image purely for design/aesthetic purposes
#mambamentality 🐍