This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I set retina graphics for my website?
What is the best method for adding 2x images to webpages that will be displayed on the new iPad with Retina graphics?
I've gone through these articles.
http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/
http://www.teamdf.com/web/automatically-serve-retina-artwork/191/
http://retinajs.com/
There are various suggested methods for tackling the problem of Retina displays (and large display screens etc.) unfortunately most of these are just that, suggestions.
The two most popular are the suggestion of adding a tag, which accepts multiple images and the browser will load only one (dependant on media queries specified by the developer):
<picture alt="angry pirate">
<source src=hires.png media="min-width:800px">
<source src=midres.png media="min-width:480px">
<source src=lores.png>
<!-- fallback for browsers without support -->
<img src=midres.png alt="angry pirate">
</picture>
The other suggestion is specifying multiple sources for an image using 'srcset' on an image:
<img alt="Cat Dancing" src="small-1.jpg"
srcset="small-2.jpg 2x, // this is pretty cool
large-2.jpg 100w, // meh
large-2.jpg 100w 2x // meh#2x
">
I personally think this is a lot more ugly (and it leaves you less control as the browser decides which image to load) but from my understanding the second solution has been added to the official spec (in some capacity)
Outside of these suggestions the only real current solution is to start with an image 2x the original size (or 1.5x depending on your preference)
It may be possible to try and get all fancy and do a JavaScript solution, but I think that would be over complicating things ...
Below is a really good articles which discusses the issue you describe (I feel I'm rambling a bit!):
http://www.alistapart.com/articles/mo-pixels-mo-problems/
Related
I am frequently tasked with displaying a grid of thumbnails for work, such as on a posts/articles page, with each thumbnail linking to a separate post/article, but I have never really been sure of the best way to format these for screen readers/accessibility. More specifically, I have never been sure whether to use the <article> or <figure> tag for this purpose, or neither, or something else entirely. Does anyone know? These are the three methods I am debating between:
<a>
<article>
<img />
<div></div>
</article>
</a>
<a>
<figure>
<img />
<figcaption></figcaption>
</figure>
</a>
<a>
<img />
<div></div>
</a>
The documentation for the article tag says that it "represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable". I don't know what that means in this context, but it seems like it could be intended for this purpose, or it could be meant to be used once on the actual article pages and not the overall "articles" list page.
The documentation for the figure tag says that it "represents self-contained content, potentially with an optional caption". It seems like it would work quite well here, except my intuition says that it might be intended more for figures that are inline with the text of articles, so I have my doubts.
The 3rd option is to use neither the article or the figure tag in an effort to just simplify the html as much as possible so that screen readers do not have to look at and interpret as many nested tags.
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
From an accessibility perspective, I have not found much benefit to using an <article>. On iOS and Mac, Safari incorrectly treats an <article> as a landmark even though the definition of an article role specifically says it isn't.
An article is not a navigational landmark, but may be nested to form a discussion where assistive technologies could pay attention to article nesting to assist the user in following the discussion.
Notice that it says AT could pay attention to the article element but other than the aforementioned treatment as a landmark in Safari, I have not found NVDA, JAWS, or Voiceover to do anything special with an <article>.
If you plan on having a caption below the image, then you could use <figcaption>. It's just a handy way to visually display text below an image. But if the thumbnail doesn't have text below it but rather has a heading or link to the article, then <figcaption> isn't needed.
Your last example, the simplest, is the most common way to code what you want and works just fine for accessibility. I know your code snippets were just minimal code but make sure your <img> uses the alt attribute.
If your image is inside your link (as in your example) and there's other text containing the title of the article within the link, then the image can have an empty alt="" (or even just alt with no value). But if there isn't any visible text in the link, then make sure the image has an appropriate alt attribute value.
I am stuck with an issue with Lighthouse Pagespeed that I've never experienced before and cannot replicate on any other website that I am managing.
The error message I am receiving is:
Serve images that are appropriately-sized to save cellular data and improve load time.
Screenshot from Pagespeed Insights
Here is the source code for one of the images in question (formatted for readability):
<img
width="300"
height="300"
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
src="https://example.com/assets/c1-300x300.jpg"
srcset="https://example.com/assets/c1-300x300.jpg 300w,
https://example.com/assets/c1-600x599.jpg 600w,
https://example.com/assets/c1-902x900.jpg 902w,
https://example.com/assets/c1-100x100.jpg 100w,
https://example.com/assets/c1.jpg 938w"
sizes="(max-width: 300px) 100vw, 300px"
alt=""
loading="lazy"
/>
I've found a long-closed GitHub issue addressing this behavior, where the devs responded that it is intended, and Lighthouse is using device pixel ratio of 3.0 on purpose. This explains why it picks the triple image size, but I still cannot figure out how I am supposed to “fix” this issue in the code.
I've tried further optimization for the images, but either it's irrelevant, or I haven't optimized enough.
Has anyone experienced the same, or has at least been able to replicate it on a different website?
It'd be great to find out both the cause (since the error message is not really telling anything) and the solution.
Ok, I've found out the cause. I was thinking that my smallest image size was close enough to the smallest necessary image size (at least according to Lighthouse), however, either it or its value multiplied by 3 wasn't.
So, the solution was to find out the screen width that Lighthouse Pagespeed uses for the mobile tests, which is 425 px, and then to provide a new image size specifically for this screen size along with the 2x and 3x versions.
I worked hard on making sure the correct image was loaded on devices. I actually found that gave me more control especially when coupled with preloading responsive images. For example,
<body>
<picture>
<source srcset="image-1200.jpg" media="(min-width: 992px)">
<source srcset="image-800.jpg" media="(min-width: 768px)">
<source srcset="image-500.jpg" media="(min-width: 0px)">
<img src="image-500.jpg" height="300" width="500" class="img-responsive" loading="eager" alt="Blah">
</picture>
</body>
For decorative icon fonts and other applicable components, is there a difference between using aria-hidden="true" and using role="img" alt=""
Yes there is a difference, but not a massive one.
aria-hidden="true" will completely remove it from the accessibility tree.
role="img" alt="" will still add it to the accessibility tree as a decorative image. (well an image with no alt description if we are being technical - it won't get read out and that is what we care about)
Now this doesn't cause issues for majority of screen reader users. But some screen reader users may use a screen reader with very high verbosity settings (how much detail gets read out).
In this case it can actually be possible that with role="img" that the image is read out as "image, no description".
It is an edge case, but one to consider.
As an additional thought - support for role="img" may not be so great (there isn't a lot of data on this)
I would encourage the use of aria-hidden="true" and perhaps add role="presentation" as support is good for that as a nice fall-back.
I've seen many websites, usually ones with large amounts of images or large resolutions, use this technique. My question is, how do use it properly?
From the articles I've read on here as on other forums and blogs here is my base code:
<div class="container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-width="1800" data-height="1200">
<img src="https://files.catbox.moe/jhk4lf.jpeg">
</div>
Is this how it is suppose to be set up?
In the last days we have seen how our newsletters doesn't print as they use to do in Yahoo Mail. Some <td> elements are taking more space that they were supposed to take. After some checking we have seen that width attributes in our inline styles are replaced by min-width.
I was try to see if there were any change in Yahoo Mail but I couldn't find anything. The only thing I have found an issue in github explaining how this behaviour is suppose to happen in Yahoo and in Gmail with the height. I've checked Gmail and it's not happening and everything was ok last week in Yahoo Mail.
Is anyone suffering the same issue? Does anyone know the explanation to that?
This is one of the newsletters suffering the problem, and this is how we see it now.
I answered this question earlier today, here's that answer:
Quick fix, place this in your <style> tag: #media yahoo {min-width:0!important}
This change/bug is brand new at the time of this posting. Yahoo is now changing width to min-width, breaking hybrid layouts among other things. There is a good discussion about other hacks in the Litmus Community.
Table elements for my purpose are parent elements to a button.
For (parent) table elements I placed "!important" next to "min-width" with no spaces.
The html is placed "inline". See the example below:
<table align="center" width="200px" bgcolor="#0076be" style="border-spacing:0;Margin:0 auto;width:95%;max-width:200px; min-width:0%!important;">
Button element has no inline style element of "width".
See example below:
<img src="[[asset_3]]" width="195px" style="border-width:0;max-width: 195px; height:auto;display:block;margin:0 auto;" border="0" alt="Click Show Images to Make Links Work">
Visit Yahoo Mail Update Potentially Breaks Hybrid Emails for more information.