{"id":13264,"date":"2015-03-09T05:09:55","date_gmt":"2015-03-08T18:09:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13264"},"modified":"2015-03-09T05:09:55","modified_gmt":"2015-03-08T18:09:55","slug":"ffmpeg-image-optimization-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-image-optimization-primer-tutorial\/","title":{"rendered":"FFmpeg Image Optimization Primer Tutorial"},"content":{"rendered":"
\"FFmpeg<\/a>

FFmpeg Image Optimization Primer Tutorial<\/p><\/div>\n

The Linux FFmpeg<\/a> command is so useful, and so modest. In its “man ffmpeg” it just describes itself as a video converter, but it does (eg. scaling<\/a>) images as well …. guess the modesty could be that it thinks of one image as a very short video … subliminal advertising<\/a> perhaps?! We found it invaluable in the “end game” part of the creation of our “Make Your Own Charts” iOS (iPad) mobile application, and you can read more about this here<\/a>.<\/p>\n

Do you remember a few days back talking about Google PageSpeed and Firebug Mobile Friendly Primer Tutorial<\/a> when we said? …<\/p>\n

\n

The Google PageSpeed Insight tools not only measure a webpage’s speed but can also give a report on the Mobile (or Desktop, for that matter) friendliness of that webpage, giving a score out of 100.<\/p>\n<\/blockquote>\n

… well, today, we turn our attention to the Google PageSpeed<\/a> talent for showing you how to speed up your webpages, and so, get in the better books with the search engines, and your users, probably. The use of Google PageSpeed on the Landing Page clone<\/a> pointed out the speed savings that could be achieved by some image optimization (preferably lossless compression<\/a>) and there is a pretty obvious one here … let’s make these images 105px wide (at least for when they just load “above the fold”).<\/p>\n

So, in relation to WordPress Recent Post Landing Page Tutorial<\/a> as shown below, that’s where we get a new … recent-posts-2.php<\/a> … and the changes to code … here<\/a>.<\/p>\n

In that code you’ll see the major PHP “exec”<\/a> code line of change as …<\/p>\n


\n exec(\"ffmpeg -i \" . dirname(__FILE__) . \"\/\" . $narray[$thisij] . \".jpg -vf scale=105:-1 \" . dirname(__FILE__) . \"\/\" . $narray[$thisij] . \".jpeg\");
\n<\/code><\/p>\n

That leaves a good zero.html<\/a> arrangement.<\/p>\n

You’ll see that this is only a minor improvement from 33 to 34 score with Google PageSpeed, but has moved the Optimizing Images out of the critical section. Obviously there is such a lot to do in this area, as an ongoing project.<\/p>\n

Did you know?<\/i><\/b><\/p>\n

There are quite a few things to like about the Jpeg image file format, and one of the most pleasing one to implement is its peculiarity that a file extension of .jpg is totally equivalent to a file extension of .jpeg as far as the understanding of web browsers, and their rendering rules, goes. This gives a lot of scope to programmers to be able to have unusual arrangements with Jpeg files with their dual extension possibilities (the same data can have two operating system “guises”) … here we use the ability to have two different image sizes and Javascript DOM can handle the onmouseover<\/i> event nonetheless by reverting to the bigger (size) version when a zooming operation is required, but none of this impacts the “above the fold” initial loading with the smaller (size) version.<\/p>\n

Jpeg allows percentage file filtering when saving in various image editors … does one have to go on and on and on and on … or do you give up now?!<\/p>\n

Thinking on it, .htm and .html can have a similar powerful relationship for programmers, finding later on that new great functionality can be placed into the .htm for overriding<\/i> purposes, especially involving the (more) default index.htm<\/i> (of Apache web hosting) or (more) default default.htm<\/i> (of ASP.Net web hosting) files of a web server folder<\/p>\n

\n

Previous relevant WordPress Recent Post Landing Page Tutorial<\/a> is shown below.<\/p>\n

\"Wordpress<\/a>

Wordpress Recent Post Landing Page Tutorial<\/p><\/div>\n

A few days back we decided to revisit (WordPress Recent Post Image Follow Up Tutorial<\/a>) in order to (software) integrate it with the www.rjmprogramming.com.au domain’s Landing Page. We did this for two reasons. It was probably a good visual cue for users, who may be more inclined to click an icon, than a link, these days (… am not sure yet …) and because support for Flash<\/a> is becoming too difficult with the Flash we had going on the Landing Page.<\/p>\n

As such we decided to replace the contents within the iWeb<\/a> position:absolute<\/a> div<\/a> (that iWeb loves to use) that had Flash with new home-grown HTML iframe<\/a> webpage that shows those latest 8 recent posts as referred to below.<\/p>\n

The change did pan out to involve the “few times a day code”. Do you remember, below …<\/p>\n

\n

Why would this job have “a few times a day” functionality? … Well, the images change when a blog posting goes live, and at this blog this happens once a day, so there is no need to slow functionality down getting these images together more often than during that time the new blog posting is scheduled. So this “a few times a day” functionality uses (the web server Linux) crontab\/curl … what a team … and we wrote recent-posts-2.php<\/a> to be the PHP run with a curl … chortle, chortle.<\/p>\n<\/blockquote>\n

… well, all that still applies, but what if we were to intervene in that code to write out HTML that suits that proposed iframe we talked about, above.<\/p>\n

So that’s where we get … recent-posts-2.php<\/a> … and the changes to code … here<\/a>.<\/p>\n

That leaves a good zero.html<\/a> arrangement that is dynamic with those “few times a day” arrangements we already had in place, and which you can read more about below, as you wish. Alas, one speaks too soon, as there is something else needed for zero.html to be user-friendly enough for mobile usage … the scrolling is not as “truncaty” (is this a word?) on mobile devices as on non-mobile devices and we have decided here to just show the two most recent icons where the platform is mobile … and how was this done? After reading this brilliant advice<\/a> … thanks … we did some Javascript onload functionality (in zero.html) as below …<\/p>\n


\n<script type='text\/javascript'> var one_o_five=600; function ol() { if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { one_o_five=105; for (var j=3; j<=8; j++) { document.getElementById(j).style.display='none'; } } } <\/script>
\n<\/code><\/p>\n

All that is left is to wipe out the iWeb div Landing Page functionality that was Flash and put in, instead …<\/p>\n


\n<iframe style=\"width:264px;\" title=\"Recent Blog Posts\" src=\"PHP\/zero.html\"><\/iframe>
\n<\/code><\/p>\n

… all okay? You can see it at the www.rjmprogramming.com.au Landing Page<\/a> a little bit down at the left hand edge of (usual) functionality.<\/p>\n

\n

Previous relevant WordPress Recent Post Image Follow Up Tutorial<\/a> is shown below.<\/p>\n

\"Wordpress<\/a>

Wordpress Recent Post Image Follow Up Tutorial<\/p><\/div>\n

A couple of days back (WordPress Recent Post Image Primer Tutorial<\/a>) we did some functionality work on this WordPress Blog’s Recent Posts menu, and left it more functional for sure and very much “okay” … but is “okay” okay? … well, OK, it might be “okay” for a while, but think we seek more functionality:<\/p>\n