WebP image takes 5 seconds to load - webp
I replaced all my images with webp images recently, but they take > 5 seconds to load! I am wondering what could be the problem... It's not a small image (4608 * 3072), but more than 5 seconds is way too much... or is this normal?
My HTML looks like this:
<div class="row align-items-center justify-content-center no-gutters h-100" style="background-image: url("/images/banner-large.webp");">
</div>
The Google dev tools Network tab gives 206 status for the webp at first, and 200 after reloading. I am wondering what could be the issue?
Related
Rails, Webpack & FontAwesome, how to stop conversion to SVG?
I've added FontAwesome pro with Yarn to my Rails 6 application and added it to application.js like this: import "#fortawesome/fontawesome-pro/js/all"; import "#fortawesome/fontawesome-pro/css/all.css"; Before (when using FontAwesome through the asset pipeline) the generated HTML came out like this: <i class="fal fa-heart-rate"></i> Now it comes out like this: <svg class="svg-inline--fa fa-heart-rate fa-w-20" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="heart-rate" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M480 224c-6.53 0-12.44 3.98-14.84 10.06l-45.62 114.05-84-335.98C333.72 4.86 327.69.17 319.62 0c-7.5.19-13.84 5.53-15.31 12.86l-82.06 410.23-46.72-186.97A16.005 16.005 0 0 0 160 224H8c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h139.5l60.97 243.88c1.78 7.14 8.22 12.12 15.53 12.12h.38c7.5-.19 13.84-5.53 15.31-12.86l82.06-410.23 78.72 314.97c1.69 6.73 7.53 11.62 14.44 12.09 7.62.28 13.38-3.59 15.94-10.03l60-149.94H632c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8H480z"></path></svg> Is there a way to prevent this? I'm asking because I do stacking of icons which worked perfectly before and now it doesn't come out correctly anymore.
Apparently the solution is pretty easy. If you don't include the JS, this will not happen and everything will be rendered as before. So in the application.js: import "#fortawesome/fontawesome-pro/css/all.css";
I removed the JS and the font-icon appeared as li tag, like before, so you only need to remove the line: import "#fortawesome/fontawesome-pro/js/all";
ImageMagick Conversion from svg to png/jpg results in distorted image
Somehow the Convert routine screws up my graphics... It used to work before. Does anyone have a clue what might have gone wrong (I installed the latest version of ImageMagick 7.0.5-10 and imagick 3.4.3, image converted through commandline)
The input SVG
http://defreule.info/scale.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.55 35.72"><defs><style>.a{fill:#706f6f;}</style></defs><title>youtube</title><path class="a" d="M17.61,15.42a0.44,0.44,0,0,0,.31-0.11A0.39,0.39,0,0,0,18,15V12.43a0.31,0.31,0,0,0-.12-0.25,0.48,0.48,0,0,0-.31-0.1,0.43,0.43,0,0,0-.29.1,0.32,0.32,0,0,0-.11.25V15a0.41,0.41,0,0,0,.1.3A0.38,0.38,0,0,0,17.61,15.42Z"/><path class="a" d="M19.75,20.2a0.85,0.85,0,0,0-.4.1,1.38,1.38,0,0,0-.37.3V18.72H18.11v5.84H19V24.22a1.1,1.1,0,0,0,.37.29,1,1,0,0,0,.45.09,0.71,0.71,0,0,0,.58-0.24,1.07,1.07,0,0,0,.2-0.7V21.28a1.29,1.29,0,0,0-.21-0.81A0.74,0.74,0,0,0,19.75,20.2Zm0,3.35a0.47,0.47,0,0,1-.07.3,0.28,0.28,0,0,1-.23.09,0.48,0.48,0,0,1-.21,0,0.73,0.73,0,0,1-.2-0.15V21.05a0.64,0.64,0,0,1,.18-0.13,0.45,0.45,0,0,1,.18,0,0.33,0.33,0,0,1,.27.11,0.51,0.51,0,0,1,.09.33v2.22Z"/><polygon class="a" points="11.65 19.57 12.65 19.57 12.65 24.55 13.62 24.55 13.62 19.57 14.63 19.57 14.63 18.72 11.65 18.72 11.65 19.57"/><path class="a" d="M16.6,23.52a1.22,1.22,0,0,1-.27.23,0.49,0.49,0,0,1-.24.09,0.21,0.21,0,0,1-.18-0.07,0.37,0.37,0,0,1-.05-0.22v-3.3H15v3.6a0.92,0.92,0,0,0,.15.58,0.53,0.53,0,0,0,.45.19,1,1,0,0,0,.5-0.14,1.85,1.85,0,0,0,.5-0.4v0.47h0.86V20.25H16.6v3.27Z"/><path class="a" d="M17.76,1a17,17,0,1,0,17,17A17,17,0,0,0,17.76,1Zm2.05,10.38h1V15a0.39,0.39,0,0,0,.06.24,0.23,0.23,0,0,0,.2.08,0.56,0.56,0,0,0,.27-0.1A1.35,1.35,0,0,0,21.6,15v-3.6h1v4.74h-1V15.6A2,2,0,0,1,21,16a1.23,1.23,0,0,1-.56.15A0.61,0.61,0,0,1,20,16a1,1,0,0,1-.17-0.63v-4Zm-3.6,1.08a1.08,1.08,0,0,1,.39-0.88,1.59,1.59,0,0,1,1.05-.33,1.43,1.43,0,0,1,1,.34,1.14,1.14,0,0,1,.38.89v2.45a1.24,1.24,0,0,1-.37,1,1.48,1.48,0,0,1-1,.35,1.43,1.43,0,0,1-1-.36,1.26,1.26,0,0,1-.38-1V12.47ZM13.57,9.7l0.71,2.57h0.07L15,9.7h1.11l-1.27,3.76v2.67H13.77V13.58L12.47,9.7h1.1ZM26.26,23.23a3.11,3.11,0,0,1-3.11,3.11H12.36a3.11,3.11,0,0,1-3.11-3.11v-2.5a3.11,3.11,0,0,1,3.11-3.11h10.8a3.11,3.11,0,0,1,3.11,3.11v2.5Z"/><path class="a" d="M22.34,20.14a1.3,1.3,0,0,0-.94.35,1.21,1.21,0,0,0-.37.91v1.93a1.37,1.37,0,0,0,.33,1,1.18,1.18,0,0,0,.91.36,1.28,1.28,0,0,0,1-.33,1.38,1.38,0,0,0,.32-1V23.12H22.68v0.2a0.94,0.94,0,0,1-.09.49,0.36,0.36,0,0,1-.3.11A0.32,0.32,0,0,1,22,23.79a1,1,0,0,1-.08-0.47V22.5h1.65v-1.1a1.29,1.29,0,0,0-.32-0.94A1.21,1.21,0,0,0,22.34,20.14Zm0.34,1.69H21.92V21.4A0.63,0.63,0,0,1,22,21a0.34,0.34,0,0,1,.29-0.12,0.33,0.33,0,0,1,.29.12,0.64,0.64,0,0,1,.09.39v0.43Z"/></svg>
Resulting Image
convert scale.svg test.png
Update
It seems that when i use file > save as in Illustrator to save my .svg the converter does work fine. However when I use file>export the svg looks fine, but converting to png fails. I am still interested in why this is.
Anchor tag not working
For this website ( http://carbondirect.net/ ) on the homepage, bottom right I want Sewage Odor Control to link to the page Activated Carbon and jump to the Sewage Odor Control section, but it is not working. It links to the Activated Carbon page, ignoring the anchor.
Based on some research, I tried adding this CSS, but it is still not working:
#sewage-odor-control {
position: fixed;
z-index: 10001;
display: inline-block;
}
Did I do anything obviously wrong? If you are able to take a look, thank you.
Here is the relevant code from your site: <div class="et_pb_toggle et_pb_toggle_close"> <h5 class="et_pb_toggle_title">SEWAGE ODOR CONTROL</h5> <div class="et_pb_toggle_content clearfix"> <span><a id="sewage-odor-control"></a></span> Wet wells and sewage-pumping stations need to be vented to atmosphere, the vapor that is exchanged is contaminated with H2S and mercaptan. They are highly odorous, pungent and extremely objectionable. Specialist impregnated carbon are used to remove H2S to the level below the odor threshold value. The patented products (US patent#6,858,192) invented by our factory are unique catalytic activated carbon not only with high capacity on absorption, but also hazard free during the handling and disposal of spent carbon.</p> <p>IMP-KOH, HiCOR </div> <!-- .et_pb_toggle_content --> </div> <!-- .et_pb_toggle --> A couple weird things going on: Line #5: have a closing </p>, but no opening <p> Line #6: have an opening <p>, but no closing <\p> Also, your anchor is not 'visible' when you first go to the site because the section is toggled closed (et_pb_toggle_close), so maybe that is causing a problem. What happens if you add the anchor the the header (which is readily visible)? <h5 id="sewage-odor-control" class="et_pb_toggle_title">SEWAGE ODOR CONTROL</h5>
The only thing you need is adding id="sewage-odor-control" to the target element: <div id="sewage-odor-control" class="et_pb_toggle et_pb_toggle_close">
How to have the browser load an image programmatically
I have (java) code that generates PNG images from a custom infrared camera from time to time all the same size and, at the moment, just saves them outside the server space. They all have the same name and the most recent overwrites the previous one.
I can send a message to my dart code in the browser that an image is available for automatic loading for display in an image element.
Should I create an image folder and save them there?
How would the browser request and display the image? I'm using port 4955 for html.
I'm new at dart, html etc.
<-- edit -->
Will this allow me to change the DOM?
HTML
<div id='image-div'>
<img alt='' id='image' src='resources/200C-B12.png'
height='480' width='640'>
</div>
CSS
#image {
}
Dart
ImageElement imageElement = querySelector('#image');
I think I want to change the above ImageElement to this the below but don't know how.
"<img alt='' id='image' src='imageDisplay/myimage.png'
height='480' width='640'>";
<-- edit -->
I have tried the suggested methods to request the image but none works. The most recent attempt is below. I have a statement that writes to a log-file in the Dart server code that handles HTTP requests and, while there are log entries made when the page page is loaded there are none when I try to request a different image. The client page does receive the correct path to the image so the problem is that I still don't grok the correct procedure.
HTML currently - want to replace src ... to src='displayImage/some_image.png'
<div id='img-box'>
<div id='image-div'>
<div id='imgAnchor'>
<img alt='' id='image' src='resources/fi_12_demo.png'
height='480' width='640'>
</div>
</div>
</div>
Dart code fragment:
void displayNewImage(imagename) {
updateLog('display image = $imagename'); // imagename is correct
var anchor = querySelector('#imgAnchor');
anchor.children.clear;
anchor.append(new ImageElement()
..innerHtml="<img alt='' id='image' src='$imagename' height='480px' width='640px'>");
}
I conclude that no request is being sent from the client to my Dart server.
I think adding an <img src="http://yourserver.yourdomain.com:4955/somefolder/someimg.png"> to your HTML dynamically (by Dart code) should do. If the updated images have the same name you might run into caching issues (the browser doesn't load the image from the server but loades it from the cache instead). It might be easier to store each image with a new name.
Highcharts charts on a page not rendering correctly when output to PDF using wkhtmltopdf
My wkhtmltopdf PDF output of a page with several Highcharts charts on it is missing some elements of the charts, primarily all of the simple straight lines, including tick marks, grid lines, column borders, legend borders and the lines in my line/spline charts (data points display). I have tried the tricks used to solve this issue from other stack questions, namely setting all of the following on the series: enableMouseTracking: false, shadow: false, animation: false ...as well as setting those on the column/spline. No luck. Here is a link to an image of the browser page. Here is a link to an image of the pdf output. Here is a link to a gist of my chart options for the first two charts. This is all on Linux Ubuntu 12.04 installed in a VirtualBox guest, using the latest Highcharts download as of two days ago and wkhtmltopdf version 0.10.0_rc2. The calls to wkhtmltopdf are primarily going through the PDFKIT gem in a Rails 3 application, but I have made direct calls to wkhtmltopdf on the command line with the same results. TIA for any help! UPDATE: I have isolated the problem down to a particular snippet of HTML that comes before the charts. I am using the Twitter Bootstrap css/javascript framework, this code produces a set of buttons: <div class='btn-group' data-toggle='buttons-radio'> <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2012">2012</button> <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2011">2011</button> <button class="filterButton btn btn-primary selected" data-filter="school_year" data-group="dr_filter" data-value="2010">2010</button> <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2009">2009</button> <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2008">2008</button> </div> Specifically, it is the presence of the .btn-group tag that is causing the issue - take that away, leave everything else as is, and the PDF generates identical to the page display without the noted issues. Also, if you move this snippet to anywhere on the page after the charts, everything works correctly. I have further isolated the problem down to the actual html/css, as the issue still exists when I completely disable the Bootstrap javascript functions.
There is reported an issue on wkhtmltopdf which is very similar to your case. See issue 689. Wkhtmltopdf doesn't handle transparency/shadows properly and can result in unpredictable results.
Remove all stroke-opacity attributes in the svg and replace them with the opacity attribute, before you send it to wkhtmltopdf. This piece of code will do the trick.
nodes = document.querySelectorAll('*[stroke-opacity]');
for (nodeIter = 0; nodeIter < nodes.length; nodeIter += 1) {
elem = nodes[nodeIter];
opacity = elem.getAttribute('stroke-opacity');
elem.removeAttribute('stroke-opacity');
elem.setAttribute('opacity', opacity);
}
try passing option javascript-dealy wkhtmltopdf --quiet --page-size letter --encoding UTF-8 --javascript-dealy 5000 - - or if you are using pdfkit gem/library try adding below line in html code <meta content="5000" name="pdfkit-javascript-delay"/>