InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Site Performance tutorials

  • Chrome PageSpeed insights
  • Google custom search with lazy loading
  • Install and monitor memcache for php on Ubuntu
  • Internal vs external css
  • Javascript in header vs footer
  • PHP apc - setup and performance benchmarks
  • Php apc vs memcache
  • Using inline image for site performance
 
  • Home
  • > Tutorials
  • > Web Development
  • > Site Performance

PHP – how to use inline image for better site performance

By admin on Jan 17, 2016

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.

Suggested posts:

  1. How to install wordpress on Amazon AWS-EC2 Classic Ubuntu Linux micro instance
  2. How to convert HTML canvas to png image using javascript
  3. Convert svg xml text to png image using canvas
  4. Php apc vs memcache
  5. HTML5 canvas draw image examples
  6. Run Internet Explorer (IE) on Mac using VirtualBox and ievms script
  7. CSS – align multiple divs horizontally
  8. Mac – how to copy, alias, move using drag/drop and mouse pointer indicators for these
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged PHP, Site Performance, Web Development
  • Browse content
  • Article Topics
  • Article archives
  • Contact Us
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

Copyright © 2025 InfoHeap.

Powered by WordPress