Thanks to this guy, I was able to reduce website load, and stop wasting bandwidth in unnecessary quality our eyes can’t see.

Nowadays, screens have more resolution than you eye can catch, so you can increase the compression (reduce the quality) up to a point where you barely start noticing it (the only way to calculate it.

Copy this funciton in your functions.php file, and new photos saved by WordPress (thumbnails and intermediate sizes), will be created using your new settings.

// Changes compression for newly uploaded photos
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Testing different compression settings using WordPress uploader is a slow process, so I recommend you to try it in PhotoShop or any online photo editor first, and then using the value that suits your eye in this function.

If you want to squeeze more juice from WordPress, optimizing the compression settings even more, try this other function to select different compression settings for different image sizes.

If you need to re-create the existing images, you can use the plugin Force Regenerate thumbnails

Loading speed is reflected in PageRank, and clients always want BIGGER images, and MORE animate slides.

If you want to compete with other websites in every aspect, page load if one of the most important features that Google and other search engines take into account at the time of assigning a PageRank to your website.

And if you use many images in a Giant image slider (A.K.A Hero box) you’ll need to save some Kb here and there.

Sliders could take a higher compression to prevent bloating your website with un-necessary weight.

In this code, you just replace the conditional to your image size names, and the amount of compression desired. In my case, I divided it in “slider” or everything else.

Code By Ahmad M.

// Different compression for each size
// Thanks to 
add_filter('jpeg_quality', create_function('$quality', 'return 100;'));

add_action('added_post_meta', 'ad_update_jpeg_quality', 10, 4);

function ad_update_jpeg_quality($meta_id, $attach_id, $meta_key, $attach_meta) {

    if ($meta_key == '_wp_attachment_metadata') {

        $post = get_post($attach_id);

        if ($post->post_mime_type == 'image/jpeg' && is_array($attach_meta['sizes'])) {

            $pathinfo = pathinfo($attach_meta['file']);
            $uploads = wp_upload_dir();
            $dir = $uploads['basedir'] . '/' . $pathinfo['dirname'];

            foreach ($attach_meta['sizes'] as $size => $value) {

                $image = $dir . '/' . $value['file'];
                $resource = imagecreatefromjpeg($image);

                if ($size == 'slider') {
                    // set the jpeg quality for 'slider' size
                    imagejpeg($resource, $image, 30);
                } else {
                    // set the jpeg quality for the rest of sizes
                    imagejpeg($resource, $image, 50);
                }
                imagedestroy($resource);
            }
        }
    }
}

This will only change the new photos upladed after installing it. If you need to re-create the existing images, you can use the plugin Force Regenerate thumbnails

If you don’t need different compression settings, you can just follow another other function, to change WordPress image compression settings.

If you are not proficient with photoshop like me, you probably upload your photos as-is and let WordPress to manage all the sizes.

That makes wordpress to take way more resources and time to load than if the images had been properly prepared for screen

Now, in order to limit WordPress image sizes to the “large” size, you will be left with just one size for your entry column. So you need a new image size for not messing with your existing sizes, as I explained in my post Make WordPress faster and fix duplicate content with one function

and combined with this other function, you can ensure

function limit_imagesizes( $orig_link, $post_id, $size, $permalink ) {

 // Only do this if we're getting the file URL
 if ($permalink) return $orig_link;

 $image = wp_get_attachment_image_src( $post_id, 'maximum' );
 $new_link = preg_replace('/href=\'(.*?)\'/', 'href=\'' . $image[0] . '\'', $orig_link );
 return $new_link;
}
add_filter('wp_get_attachment_link', 'limit_imagesizes', 10, 4);

And if you are an optimizer like me, you might want to compress the images a little more, considering modern screens have more resolution than before, making the JPEG artifacts harder to notice (they end up smaller, like the whole image)

…or learning how JPEG works or how to find the right compression settings.

Because your screen doesn’t need a 2100 px wide image! You are probably good to go with a 800 px wide image, or maybe 1024 px wide for a full-screen feature when using some “Lightbox” type of plugin.

There are functions for that out there, but I combined them with the other issue that could get you duplicate content I wrote about, here

For those old sites, and for any that you want to speed up, add this function to your functions.php file and it’ll take care of (more…)

Yes, the title was purposely on purpose.

You had the duplicate content issue tamed and suddenly Google reports tell you there are duplicate pages.

Due to the new media uploader, your theme could not be able to make an image to link to the original file, and now it links to a new page with the same content than the rest. You can see the bug track here Media uploader has issues with defaults for align/link/size (more…)

The goal:

You want to change the $post->post_content but your changes need to be made BEFORE WordPress filters it… and there’s NO filter before the_content!

I’ve been banging my head for a whole week, trying to pritify old content, but replacing the global $post-post_content (more…)

I found the description for “Homeopathy” in google results included controversy text.

For such a small description, one would believe there’s not enough room for quack it or promote it, but there it was.

Screenshot of search engine results by google showing advertising for Marlboro in Widipedia's page about cigarette.

This is how you penetrate wikepedia, right in front of their editors

After (me) being hated by some of the editors, the description miraculously changed to a plain description, but nobody said “I did” or “Oops”, yet I’m still waiting for an official answer to my request to edit a HIDDEN section even the editors didn’t know exists. : The “Lede” or lead. You need to add special query parameters in the address bar to see it (&secion=0 if the page is not marked as “controversial” or somehow blocked) like this lede for furniture

One answer was

How many times do we have to say this: ‘we have no control over what Google does’

The lede, is what the crawler reads, but IT’S NOWHERE IN THE USER PAGE, it’s only seen by bots.
Although Wikipedia is believed to be neutral, and open, the lede is not even seen in your browser, nor the main “edit” page.
If you thought you can at least control what others do, think again.

That page is locked, and you have to (more…)

As a followup of my previous article Semantic yet SEO rating stars, here’s a new application of custom fonts: A bar graph generated out of simple numbers. No images, no JavaScript, no SVG, no Canvas, no DIVs; just CSS, a minimal font and the same text you’ll write for human reading.

The microformat doesn’t make sense yet, since I just used the one for the stars, but since I haven’t found a specific schema for polls, or graphs, I’ll just post it anyway, while I get an answer from the schema brains about how the code should be rendered.

  • Poll Question: Does WordPress Plugin API deserve its own SVN client?
  • Yes: 67%
  • No: 33%
  • based on: 176 Votes

…and BELOW the SAME MARKUP, with a regular font.

  • Poll Question: Does WordPress Plugin API deserve its own SVN client?
  • Yes: 67%
  • No: 33%
  • based on: 176 Votes

Again, you can inspect the code of the bars above, and see by yourself it doesn’t use any extra code or markup for the bars.

As you can see, the bar, outline, and background color can be changed independently, even on (more…)

The dream

Now it’s possible to write your review in normal text, and have it formated as fraction-filled stars, no images, no JS, no flash, no SVG, no canvas.
Euhh?

Inspect this live example

Take the following text as example. This will also render the stars in Google search results, not because you made a special code for robots, but because it’s actually the SAME code.

  • Plugin Review: Darkroom facebook photo gallery for wordpress
  • Rating: 3.5 out of 5</i>
  • based on: 76 reviews

And below the same text without the class “seostars”. (more…)

Safari renders the rounded corners with bezier paths, and the values you enter not always generate a valid curve in webkit. Sometimes some value fails to render the curve, and although it was taken care of for the rendering of the curve (more…)

Ready to own a Social Blogsite?

Learn More