InfoHeap
Tech tutorials, tips, tools and more
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. Tips on improving the performance of your WordPress blog or site
  2. CSS – how to align image and text in center vertically
  3. CSS – inline-block and baseline alignment
  4. How to install and run Chrome PageSpeed insights for measuring site performance
  5. AngularJS – include inline template
  6. How to crop an image using imagemagick convert
  7. PHP apc – setup and performance benchmarks on Ubuntu Linux
  8. How to use google custom search for wordpress site
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged PHP, Site Performance, Web Development

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | 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

Copyright © 2022 InfoHeap.

Powered by WordPress