Warning: This answer is outdated and should not be relied upon.

1) Mobile average latency has significantly improved in 2017. Check out the details at this link

2) Learn about HTTP2 multiplexing at this source

Consider using "Data URIs" for mobile sites to reduce latency on cellular networks. However, remember to assess each case individually as data URIs may not be suitable for all scenarios in mobile web apps.

It's important to note that mobile browsers have limitations on file caching sizes. Stay informed about these limits to optimize your use of data URIs. Read more at this website

Embedding an image in your CSS file is fine if you only use it once. However, if you find yourself needing to reference the same image multiple times or using more than one image, it might be worth considering creating a single image map instead. This way, you can crop out individual images from the map (check out CSS Sprites for more information).

One strategy I recommend is to utilize two distinct stylesheets: First, one containing your typical style definitions and then another dedicated to encoding images in base64.

Remember to link the base stylesheet before the image stylesheet to ensure proper loading order.

This approach ensures that your standard stylesheet is quickly downloaded and applied to the webpage while also taking advantage of reduced http-requests and the other benefits provided by data-uris.

Utilizing Base64 encoding may increase the image size slightly once GZipped, but the advantages for mobile optimization far outweigh this drawback. As responsive web design continues to be a prevailing trend, it is strongly recommended.

The W3C also endorses this method for mobile devices, and if you are using the asset pipeline in Rails, it automatically includes this feature when compressing your CSS.

https://www.example.com/w3c-recommends-base64-encoding-for-css-images

My opinion differs from the suggestion to generate distinct CSS files for non-editorial images.

If these images are intended for user interface purposes, they fall under presentation layer styling. In the context of mobile user interfaces, consolidating all styling into a single file is beneficial for caching efficiency.

My situation benefits from being able to implement a CSS stylesheet seamlessly, as it includes all necessary images already embedded within.

Recently, I developed an innovative online tool for analyzing CSS and HTML:

Check it out here!

This tool has the ability to:

• Download and analyze HTML/CSS files, extracting href/src/url elements
• Identify compression (gzip) and size data on the URL
• Compare sizes of original data, base64 data, and gzipped base64 data
• Convert URLs (images, fonts, CSS, etc.) into a base64 data URI scheme
• Determine the number of requests that can be saved by using Data URIs

I am open to any comments or suggestions you may have.

Sincerely, Antonin

If you're looking to convert an image into a data URL in PHP, there are a few methods you can use.

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Alternatively, you can display it using dynamic CSS.php file:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

1 While these methods are quick and effective, another option is to use fopen() instead of file_get_contents():

<?php // convert image to dataURL
$img_source = "feed-icon.gif"; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

Source

For all the Sublime Text 2 users out there, a helpful plugin is available that allows you to easily convert images into base64 code directly within ST.

This handy tool is known as Image2base64: https://github.com/tm-minty/sublime-text-2-image2base64

Just a word of caution - make sure not to save the generated file from the plugin as it could potentially cause data loss and overwrite existing files. Stay safe!

Appreciate the insights provided here. I've found this embedding to be quite handy, especially for mobile devices, particularly with the cached images' CSS file.

To simplify things, since my file editor(s) don't have built-in support for this, I've created a couple of straightforward scripts for editing on laptops/desktops. I'm sharing them here in case they may be helpful to others. I opted for PHP as it handles these tasks directly and efficiently.

For Windows 8.1, for example---

C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo

...you can create a shortcut to a batch file in that directory as an Administrator. The batch file will then execute a PHP (CLI) script.

You can simply right-click on an image in File Explorer, select "SendTo" and choose the batch file.

Grant administrative permissions, and wait for the command prompt window to close.

Then, you can easily paste the generated result from the clipboard into your text editor...

<img src="|">

or

 `background-image : url("|")` 

This method should be adaptable for other operating systems as well.

The batch file looks like this...

rem @echo off
rem Puts a base64 encoded version of a file onto the clipboard
php c:\utils\php\make64Encode.php %1

Using php.exe in your path, it calls a PHP (CLI) script like this...

<?php 

function putClipboard($text){
 // Windows 8.1 workaround ...

  file_put_contents("output.txt", $text);

  exec("  clip < output.txt");

}


// based somewhat on http://perishablepress.com/php-encode-decode-data-urls/
// convert image to dataURL

$img_source = $argv[1]; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);

$finfo = finfo_open(FILEINFO_MIME_TYPE); 
$dataType = finfo_file($finfo, $img_source); 


$build = "data:" . $dataType . ";base64," . $img_string; 

putClipboard(trim($build));

?>

From my findings,

Recommended Usage : 1. Utilize this method when incorporating an svg sprite. 2. Opt for images that are smaller in size (maximum 200mb).

Avoid Using : 1. For larger images. 2. Icons as svg's since they are already optimized and compressed after gzip.