Quick blog article about the subject of animated images.
When designing my web-ring integration in the cellar door. We noticed something when our cron.job went to work by converting old standards of jpg png and gifs into newer standards. Simply put it stopped firefox from processing animations.
The short story is, that Firefox is aware of it. Here’s the bug report. 2 years since the report. Not much progress. Read on if you want to know more.
To some that have been reading for a while now you may be thinking that I’m going to introduce something new or revolutionary that will change the landscape of website design. When the truth is. This is actually an old standard that’s been around but should have been implemented a long time ago. It’s just for security reasons WordPress blocks this format by default.
So, we’re going to unblock it on our site and use it. To those who have visited my front page and/or art section chances are a vector has been uploaded and presented to you on your browser like the icon on the right.
We’ve talked about the videos, we’ve talked about the images. Now we talk about the web server, Nginx.
In this entry, we’re going to get crazy technical with how we deploy all of these new image formats that are being introduced in what feels like “The Great Video/Image War” to finally put GIFs, JPEGs, PNGs, and MP4s to bed. But instead, we’re going to talk about a section that seems skipped a lot. How do we actually implement these new formats? Because if we do a review on an image format, it’s good. Then as bloggers, it would be hypocritical to not apply these formats to our site. It however opens up questions. How do we maintain the security of our readers while at the same time giving them the very best image with the lowest bandwidth conceivable? Thankfully since we have a VPS a lot of the encoding is handled via CRON. While a lot of the deciding factors of which browser gets served and what file are all in the hands of NGINX web daemon.
Why did we implement AVIF here? Read on if you want to know more.
This blog is just one part of a multipart series on how to use the Raspberry Pi with the Ouya. It is designed this way because frankly there is way too much to cover in a single blog. Links for each of the articles as well as the header/main article will be included at the bottom of each entry to allow users ease of use in following along.
WebP from Google will deliver faster internet to you. But at what cost?
WebP is something I found out by total accident when asking the simple question of:
Why does Google Chrome not support animated .PNG files?
It turns out Google instead of including the format into the library on their browser decided instead to exclude it. Although you can simply download an animated PNG plugin for Chrome here. That’s not the point. The point is it should be natively supported which it is not. If Google finally did support animated PNG files then Google now supports APNG which now we can put an axe into animated .GIF files. A Format which is still in use since the late 1980’s! Animated GIF files are now old enough to run for president of the United States! However, Google’s attitude was as follows:
Why spend any more time on other formats like PNG and JPG when WebP will be cooler!
Note: This issue with Google Chrome as of 7/25/2017 has now been resolved but the entry still stand for archival reasons.
A while back I did a quick article about PNG compression. Looking back on it. We have to admit that it was a rather weak and lackluster approach to compression. We could easily go back and amend our newest discoveries but the discussion of compression expands into multiple formats. So lets dive right into what’s going on with this site and probably every WordPress generated site in existence and why compression is all around good for you.
Social Network B-Gone. Some basic CSS to clean the angular theme.
I’ve made the decision to eject all social network outbound links to appear on every page of my website. This took some doing as I had to page through a lot of the Angular theme forums to ultimately find out Which CSS code controlled the very top section of my page. I had to modify my custom.css file which was found in the theme home directory underneath ./css and added the following lines.
For PNG Optimization: PNG (or Portable Network Graphics) was a replacement to GIF and is one of the most widely used lossless graphic formats on the net. Whenever you are setting up a website that has a heavy amount of images going for it; You often have to rely on other formats then JPEG or .jpg because although the .jpg is good for most cases such as photos it is often a self-destructive file to have as every time you re-compress the quality of the .jpg gets worse and worse. Also known as lossy compression where the image is compromised to better suit the compression of the file.