so I get this for my website, https://gettysburgconnection.org when I run Google pagespeed insights.
Serve images in next-gen formats
17.1 s
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more.
WordPressConsider using a plugin or service that will automatically convert your uploaded images to the optimal formats.
OK, but I also know that adding plugins is not ideal. How should I (easily) convert my images going forward to .webp?
A plugin is your best option for WordPress unless you don't mind manually converting all your images to .webp.
However if you are against plugins (and I understand why given that they tend to cause endless issues and security holes) and you don't mind converting your images over using a custom or command line utility etc. there is an easy way to serve webP images.
What we do is use .htaccess to tell the server to look for the header that says a browser accepts webp images and redirect all requests for .jpg / .jpeg to the .webp version.
In case you have other formats you want to convert I have included conversion of .png files as well (RewriteRule ^/?(.+?)\.(jpe?g|png)$ /$1.$2.webp ) so that you can see how to add other image types using the | character in the regular expression.
For the following to work your .webp images must be placed in the same folder and named the same.
.htaccess for serving webp images
AddType image/webp .webp
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^/?(.+?)\.(jpe?g|png)$ /$1.$2.webp [NC,T=image/webp,E=EXISTING:1,E=ADDVARY:1,L]
<IfModule mod_headers.c>
<FilesMatch "(?i)\.(jpe?g|png)$">
Header append "Vary" "Accept"
</FilesMatch>
</IfModule>
</IfModule>
It isn't ideal
The problem with the above is that it will serve webP images, but they will still have the .jpg extension.
They will render just fine as the browser will look at the mime type but it could cause some confusion if people try to save any images from your website.
Short answer is - find a decent and secure plugin to do this for you as the good ones will actually rename the files correctly and do all of the conversion for you.
Related
I have a vpn server so i have access anything, if i need httpd.conf etc.
Already using the code below in .htaccess on wordpress root folder:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://(www\.)?domainhere\.com [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?domainhere\.com.*$ [NC]
RewriteRule \.(gif|jpg|js|txt|mp4)$ /maalesef [L]
Created another .htaccess in videos folder containing;
order deny,allow
deny from all
Created another one in videos/english subfolder with same.
I need to protect that folder with many sub folders and mp4 files in them. Basically will be a paid video course. Users can stream it via player but can't download it. I don't want to pay Vimeo Pro or Amazon S3 since it's a budget project, maybe in future why not.
I'm also open if there's a way to protect them via converting mp4 into HLS with FFMPEG or a software called pavtube video converter ultimate.
Bonus: http://beezcode.com/hls how do they do it? Can't download with a plugin on chrome and can download the playlist m3u8 but cant open with any media player on windows.
Created another .htaccess in videos folder containing;
order deny,allow
deny from all
Created another one in videos/english subfolder with same.
There is no need to duplicate these .htaccess files in subdirectories if you just want to protect everything. The .htaccess file applies to the current directory and the entire directory tree below it.
Note that these are Apache 2.2 directives. If you are on Apache 2.4 then you should use the following instead:
Require all denied
If you only want to protect certain file types based on file extension, then use a <FilesMatch> container. For example:
<FilesMatch "\.(gif|jpg|js|txt|mp4)$">
Require all denied
</FilesMatch>
However, if these files should only ever be accessed by your application, then consider storing them outside of the document root instead. The files are then protected automatically against direct/HTTP access - nothing more to do. This is the safer option as it is not dependent on any userland code (ie. .htaccess) nor vulnerable to server misconfiguration.
RewriteCond %{HTTP_REFERER} !^http://(www\.)?domainhere\.com [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?domainhere\.com.*$ [NC]
RewriteRule \.(gif|jpg|js|txt|mp4)$ /maalesef [L]
This is simply "hot-link" protection. Which is unreliable and easy to circumvent. In any case, if you have the above code that blocks all HTTP access then these directives are less relevant.
I am trying to get mp4's to download immediately when they are opened. And I've succeeded at that. However, I'm also trying to make this happen, only when the link is accessed from a specific subdomain. I run a Wordpress Multisite
I've run the following code in the Ifmodule to no avail. All the videos download immediately, no matter where they are accessed from. I'm pretty sure I'm using the conditioning wrong, but I can't find a good example of how to do this.
RewriteCond %{HTTP_HOST} ^www\.subdomain.example\.com$
<FilesMatch "\.(mp4|MP4)">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
Thanks for reading! (Double thanks for any help.)
Put the FileMatch directive in the vhost configuration for your domain. So, if the file sub.conf contains information about www.subdomain.example.com, you just have to add the following there:
<FilesMatch "\.[mM][pP]4">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
I have a WordPress site hosted on MediaTemple. I don't know anything about .htaccess editing, so I copied and pasted from online sources (MT and others). I added the following lines to my .htaccess file to prevent hotlinking:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)mydomain.com/.*$ [NC]
RewriteRule \.(png|jpg)$ http://example.com/example.png [F]
The problem is of all the png and jpg image files I have on my site, one of them isn't showing up on my iPad or iPhone. All image files are located in the same directory.
At first, none of images on my home page weren't showing up. I did some Googling and found other ways to construct the last line, so I've tried changing [F] to [NC,F,L] and [NC,R,L] as well. I got 2 of the 3 images to show up. At one point, some of the images didn't even show up in my media library when logging into wp-admin on my desktop. Everything works just fine, of course, when I comment out the lines. I tried clearing the cache on my devices, but that didn't work either.
There is no rhyme or reason I can find. MT tech support had no solution. Googling has turned up nothing. Can't find an answer specific to my problem on SO, but got some insight here - Prevent Hotlinking through CSS via .htaccess - where user states "some browsers will don't send HTTP_REFERER and legitimate users will end up seeing broken images." But if my other images are showing up, this can't be a problem with HTTP_REFERER.
I don't have a problem with hotlinking because I don't have any images worth hotlinking, so I personally can live without this, but in the event I design a site for a client who wants to prevent hotlinking, I need to have .htaccess work.
Don't know if this matters, but I also have .htaccess files in my wp-content and wp-admin folders, too, but I don't think they're causing the problem.
I am using a CDN with my shopp installation. I used super cache to do most of the setup for getting my content on the cdn. However, the images that are served by the database (product images) are not being pulled from the cdn. I did check that they exist on the cdn.
i know that you need to do something to the htaccess file and this is what i got so far
RewriteEngine On
RewriteBase /
RewriteRule ^.shop/images/(\d+)/?\??(.)$ http://cdn.example.com/shop/images/$1/?$2 [L,R=301]
but it doesn't seem to work. anyone know a solution?
The Query String (everything after ?) cannot be matched in RewriteRule directive.
RewriteEngine on
RewriteRule ^shop/images/(\d+)/ http://cdn.example.com/shop/images/$1/ [NC,QSA,R=301]
The above rule only matches URL, the query string (e.g. ?280,340,667194571) will be passed as is (no additional checks -- what for?). As long as URL is in this format shop/images/{some_digits_only}/ (e.g. example.com/shop/images/73/) it will issue Permanent redirect (301) and URL in browser will be changed to CDN URL (e.g. http://cdn.example.com/shop/images/73/?280,340,667194571).
I'm trying to restrict access to MP3's to users only (i'm using wordpress)
I have my .htaccess set up to redirect back to the homepage unless you click it - to prevent people just typing in the url.
But when a registered user does click it the MP3 doesn't stream (in safari) and when you try to 'download linked file' you get a html file not the mp3.
So basically at the moment no one can download them.
Here's my htaccess code
IndexIgnore *
Options +FollowSymlinks
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(www\.)?wizzfx\.com/ [NC]
RewriteCond %{REQUEST_URI} !hotlink\.(mp3) [NC]
RewriteRule .*\.(mp3)$ http://www.wizzfx.com/ [NC]
I'll also probably want to include other files than just mp3s at some point too.
The trouble is your technique, as you say, is quite restrictive, yet it's not really that secure (it's easy to spoof the referer header).
A better solution, but again not entirely secure, would be to simply use obscure file naming (making it hard to merely 'guess' the URL), but not setting limits on where and how a user can listen to the file.
If you want absolute security, a plugin that allowed you to upload media, within your WordPress admin, to a directory outside the web root.
Users would then log in to view the uploaded media, but would have to download and save the files in order to use them.
The downloading process would be made using a simple PHP file downloader script, in order to present files outside the web root.