I've implemented the picture element with different image formats and a fallback image, but on Google PSI i'm still getting the warning to 'Serve images in next-gen formats'
This warning is not being reported by Lighthouse which makes it very strange and hard to debug.
I'm not sure if something is wrong with my code or there is some kind of issue with the Google PSI.
Here is the code:
<picture>
<source class="single-image" srcset="https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-324x576.webp 324w, https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-216x384.webp 216w, https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-216x384.webp 216w" sizes="(max-width: 480px) 324px, (min-width: 480px) 216px, (min-width: 768px) 216px" type="image/webp">
<source class="single-image" srcset="https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-324x576.jpeg 324w, https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-216x384.jpeg 216w, https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-216x384.jpeg 216w" sizes="(max-width: 480px) 324px, (min-width: 480px) 216px, (min-width: 768px) 216px" type="image/jpeg">
<img class="single-image" src="https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117.jpg" type="image/jpg" alt="Story image">
</picture>
Here is the URL of the live page where this is implemented: https://embedsocial.com/api/pro_story_widget/10781011828c1336253377e43847e6496c4f19ca
And the Google PSI results:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fembedsocial.com%2Fapi%2Fpro_story_widget%2F10781011828c1336253377e43847e6496c4f19ca
Any help would be appreciated.
Thanks a lot.
I'll share my notices:
Crome -> F12 -> Elements show code without <source> tags. Something causes a problem. Maybe just lexical mistakes.
Don't repeat the class attribute for each source
3. <source> with type="image/jpeg" optional.
For example, this code from my project works fine:
<picture>
<source srcset="/img/hero/hero-girl.webp" type="image/webp">
<img src="/img/hero/hero-girl.png" alt="" class="img-fluid">
</picture>
So, try to start as simple as that and than enhance srcset step by step with sizes until you reach the problem.
Related
I've got a French text on a website using "Nunito" from Google Fonts.
On Safari, I found out that my text had bolder letters for signs such as "ç" or "é". Looking again, I realized they also differ on other browser, not just as much.
I've tried including the font in different ways (link, font-face), nothing does the trick.
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Nunito:700&display=swap" rel="stylesheet">
<style>
body {
font-size:20px;
font-family: 'Nunito', Arial, sans-serif;
}
</style>
</head>
<body>
comment ça marche ?
</body>
</html>
In the example, the "ç" looks off.
At some point, I went and typed some text on Google Fonts directly, and it looked right.
That got me thinking... And trying at my example again.
Bing!
The text I had was copied/pasted from what the marketing sent me. That text didn't work, while "typed" text did.
The "ç" in the text I had was charcode 99 ("c") followed by 807 (the cedilla below it). Chrome and Firefox did attach both in an odd way, but it kind of worked, but Safari just ignored it and took the whole sign from Arial.
The "ç" I typed in Google Fonts for text was the code 231, which is a single character from Latin encoding.
I am working on a web application and I have one compatibility problem with Apple devices & Safari on PCs.
Html5 audio tag:
<audio controls>
<source src="/audio/en/file.mp3" type="audio/mpeg">
<source src="/audio/en/file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
I just want to play an audio file with basic controls.
The previous code works perfectly on Chrome, Opera, Firefox (Windows & Android devices).
But controlers do no appear with Safari (tested with the latest version on PC, iPad & iPad mini).
Audio player have a grey background with only "play/pause" function.
Here is a screenshot that describes my problem :
Thanks.
I had exactly the same problem.
My solution: I added the full URL for the audiofile source. Don't know why but it makes a difference. Here's my full code. The CSS modifications are only to hide the download button. But when I take it out I don't see the timeline. Very strange but exactly this code works for me.
<!DOCTYPE html>
<html>
<head>
<title>html5 audio player on iPhone</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
audio::-internal-media-controls-download-button {
display:none;
}
audio::-webkit-media-controls-enclosure {
overflow:hidden;
}
audio::-webkit-media-controls-panel {
width: calc(100% + 33px);
}
</style>
</head>
<body>
<audio controls preload="auto" style="width:100%;">
<source src="https://example.com/audio/audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><br />
</body>
</html>
It seems the actual "fix" was really simple for me - all I needed is to make sure <audio> tag has enough width to show all the controls.
See screenshot below
Upper version
<audio controls preload="auto" style="width:100%;" >
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>
Bottom Version
<audio controls preload="auto">
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>
It may sound odd, but check that your HTML page has a as the first line.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page Title</title>
... and the rest of your page's code follows...
Safari is known to not render HTML-5 content without the proper DOCTYPE.
More Info:
http://www.wimpyplayer.com/docs/common/doctype.html
Searched for too long for this simple answer after it was working on Andriod, and I finally tested on iOS, this works if you're using ionic
import {normalizeURL} from 'ionic-angular';
MediaSource = document.createElement("audio");
MediaSource.src = normalizeURL(cordova.file.dataDirectory + file.fullPath);
Hope this helps.
same here with amp-audio
this css (sass actually) fix the problem
amp-audio {
[class*="amphtml-fill-content"] {
width: 100%;
}
}
I have a simple view that I'm using to test out video.js; it looks like this:
<script type="text/javascript" src="~/Scripts/video.js"></script>
<link href="~/Content/video-js.css" rel="stylesheet" type="text/css">
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<body>
<video id="testPlayer" class="video-js" controls preload="auto"
poster="~/Content/images/video-js.png"
data-setup="{}">
<source src="<url of a .mp4 file stored in my project>" type="video/mp4" />
</video>
</body>
After the page loads, I see the poster on the video player (along with some metadata information below the player that I haven't figured out how to get rid of yet). With preload="auto" I see ["Video Error", Object] immediately on page load in the console (using Chrome). If I change auto to none, I get the same non-descript error when I click the player. I cannot figure out what the problem with this error.
There doesn't seem to be any information tucked in the object that shows in the console. The best I could find, as far as description, was something that said media error. I've tried messing around with the encoding of the file a few different ways, but I consistently get the same error.
Does anyone see anything wrong with the view that I am missing (or know what in the world this error could mean)?
When specifying my source URL I was specifying it like this:
src="~/Content/something/place/etc.mp4"
Upon changing that URL to
src='#Url.Content("~Content/you/get/the/point.mp4")'
The video loads fine. I stumbled on some post that mentioned the video tag needing an absolute path, and took a stab trying this.
I am trying to find out why #media print is not working on Chrome. It's fine with IE and FF.
I am working on print page for a coupon, but Chrome is printing a blank page.
Are you using a separeted css?
Try embedding the css inside the page to see if the problem persist.
The example bellow seems to work in the same page:
<style type="text/css">
#media print{
.button {display : none}
}
</style>
I have a web application that produce its reports in HTML format. Sometimes these reports become very much and the window shows scrollbars.
The problem I have is that I can just print what I see in the web page, and whenever I want to print them, I have not more than 1 page to print. So I lose other repots that I expect to be in other papers.
What do I have to do ?
The nature of the problem
Your problem is associated with styling.
It is hard to tell what exactly your problem is - we did not have a chance to see your stylesheets. For sure you should rewrite them to not crop the pages.
Apply different stylesheets to screen and print
One idea is to change current stylesheet to be applied only to screen media and apply different one specifically to printed media.
You can do it like that in HTML:
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
or like that in CSS (example from W3C):
#import url("fancyfonts.css") screen;
#media print {
/* style sheet for print goes here */
}
Print-specific styling
For details on print-specific styles see the following page: http://www.w3.org/TR/CSS2/page.html
In your case the following styling may become useful:
table { page-break-inside: auto; }
tr { page-break-inside: avoid; page-break-after: auto; }
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
It will allow for page breaks inside the table, will try to avoid page breaks inside rows, and will repeat both headers and footers of the table on each page. However, check whether it works in your target browsers, to be sure.
If you are using ASP.NET, use Crystal Reports.
If you are using Java EE, use JasperReports.
If you are using PHP, use FPDF (there may be something else too).
These tools are better for bulding reports rather than pure HTML.