Comments (1)
Let's compare both approaches:
Using img Tag
Advantages:
- Accessibility: The img tag provides better accessibility features out-of-the-box, including the alt attribute for alternative text, which screen readers use to describe the image to visually impaired users.
- SEO: Search engines can index images with proper alt text, improving SEO.
- Responsive Design: img tags are easier to work with when it comes to responsive design. They can be styled with CSS for different screen sizes.
- Loading: Browsers optimize the loading of img tags, including lazy loading in modern browsers.
Disadvantages:
- Styling: Some complex styling (e.g., overlay text or complex positioning) might be trickier with img tags compared to using background images.
Using background-image on a Block Element
Advantages:
- Complex Layouts: Easier to overlay text or other elements on top of the image since itβs just a background.
Consistent Sizing: Can be easier to maintain consistent sizing and positioning of the background image across different elements. - Fallbacks: You can define multiple fallback images for different screen sizes using media queries.
Disadvantages:
- Accessibility: Requires more effort to make it accessible (e.g., adding aria-label or visually hidden text).
- SEO: Background images are not indexed by search engines, so you miss out on SEO benefits.
For me in most cases using the img
tag is preferable due to its accessibility, SEO benefits, and responsive handling.
from vuestic-ui.
Related Issues (20)
- [Proposal] Validate when programmer changes form element value, but not make it dirty or touched.
- Clicks and passing arguments are sometimes non operational on component root level HOT 1
- text lines hidden in textarea when innerlabel applied
- Modal Form for Vuestic UI Landing page HOT 1
- Fonts docs HOT 2
- VaModal load component via VaModal Instance HOT 1
- How to set the language of the Date Picker to Chinese? HOT 2
- VaDataTable selecting text in row bug with FireFox
- Centred table headers pushed left when column sortable == true HOT 3
- Update Stylelint to v14+
- Sticky scrollbar in DataTable
- readonly not working on VaCounter
- file upload HOT 5
- textarea links to input in algolia search
- VaButton: disabled button removes any pointer events
- Circle in VaSlider goes beyond boundaries
- Please provide a DataTable example with nested arrays
- When adding required-mark to an input it causes the input to shift causing misalignment with other inputs. HOT 2
- Fix screenshot tests for VaDatePicker
- Add multiple filters support HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuestic-ui.