Tips for refraining from transmitting visuals to cell phones in a more meaningful way

Typically when working on responsive or mobile-first design, media queries are utilized to deliver different CSS styles based on screen size.

An optimal design strategy may involve not including any images in the default (small) resolution layout.

While using background-image in CSS makes it simple to achieve this, it seems challenging to implement for semantic <img> tags.

Is it possible to accomplish this with HTML alone?
Is it considered good practice to use CSS exclusively for handling images?

Personally, I prefer a design with no images by default for small screens, but I find it unappealing to have no images for desktop-only versions that lack CSS.

Please note: Solutions involving JavaScript are not viable options.

Reference Image

Answer №1

A common misconception is that using CSS for all images is acceptable. However, images are valuable data and should be marked up as an <img> element for semantic clarity. Consider the analogy of considering all images optional, which would render the <img> element obsolete, indicating that it's not justifiable to use CSS for all images.

CSS is best utilized for enhancing elements visually through properties like background-image, without compromising their functionality. An element should remain usable even without a background image, demonstrating that if it can't be visible without one, it may not be a valid element at all.

Display and positioning properties in CSS serve the purpose of arranging elements on the screen and adjusting their visibility based on different displays.

To correctly handle this situation, utilizing display: none; is recommended, assuming that most browsers won't download the image unnecessarily. In cases where browser support is inadequate, alternative strategies such as using a hack like background-image or dynamically loading the image with Javascript can be considered as fallback options.

Answer №2

A creative solution using only CSS, with potential browser support limitations. By avoiding the img tag, the content remains semantic even without the image.

Find more details at: http://www.w3.org/TR/CSS2/generate.html

Check out an example here: http://jsfiddle.net/davetayls/SuhDj/1/

Personally, I suggest providing descriptive links for images and utilizing JavaScript to load them when necessary (like this: https://github.com/davetayls/jquery.lazyLoader). This ensures accessibility for users on various devices or connections, allowing everyone to access the images naturally rather than being hindered by embedded URLs in a CSS file.

Answer №3

When considering the option of utilizing descriptive links and implementing JavaScript to load images for screens that meet your specific criteria:

Lazyloader.js is specifically designed for this purpose. According to the readme, "If you want to dynamically load images dependent on the screen dimensions ..." and it provides guidance on scripting for this functionality.
Nettutsplus has compiled a comprehensive overview of lazyloader and various other useful scripts tailored for similar purposes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submitting a HTML form with a select element that will pass comma-separated values in the URL query

My HTML form includes a dropdown menu. <form method="get"> <select name="category[]" multiple class="form-control"> <option value="1">First Value</option> <option value= ...

html jquery forms http-redirect drop-down-menu

What is the best method for sending data from an HTML page to a Django view in order to utilize it

I'm encountering an issue with Django urls. I need to pass the value entered in the Name input field after clicking the submit button. Let's assume I have the following HTML form- <form method='POST' action="{% url 'submittedf ...

html django view

jQuery is not active on responsive designs

I have implemented a script in my JavaScript code that changes the color of the navigation bar when scrolling. The navigation bar transitions to a white color as you scroll down. However, I am facing an issue with responsiveness and would like to deactivat ...

javascript jquery css responsive

Is there a way to modify the way a screen-reading tool pronounces a specific word in a sentence without causing interruptions in the middle of the sentence?

Imagine I have the following sentence written in HTML: <p>Please input your licence number</p> An issue arises when a screen-reader pronounces the word 'licence' as "liss-ens" instead of "lice-ens." To resolve this, I aim to provide ...

html css accessibility voiceover screen-readers

Having trouble printing a section of a webpage after making CSS adjustments

When trying to print part of a page, I used the following method. It successfully prints that portion of the page, however, it does not preserve the CSS effects. <body> <h1><b><center>This is a test page for printing</center&g ...

javascript html css printing

What is the most effective way to implement a single modal throughout my web application without having to duplicate HTML code on each page?

After realizing I was repetitively adding the same div to every page for a modal dialog, I decided to place a single div in the site.master page and call it when needed. This method worked fine until I began implementing ajax with partial page updates. H ...

javascript html css ajax asp.net-mvc

JS Issue with Generating Content

Introduction( kind of :) ) Starting with the process of generating 5 coffee beans for each cup of coffee. The coffee class includes a strength attribute, and my goal is to visually distinguish the coffee beans which have a strength greater than the select ...

