New answers tagged

1

How about only ~3 extra bytes, 0 extra http requests, and 0 extra img src length (or 0 uncached data-image placeholders). Can you use a blank src for image? <img src data-src="banannanannas.jpg" /> And if they have alt tags you can hide those from error/fail image: <img src data-src="banannanannas.jpg" onerror="this.alt=''" alt="some desc" /> ...


1

The image, because maintainability. In my experience it works better to use the image. This is more obvious in the actual code and easier to remember. I doubt you'll remember the encoded string for a transparant image, and even if you do, your succesors/collegaes. If you come back to this code after a few weeks, you've forgotted the base64. It'll be a lot ...


5

Definitely go with the data URI, unless you need support for IE < 8. (Browser support.) Embedding lots of tiny images directly in the HTML may look like it will take up more bandwidth than linking to them directly, but the increase will be mitigated by gzip; the only difference in the page's size will come from the difference in length between one data ...


2

At this moment I found two options, to solve this problem: The initial src of all images to be a data base 64 blank image This option not only requires a modern browser, but it can be slower on the client side since the browser must base-64 decode the image data in order to produce the image. The initial src of all images to be an url of a blank ...


10

The base64 image option should be used where you would only have a very small number of images and you want to eliminate the network overhead of fetching a picture from the server. However from what you are indicating in the question I assume this could scale to a large number of images. In this case I would use a single 1px x 1px transparent image from the ...


0

Without any idea of what your images are, one technique that is used is to keep the images the size they are, and then reduce the quality setting as low as possible. In Photoshop or Gimp, if the original image is 2k x 2k for a jpeg, for example, set the quality down to 20. Then reduce the size of the image to the largest you will use. You need to play with ...


2

Apart from the number of PoPs, for faster page load time you'll want to look at if the CDN provider provider offers SSD and HTTP/2 supported edge servers. Delivering content over HTTP/2 will allow you to use one connection for parallelism, enable header compression, among other things that will help speed up the delivery of your content. Currently no ...



Top 50 recent answers are included