Serve Scaled Images - image

So I'm trying to resolve my sites bad "served scaled image" grade - see here: http://cl.ly/image/1A430t0k1r0s
I'm using a responsive site powered by Wordpress. I'm using one image on my homepage full width slider (so the image needs to be large). How can I fix this score?
url: http://cl.ly/1n162x1K3O15

You need to use the GZip compression technique and browser caching to resolve this problem. The below is the code for simple GZip compression but you can check it out in detail here
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf|svg|pdf|flv|mp3)$">
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month 2 days 3 hours" //example you can change it
Header set Cache-Control "public"
</IfModule>
</FilesMatch>
Go for adaptive images if this still doesn't work.

Related

Htaccess direct linking image to page

I'd like to prevent direct image viewing without the entire page.
If someone goes to
mysite.com/images/image1.jpg forward to mysite.com/image1.htm
mysite.com/images/image2.jpg forward to mysite.com/image1.htm
mysite.com/images/image3.jpg forward to mysite.com/image2.htm
mysite.com/images/image4.jpg forward to mysite.com/image2.htm
Is Htaccess the best way to do this and how would I set it up?
You can check for the "Referer" request header. Browsers sometimes use it to tell the server what URL told the browser to load the file. However, not all browsers will use the referer header and it can easily be forged, so this is not a sure way to prevent direct linking to your images.
You can add this at the top of your htaccesss file:
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^https?://mysite\.com/
RewriteRule ^images/(.+)\.jpg$ /$1.html [L,R]
Reading the comments, I'd recommend to avoid maintaining N RewriteRules for N images. Such a setup will turn into a maintenance nightmare for the site admin who will need to copy and paste a new rule for every new image on the site. And if you ever need to change the rules, well... good luck with that.
If you have the flexibility to choose a better directory structure, it can simplify your .htaccess file down to a single rewrite rule. In that case, you can choose a directory structure where given a path to an image you can easily determine the path to the page it belongs to. For example:
root/
.htaccess
page1/
index.html
image/
image1.jpg
image2.jpg
page2/
index.html
image/
img.jpg
Here the rewrite definition within root/.htaccess is simple (adapted from #jon-lin's answer):
# Rewrite any image URL `/<page>/images/*` to `/<page>/`.
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^https?://mysite\.com/
RewriteRule ^([^/]+)/image/ /$1/ [L,R]
Pros
One RewriteRule to rule them all.
Your images do not have to be .jpg, as long as they reside in /<page>/image/.
Cons
Need to reorganize existing files.
Directory structure very tailored to the rewriting problem. It would be awkward for a page to access an image which "belongs" to another page.

symbolic links not work with htaccess in xampp

For several days i'm trying to figure out how symbolic links work with htaccess rewriterule
and for that I've created a new project to help me to apply these rules in one website
for which I work so the context is:
In my xampp folder on local-host I have a main page index.php that I want to call "home"
and in this page I have some url links for two pages called objectives.php and news.php where I wish to load dynamic content in future website
here is my code for index.php
<p><a href="objectives.php?menu=corporate-objectives">
Corporate objectives - load page content for this item from objectives table</a></p>
<p>Functional objectives ...</p>
<p>Unit objectives ...<p>
<p><a href="news.php?article=meeting-news">
Meeting news - load content from news table for meeting</a></p>
<p>Press release news ...</p>
<p>Other news ...<p>
and here is the code for the other two pages:
objectives.php
$pages = $_REQUEST['menu'];
echo "This is Corporate objectives -objectives.php here I load content
according to this menu item value"."<br>";
echo "Menu item value: ".$pages;
news.php
$pages = $_REQUEST['article'];
echo "This is Meeting news - news.php here I load news content
for this article value from news table "."<br>";
echo "Article value: ".$pages;
What I 've read before is that with RewriteRule in htaccess I can change the url to become symbolic or friendly for example:
/MyTest_proj/objectives.php?menu=corporate-objectives
I want to transform in
/MyTest_proj/corporate-objectives
and
/MyTest_proj/news.php?article=meeting-news
in
/MyTest_proj/meeting-news
so for that I have completed in my .htaccess:
Options +FollowSymLinks
RewriteEngine on
RewriteRule ^([-a-zA-Z0-9]+)?$ objectives.php?menu=$1
RewriteRule ^([-a-zA-Z0-9]+)?$ news.php?article=$1
The problem is... nothing happens so I've tried to change something for testing
url links from main page:
...
...
and it work BUT only for objectives.php for wich I have rewrite rule, the second page
it's load in the same page instead of news.php
I have tried in many ways to change the rules but nothig work..for several times,
the most common error was like error 401
I apologize for the long content and please, tell me that something can be done after all
thanks !

Apache serve default image when an image is missing

We have several different size images for products. We want to return the correct size default image whenever the product image is missing.
The path to the images are different for each product.
path /www/docroot/images/brand/product/product1_l.jpg
path /www/docroot/images/differentbrand/differentproduct/someotherproduct1_l.jpg
The size of the images look something like the items on the left. We would want to chose the corresponding default image on the right.
product1_l.jpg large noimage_l.jpg
product1_m.jpg medium noimage_m.jpg
product1_s.jpg small noimage_s.jpg
I have seen some examples of people achieving something similar using mod_rewrite. Can anyone give any guidance on how I can use that to fit my scenario?
You need an intelligent 404 handler. If Apache throws a 404 (File not found) error the intelligent handler should try to salvage the event by looking at the pattern of the URL, and locating a known resource to serve instead. You should also handle the possibility that the fall back image might also not be there.
This page can show you how to check if a file is present, but the logic will need to be in the last line.
http://www.phpriot.com/articles/search-engine-urls/5
RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1
Or you can go the .htaccess route (I think that's cleaner)
http://httpd.apache.org/docs/2.2/mod/core.html#errordocument
Assuming you could use .htaccess and PHP here is one solution:
Add this line to your .htaccess:
ErrorDocument 404 /error.php
Then add this code to you error.php like this
<?php
if(preg_match("/^/images/thumbnail/", $_SERVER['REQUEST_URI'])) {
//do a 302 redirect
header( 'Location: /images/defualtImage.jpg' ) ;
} else {
//You need to go somewhere to handle actual 404 errors
header( 'Location: /static/404.html' ) ;
}
?>
302 redirect directs would work best here.
Thanks for all your comments. We ended up going with a different solution. We used the onerror js tag to point to the appropriate noimg location. This was cleaner and easier for our environment

htaccess denie only one file from referrer

i have a folder in which there are different images.
phpe77WUQ-155x194.jpg
phpe77WUQ-276x345.jpg
phpe77WUQ-84x105.jpg
phpe77WUQ.jpg
sdfs714ggs4eg-155x194.jpg
sdfs714ggs4eg-276x345.jpg
sdfs714ggs4eg-84x105.jpg
sdfs714ggs4eg.jpg
only the images with a size (e.g. 155x194) in name may be viewed from everywhere.
the two other images may only be seen from referer
.domain.com/user/editimage
how do i do that with htaccess?
I hope this will work for you:
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://.*\.domain\.com/user/editimage$ [NC]
RewriteRule !^(.*)-([0-9]+)x([0-9]+)\.jpg$ - [NC,L,F]
Every image without a size in its name will be blocked if the referer is not subdomain.domain.com/user/editimage

.htacces cache control for AJAX requests

I have a page on my website that makes AJAX GET requests when a user clicks a button, for example the url to be gotten will look like:
/php/getData.php?field1=val1&field2=val2
The value returned by getData.php with these two values will not change (at least for a few months) so how can I implement cache control in my .htaccess file to tell the browser to cache the result for a certain amount of time?
For example, I tell the browser to cache js and css file in the following way:
<FilesMatch "\.(css|js)$">
Header set Cache-Control "max-age=3024000, must-revalidate"
</FilesMatch>
^ this sets the cache-control header for 30 days.
Any help would be much appreciated.
Thanks
Unfortunately, there is no directive in Apache to match against a query-string. Just filenames and directories.

Resources