The subject pretty much says it all. What is the best and most compatible format for attaching or embedding images in an e-mail? GIF, JPG, PNG, SVG, BMP, (etc.)? Are these read by all modern e-mail clients or are there some gotchas we need to watch out for? What about mobile clients (not browser-based)? How about formats that support alpha channels?
PNGs are not supported by older Lotus Notes (6.5, 7). Using alpha transparency and true color might cause problems (e.g. in older Outlook versions). Stay with the good old GIF and JPG and you are safe. And remember that GIF animations may (a.) play slow on mobiles and that they may (b.) show only the first frame in some email environments (e.g. Outlook 2007+). I would not rely on vector graphics. However, here's an interesting example that includes a fallback image.
Related
My ranking from Google Page Speed insights is being severely penalised because of:
"Serve Images in Next-Gen Formats" more info on Google's help page here.
However, according to this, this and this those formats are supported very few browsers.
What do you do in this scenario? What
You could use the <picture> element to deliver a WebP image to users with browsers that support it, falling back to a JPEG or PNG for those that don't. The advantage of using the <picture> element rather than other fallback methods is that browsers that don't support the element will fallback to whatever source is defined in the <img> tag.
<picture>
<source srcset="img/yourImage.webp" type="image/webp">
<source srcset="img/yourImage.jpg" type="image/jpeg">
<img src="img/yourImage.jpg" alt="Your image">
</picture>
Here's a method for converting source images to WebP.
If you're using WordPress there are plugins that will automatically generate WebP images from your media library and include fallback functionality. The only one I've used is WebP Express but it served me reasonably well when a client was alarmed that their 100/100 PageSpeed Insight score took a nosedive to 30 overnight with the Lighthouse roll-out.
This does feel like another way for Google to push another propriety technology but then WebP compression is quite impressive compared to other 'next-gen' formats.
WebP is the one that currently has broader support, pretty much all major browser except Safari support it.
As colossalyouth mentioned on one of the answers you can use the picture tag to load webp images and in the case is not supported it will fallback to any other format you choose.
And if you are using background-image you can use something like modernizr to detect feature support by the browser and end up with CSS like the following:
my-selector {
background: url('../images/home-bg.webp') no-repeat scroll center center
}
.no-webp my-selector {
background: url('../images/home-bg.jpg') no-repeat scroll center center
}
I have actually done both things on my website and successfully implemented webp formats, I have created a detailed post on how I did it and the performance gains I had you can check it out here: Improve your website speed performance using next-gen formats
Until major browsers support those next-gen formats, it's probably best to continue using JPG/PNG, as they have wide-spread support. Most websites do indeed use JPG & PNG and it will take some time till browsers are in-line with next-gen tech.
You could always use an image CDN like ImageEngine. Full disclosure I work for the company behind ImageEngine.
It acts as a pull based CDN and will automatically transform your images to WebP or JPEG-2000 if the end users device supports that format. It will also automatically apply compression and resizing to further optimize your image content, but it will definitely help with your page speed.
You can sign up for a free trial and see how that improves your Google Page Speed score.
You can use a tool like https://www.imagecompress.org/ to convert your current image formats, and follow the example to update your old tags https://www.imagecompress.org/examples.
I recommend you to use "Enhanced Media Library" plugin if you're a wordpress user. It will simply allow you to directly upload Webp images without configuring anything manually.
WebP format will load faster and consume less cellular data. Anyone can work with the format and suggest improvements in WebP open source.
In <picture> attribute <source> can be used to load alternative image file formats that might not be supported in all browsers. For example, you can serve an image in WebP format to browsers that support it, while falling back to a JPEG on other browsers:
<picture>
<source type="image/webp" srcset="images/verz.webp">
<img src="images/banner.jpg" alt="Banner Image" width="100" height="100">
</picture>
Note: The element is currently available Chrome 38. Try it out with screen emulation in the Chrome DevTools. As per Google, WebP is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web. WebP does not support all browsers. For other browsers, You'll need to serve a fallback PNG or JPEG image.
If your website is in WordPress. Use plugins that will automatically convert your uploaded images to the optimal formats.
I want to create a video where I have multiple images on screen at once which are moving around or resizing as the video plays.
A vastly more advanced version would be like Facebooks https://www.facebook.com/lookback/
All I need, is to move a few images and change their scale, with set start and end times within the video.
I could obviously do this with a video editor but I'd like to just drop some images in a directory and then have a preset script which will then create the video for me.
I've a few months experience with FFMPEG so the directory part is easy, but I'm baffled on the moving bits.
Any suggestions? Many thanks.
For this you might consider the MLT framework which is essentially the open-source video editor which supports scripting.
Considering use swfcombine with pyvnc2swf and ffmpeg.
With SWF you can replace objects into a exist swf file link image or texts.
http://lists.nongnu.org/archive/html/swftools-common/2005-02/msg00116.html
Aftes editing your swf you can render a mp4 file using pyvnc2swf and ffmpeg:
http://imnartist.blogspot.com.br/2011/10/pyvnc2swf-and-ffmpeg-tutorial-convert.html
Unfortunatly ffmpeg don't convert swf yet.
With those tools you can recreate the Facebook Look Back web app for your porpuse using command line and you favorite programming language.
There's an API to do so too :you can use the Stupeflix API to do server side video renderings, using After Effects templates or built-in effects. Find it at http://developer.stupeflix.com/documentation, with a lot of other tools to do image / video processing.
Is there an image format that supports alpha-transparency and animation. While being supported by most browsers? I have found only one image format, but it was not supported by any web browsers.
No.
There is .mng (Multi-image Network Graphics), which is partially supported by GIMP - enough support to create
GIF like animations with alpha transparency - but far from .mng's full capabilities, and I know of no browser which implements MNG animation support (haven't tried either)
And, as people say in the comments, there is "APNG", which is supported by Firefox alone,
but not supported natively in GIMP.
If you really need this, I'd say the better way to go is to use some Javascript to compose a .png slideshow.
What web browsers do not support the png image type, and what is a better alternative for those browsers?
Essentially all browsers. PNG support has been in Internet Explorer since version 4, and Mozilla Firefox, Chrome, and Safari have supported it since their initial releases.
24-bit transparency is the one issue, it doesn't work in IE6 or lower. There are workarounds you can use that fix it, though. The other common image types, GIF and JPEG, don't support 24-bit transparency at all, so there's no alternative other than the workarounds.
The only modern browsers it won't work in are screen readers / text browsers for visually impaired folks and command-line enthusiasts. The proper alternative is providing an alt attribute on your img tags.
A good alternative for IE6, to support PNG transparency, is CSS3 PIE (javascript). It has many other interesting features as well of IE support.
As well this SO thread may help: How to get PNG transparency working in browsers that don't natively support it?
All common browsers(Firefox, Internet Explorer, Opera, Safari, Chrome) support the png image format. However, some old versions have problems displaying transparent PNG pictures (e.g. Internet Explorer 6.x and lower).
There are several alternatives depending on what you are trying to do.
The majority of user agents support PNGs. Older versions, and non-graphical browsers e.g. Lynx don't.
I have a pure C++/Win32 VS2005 desktop application. During my WM_PAINT response, when I paint my window, I'd like to be able to Project a transparent PNG image onto my Window.
any pointer will be appreciated.
GdiPlus has been part of Windows since Windows XP at least, and can decode JPEG, PNG and GIF files with ease.
A newer API for dealing with image files is the Windows Image Component. One of the samples covers using WIC to decode an image and GdiPlus to perform the alpha aware painting.
The Windows Imaging Component (WIC) is the primary API for native code that provides the ability to encode and decode various image formats. You can use it to load a PNG image into your application.
http://msdn.microsoft.com/library/ee719902
Alternatively you can use GDI+ but that’s pretty old technology and doesn’t work nearly as well. You can also use GDI+ to render the image but I suggest Direct2D.
Direct2D is capable of rendering a WIC bitmap directly on the GPU or in software via a window or bitmap device context.
Here’s an introductory article on Direct2D:
http://msdn.microsoft.com/en-ca/magazine/dd861344.aspx
And this one describes how to use Direct2D with WIC:
http://msdn.microsoft.com/en-us/magazine/ee819134.aspx