<img src="./img/pic.png">
<img src="./img/pic.svg">
Locally the two lines above work and display two pictures but once deployed remotely (for example, on a ftp) only the png displays (permissions are set to the most permissive for both files).
Any idea?
By the way, it seems any sort on svg cannot be display, I can access to pic using its path but loading in html does not work.
I'm sure this is real stupid.
Seems weird as SVG support is pretty good on a lot of browsers
http://caniuse.com/#search=svg
This could be down to your server, If it's an Apache server you could try adding
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
to the .htaccess.
Related
hopefully you can help!
On my website's local version, in my file structure I have a file test.vtt, captions for a short video. I'm using Dreamweaver to edit it.
Edit: I'm using Bootstrap 5 framework and using the default video-player.
<div class="embed-responsive">
<video class="rounded-3" poster="assets/videos/poster.jpg" preload="metadata" controls style="max-width: 100%;" crossorigin="anonymous">
<source src="assets/videos/video1.mp4" type="video/mp4">
<track label="English" kind="captions" srclang="en" src="assets/videos/test.vtt" type="text/vtt" default/>
</video>
</div>
I've connected to the remote server via DreamWeaver FTP, and uploaded the relevant files including test.vtt
When accessing the local website preview in DreamWeaver, the subtitles work flawlessly which is superb! Unfortunately, when I upload all the local files to the remote server and preview the 'live version', on Inspect Element I can see an error:
Failed to load resource: the server responded with a status of 404 (Not Found)
for the file test.vtt - despite me looking at the servers' file structure and finding the file!
Apologies - I'm pretty basic but cannot fathom out how to get the subtitles working on the live version. Anyone have any idea what I could try? I've tried moving the test.vtt file into various levels of folder substructure so it's next to the index, in case it was that! I've tried renaming and re-doing the file from scratch, too.
Any help greatly appreciated!
What I've tried:
Moving the test.vtt file around in the folder hierarchy in case it can't find the file?
Remaking the test.vtt file from scratch,
Naming it something else,
Re-uploading it to remote server alongside the other files required files (which all worked other than test.vtt)
Reading dozens of articles online and trying to re-structure the div to have 'track' both inline and separate but neither solution works. Also tried other bits like 'cross-origin' but doesn't resolve anything.
Appears to be a file issue on server, does it not? Sorry - I'm a bit new to all of this!
Since the server does not seem to detect the VTT file at all, I am wondering if the server is configured to recognize and serve VTT files. You might need to add a configuration that sets mime type as VTT file. Have you successfully served VTT files from this server before? Here is an article on this subject: HTML5 track captions not showing.
I want to reduce page load, since comparing webp vs jpg or png, webp has much lower size(in KB), but here is problem it does not work in Edge,IE(11) and older Safari(5.1.7).
Looking for solution I found post by #WaughWaugh https://stackoverflow.com/a/56021203/10966377 which posted tool which converts webp to png using base64, but before I could sleep without stress, doesnt that just increase unwanted page load because it has to convert webp to png?
It doesn't transfer PNGs across the wire.
The costs come from downloading the library itself and the CPU/memory usage of running it.
You can use a combination of Content Negotiation and URL rewriting to let the webserver handle it, but that won't enable WebP for non-supporting browsers, of course. Here's how you can do it with Apache (from .htaccess in image folder):
<If "%{HTTP_ACCEPT} =~ /webp/">
Options +MultiViews
</If>
<Else>
RewriteEngine on
RewriteCond "$1.jpg" -f
RewriteRule "^(.*)$" "$1.jpg"
</Else>
So if the browser request contains "webp" in the Accept header, it uses ConNeg, otherwise the JPG is served, if it exists.
Hi im fairly new to html and have run into a problem when adding images from a local folder.
<img src="C:\ComputerBuild Pics\DSC_0037.NEF">
<img src="C:\ComputerBuild%Pics\DSC_0037.NEF">
<img src="ComputerBuild%2520Pics\DSC_0037.NEF">
<img src="ComputerBuild%Pics\DSC_0037.NEF">
NEF image file is raw image, compress this file https://raw.pics.io/convert-nef-to-jpeg
A browser cannot render a NEF image file.
You need to convert it to a file format that a browser can interprete and render.
You need to convert it to supported images for web browsers.
On regards to that, there is this page in Wikipedia. See the chart for different images types and web browsers.
Convert the images in .png format which stands for "Portable Network Graphics"
You can use this site to convert: http://image.online-convert.com/convert-to-png
or you can use any graphics software of your choice
I'm displaying SVG images with two methods on a website, css background and <img> tag, neither of which are working. However, I'm able to load svg files via the <object> method, but this doesn't work for this case (it could replace <img> but not background images). Because someone will ask, the SVG files are there, and they are accessible if you go to their url directly.
I've been testing and working with this site on a separate, private server and the SVG images were displaying properly there. This leads me to believe that the issue is a result of something server-side.
I've tried adding the following to the .htaccess file, but it didn't fix anything:
AddType image/svg xml svg svgz
AddEncoding gzip svgz
I'm aware of some alternative methods that involve httpd.conf, but I don't have access to this.
Here's the troublesome site: http://www.focusvitamins.com/get-started/
Here's the working test site: http://focus.steadfa.st/dtclanding2015/
Thanks for the help!
That should be
AddType image/svg+xml svg svgz
as the mime-type for svg images is image/svg+xml. You are missing a +
I recently started using svg images in my sites. Some of them are complex and quite big, so I've started compressing them. They compress really well.
Why would one ever not use SVGZs (instead of the uncompressed version)? Are there well-known pitfalls that I should be aware of?
As long as your webserver sets the proper Content-Encoding HTTP header it should work in all browsers that support SVG.
The one pitfall I know of is if you want to be able to open the svgz files from disk locally (that is: without using a webserver). That doesn't work in all browsers.
Also if your svg files are big, then you should consider preprocessing them with SVG Scour or similar. It's rather common to see vector graphics editors such as Illustrator and Inkscape output display-redundant data in the files (binary blobs or custom xml markup).
Is it for desktop browsers, mobile? I know Opera supports SVGZ natively since 8.0 at least (maybe even earlier).
What server? Apache, IIS? You might have to configure it and/or mess with .htaccess. Here's a howto for Apache: http://kaioa.com/node/45
Keep in mind that the server might be already serving your content compressed, if your client supports it, as SVGZ is just a normal SVG with gzip compression applied.