PHP – how to use inline image for better site performance

For small images it is a good idea to embed inline images using img src value data:image/png;base64. This will prevent one extra round trip to server. Here is sample php code snippet for adding inline png image in an html page. In case you want to use it for wordpress, it can be used in custom plugins where images are being displayed.

$picture = base64_encode(file_get_contents($pngimgfile));
$src = "data:image/png;base64," . $picture;
$htmlcode = "<img src=\"$src\"/>";

Note that you should also consider adding width and height attributes for better performance. It helps browser render things even before downloading the full image as it know the size upfront.

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments