登录查看更多内容

What are the most effective ways to use images in HTML?

由人工智能和领英社区提供技术支持

Images are an essential part of web design, as they can convey information, create visual appeal, and enhance user experience. However, using images in HTML requires careful consideration of several factors, such as format, size, quality, accessibility, and responsiveness. In this article, you will learn some of the most effective ways to use images in HTML, and how to avoid common pitfalls and errors.

此文章中的业界达人

由社区从 11 条内容中精选。了解更多

Nat? da Silva Targina

UI Designer e Desenvolvedor Front-End | Especialista em Web Design Responsivo e Otimiza??o de Desempenho | Ganhos de…
Khushboo Raina

Web Designer

1 Choose the right format

One of the first decisions you need to make when using images in HTML is what format to use. There are different types of image formats, each with its own advantages and disadvantages. The most common ones are JPEG, PNG, GIF, and SVG. JPEG is best for photos and realistic images, as it can compress them without losing too much quality. PNG is best for images with transparency, such as logos and icons, as it preserves the alpha channel. GIF is best for animations and simple graphics, as it supports multiple frames and a limited color palette. SVG is best for vector graphics, such as charts and diagrams, as it can scale without losing resolution. You should choose the format that suits your image content and purpose, and avoid using unnecessary or incompatible formats.

添加您的观点

Nat? da Silva Targina

UI Designer e Desenvolvedor Front-End | Especialista em Web Design Responsivo e Otimiza??o de Desempenho | Ganhos de performance até 262% em projetos web corporativos e de e-commerce
(已编辑)
举报内容
The most effective way is using WebP (.webp) images, mainly to solve performance issues. If you have already JPEGs or PNGs, convert them to WebP. SVG is actually the best way for those little interface details, like icons, and contextual illustrations. This way, your HTML loads at least/relatively 70% faster.

已翻译

赞
Khushboo Raina

Web Designer
举报内容
The best way to use images in HTML is by using WebP (.webp) images, which are great for making web pages load faster. If you have JPEGs or PNGs, converting them to WebP can really speed up how quickly your images show up on your website.

已翻译

赞
Asad Ullah Khan

Expert WordPress Developer | Figma to WordPress | Custom Themes & Responsive Sites | Proficient in HTML5, CSS3, JavaScript, Bootstrap, PHP | Empowering Businesses with Innovative Web Solutions
举报内容
First of all you need to select the right image format, after that you need to make sure that your images are optimized for web for that people usually use online tools or Photoshop. Moreover making sure you're using semantic and valid markup is crucial, adding ALT tags makes your images and web pages more accessible.

已翻译

赞
Muhammad Talha Toqeer

Helping Businesses boost their online presence with intuitive, conversion-driven web designs | UX/UI Designer, Web Designer & Developer | Let's connect to build more presence online!
举报内容
In HTML, images play a vital role in enhancing web design. Employ the <img> element for basic image display, ensuring to optimize images for web to boost loading times. Utilize responsive images with srcset for device-specific resolutions, and consider image maps for clickable regions within an image. Employ CSS to set background images, implement lazy loading to improve page load performance, and create interactive image galleries or carousels with HTML and CSS (or JavaScript libraries). Incorporate SVGs for vector-based graphics, ensuring to include descriptive alt text for accessibility.

已翻译

赞
Jonathan JODAR

Webdesigner, Photographe
举报内容
En tant que développeur front-end, je m'attache à booster la vitesse de nos sites. Pour cela, je privilégie le format WebP pour les images, ce qui allège considérablement le temps de chargement. Pour les ic?nes et petites illustrations, le SVG est mon choix pour garder les pages légères. J'optimise systématiquement les images, en utilisant les bons outils, et je m'assure que le code est propre et accessible, notamment grace à l'usage judicieux des balises ALT.

已翻译

赞

加载更多内容

2 Optimize the size and quality

Another important aspect of using images in HTML is optimizing their size and quality. Images that are too large or too low-quality can affect your web page's performance, loading speed, and user satisfaction. You should always try to reduce the file size of your images as much as possible, without compromising their quality. You can do this by using tools such as image compressors, resizers, and editors, or by using HTML attributes such as width, height, and srcset. You should also consider the display size and resolution of your images, and make sure they fit your web page's layout and design. You should avoid stretching, cropping, or distorting your images, and use CSS properties such as object-fit and object-position to control their appearance.

添加您的观点

Nat? da Silva Targina

UI Designer e Desenvolvedor Front-End | Especialista em Web Design Responsivo e Otimiza??o de Desempenho | Ganhos de performance até 262% em projetos web corporativos e de e-commerce
举报内容
Besides converting images to the WebP file format, you can also use the CSS rule called "aspect-ratio" (it depends on other different rules too), in addition to the fluidity rules (like those of "max-width: 100%" and "height: auto") for maintaining the original proportion of the image's design for all its different behaviours on different screen sizes. It's of most importance, though I often see many projects around the web not applying such. haha!

已翻译

赞
Jonathan JODAR

Webdesigner, Photographe
举报内容
Je respecte toujours le ratio des images pour maintenir la qualité sans alourdir le site. Parfois, j'utilise `object-fit` pour ajuster les images dans des cadres spécifiques, garantissant ainsi une intégration parfaite sans compromettre la performance.