javascript html css list class

Ways to customize the background color of selected items in ion-list on Ionic

I am working on an Ionic project and I have a list of items. I am trying to change the background color of the pressed item. Can someone help me with this? index.html <ion-list> <ion-item ng-repeat="item in familleItems"> <div ng- ...

html css cordova ionic-framework

Use Angular and JavaScript to fetch HTML from a mySQL database and dynamically render it on a webpage

I'm currently utilizing Angular for the front end and Node for the back end. The data is retrieved from a MySql database where it's manually stored in text format with HTML tags. For example: <ul> <li>item1</li> <li> ...

javascript mysql angularjs json html

Expanding Material Ui menu to occupy the entire width of the page

I'm encountering an issue with a menu I created where I can't seem to adjust its height and width properly. It seems to be taking up the full width of the page. import React, { Component } from "react"; import Menu from "@material-ui/core/Menu"; ...

javascript css reactjs material-design material-ui

Display HTML tags on an HTML page using TypeScript

In my angular application, I encountered an issue where I needed to call one component inside another component. Initially, I was able to achieve this by simply using the second component's selector in the HTML of the first component: html: <div&g ...

javascript html angular typescript

Experiencing difficulty transmitting information from the view to the controller within CodeIgniter

I am currently creating a website using the CodeIgniter framework. One of the features on my site is a view that displays unverified members in a table. Each member has a button next to their name that can be clicked to verify their account. Below is the ...

php html codeigniter web

How can I display a button (hyperlink) on a new line using CSS or jQuery?

I am looking to create a new line after the last input of my form. On this new line, I want to add a "remove-link". This is my HTML: <div class="subform dynamic-form"> <label for="id_delivery_set-0-price"> Price: </label> <inp ...

jquery css

Tips on resizing images in CSS with accompanying text to prevent overlap

In my school project, I am using cloud9. When utilizing the live preview in a small window pane, my images appear correctly sized. However, upon maximizing my screen browser, the images stack on top of each other and their dimensions increase. My ideal l ...

html css image

Adjust the font size of MaterialUI icons using CSS

I am currently facing an issue where I need to increase the size of my icons by 200px, but they are defaulting to 24px which is the standard for all Google Icons. Any suggestions on how to solve this? HTML <div class="col span-1-of-4 box"> <i ...

html css icons material-ui

Convert the string to a time format of hours and minutes (hh:mm)

I am currently working with an input field that requires a time value to be entered. The format for the Time field is in hh:mm on the 24-hour clock format, such as 7:30, 11:45, 16:10, 19:11, or 22:43. <input id="szReminderTime" type="text" value="" max ...

javascript html validation

use jquery to increase margin on card upon collapse displaying

I'm currently using an accordion from a bootstrap 4 website. <div class="accordion" id="accordionExample"> <div class="card m-0"> <div class="card-header bg-white" id="headingOne"> <h5 class="mb-0"> <but ...

jquery css bootstrap-4 accordion

Steps for preventing a button from being enabled until all mandatory fields are completed

Is it possible to have a button disabled until all required fields are filled out, with the button appearing grey in a disabled state and changing color when all fields are completed? I am facing an issue where clicking on the previous button is causing ...

javascript html

incorporating numerous interconnected javascript files within a single html document

I have a pair of JavaScript files (file1, file2). File1 utilizes a class that is defined in file2. Can I include these files in an HTML document like this: <script type="text/javascript" src="file1.js"></script> <script type="text/javascrip ...

javascript html dependency-management

Pattern to locate a CSS class identifier

I've been working on creating a regex to match valid CSS class name structures. Currently, my progress looks like this: $pattern = "([A-Za-z]*\.[A-Za-z]+\s*{)"; $regex = preg_match_all($pattern, $html, $matches); However, there are certai ...

php css regex

CSSer Q&A