已翻译

赞

3 Add alternative text and captions

A third essential element of using images in HTML is adding alternative text and captions. Alternative text, also known as alt text, is a text description of your image that is displayed when the image cannot be loaded or seen by the user. Alt text helps users with visual impairments, screen readers, or slow connections to understand your image content and context. Captions, on the other hand, are text explanations of your image that are displayed below or beside the image. Captions help users with different backgrounds, languages, or knowledge levels to interpret your image meaning and relevance. You should always add alt text and captions to your images, using the HTML attributes alt and figcaption, or the <figure> and <figcaption> elements. You should make sure your alt text and captions are clear, concise, and accurate, and avoid repeating or contradicting your image or web page information.

添加您的观点

Jonathan JODAR

Webdesigner, Photographe
举报内容
Je m'assure toujours d'inclure des textes alternatifs pour les images, en utilisant l'attribut `alt`, afin d'améliorer l'accessibilité pour les utilisateurs ayant des besoins spécifiques, comme ceux qui utilisent des lecteurs d'écran ou ont des connexions Internet lentes. J'utilise également la balise `<figure>` pour structurer les images de manière sémantique. Cependant, je n'emploie pas `<figcaption>` pour les légendes. Bien que je reconnaisse son utilité pour fournir des explications contextuelles, cela ne s'aligne pas toujours avec mes stratégies de conception ou les besoins de mes projets.

已翻译

赞

4 Use semantic and valid markup

A fourth important factor of using images in HTML is using semantic and valid markup. Semantic markup means using the appropriate HTML elements and attributes to represent your image content and structure. Semantic markup helps search engines, browsers, and users to understand your web page's meaning and purpose, and to access, index, and rank it accordingly. Valid markup means following the HTML rules and standards, and avoiding errors, typos, or deprecated elements and attributes. Valid markup helps your web page to be displayed correctly and consistently across different devices, platforms, and browsers, and to avoid bugs, glitches, or security issues. You should always use semantic and valid markup for your images, using the <img> element, the src attribute, and the optional alt, width, height, and srcset attributes. You should also use the <figure> and <figcaption> elements for images with captions, and the <picture> and <source> elements for images with multiple sources or formats.

添加您的观点

5 Make your images responsive and accessible

A fifth and final aspect of using images in HTML is making them responsive and accessible. Responsive images are images that adapt to different screen sizes, resolutions, and orientations, and provide the best possible user experience. Accessible images are images that are easy to access, view, and interact with by all users, regardless of their abilities, preferences, or devices. You should always make your images responsive and accessible, using techniques such as media queries, breakpoints, srcset, sizes, and picture elements. You should also use CSS properties such as max-width, min-width, and flex to control your image dimensions and alignment. You should also use HTML attributes such as role, aria-label, and aria-describedby to provide additional information and context for your images, and to improve their usability and navigation.

添加您的观点

Nat? da Silva Targina

UI Designer e Desenvolvedor Front-End | Especialista em Web Design Responsivo e Otimiza??o de Desempenho | Ganhos de performance até 262% em projetos web corporativos e de e-commerce
举报内容
For this approach, it's recommended to use the "<picture>" element. It's configurable. So you must define it properly with it's complementary tags. The overall structure becomes something like: "<picture><source ... /><source ... /><img class='[put here some image-fluid css class]' alt='' width='800' height='800' /></picture>". Knowing that the "<source ... />" element serves to put some media-quary attributes, alternating the file you put on the "<img ... />" element to another version already composed you may have for the same design. Yes... needless to do it by CSS, like that of "display: none" and stuff for a giving media-query. You can find some tutorials dealing deeper with this approach around the web.

已翻译

赞

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Nat? da Silva Targina

UI Designer e Desenvolvedor Front-End | Especialista em Web Design Responsivo e Otimiza??o de Desempenho | Ganhos de performance até 262% em projetos web corporativos e de e-commerce
(已编辑)
举报内容
Another else that's must consider is using testing apps and/or online platforms for testing HTML pages' overall perfomance and SEO. One I use the most, and may have been used by everybody on projects worldwide I guess, is the "Google PageSpeed Insights". You just put the url there, and it evaluates everything in it, showing precise results besides considerations based on the users point-of-view. It suggests practical improvements you can work on right away. It's just strongly recommended.

已翻译

赞

Internet Services

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

What are the most effective ways to use images in HTML?

1

2

3

4

5

6

1 Choose the right format

2 Optimize the size and quality

3 Add alternative text and captions

4 Use semantic and valid markup

5 Make your images responsive and accessible

6 Here’s what else to consider

Internet Services

给文章评分

感谢您的反馈

更多Internet Services相关文章

更多相关阅读内容

What are the most effective ways to use images in HTML?

1

2

3

4

5

6

1 Choose the right format

2 Optimize the size and quality

3 Add alternative text and captions

4 Use semantic and valid markup

5 Make your images responsive and accessible

6 Here’s what else to consider

Internet Services

给文章评分

感谢您的反馈

查看其他技能