Selecciona siempre la opción “Guardar para web”

Adobe Photoshop es, de lejos, el editor de gráficos rasterizados más popular del mundo, y es utilizado por millones de diseñadores webs y webmasters. Entre otras muchas funciones, Photoshop cuenta con un optimizador de imágenes muy eficiente que te permite optimizar imágenes para la web.
Como he dicho antes, son muchos los usuarios que trabajan con Photoshop para retocar las imágenes que luego suben a su web, pero son pocos los que conocen la opción de Guardar para web. Esta herramienta te permite guardar una copia optimizada para la web de cualquier imagen, reduciendo drásticamente el tamaño del fichero sin que afecte a su calidad.
Para utilizar esta opción en Adobe Photoshop, abre la imagen en cuestión con el programa y ve a Archivo > Exportar > Guardar para web. Escoge el formato que mejor se adapte a tus necesidades y guarda la imagen. Una forma simple pero eficiente de hacer que tu sitio web cargue más rápido y de ahorrar en ancho de banda.

Impedir el hotlinking

Llamamos hotlinking a la práctica de utilizar y mostrar ilegalmente recursos externos (alojados en otro servidor) en nuestro propio servidor. El problema de todo esto es que cuento un sitio web muestra las imágenes de tu web, está consumiendo tu ancho de banda, y como bien sabes, una vez traspasado un límite, el ancho de banda se paga (y con creces).
Por ello, debemos impedir que se realice esta práctica en nuestro proyecto para así ahorrar en ancho de banda y reducir los costes relacionados. Existen varias formas de hacerlo.

Con Apache
 
RewriteEngine onRewriteCond %{HTTP_REFERER} !^$RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yoursite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?bing.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yahoo.com [NC]
RewriteRule .(jpg|jpeg|png|gif|svg)$ http://tusitioweb.com/hotlink.jpg [NC,R,L]

Con Nginx
 
location ~ .(gif|png|jpeg|jpg|svg)$ {
     valid_referers none blocked ~.google. ~.bing. ~.yahoo tusitioweb.com *.tusitioweb.com;
     if ($invalid_referer) {
        return   403;
    }
}

Cacheo de imágenes

Las imágenes, a diferencia del texto, rara vez se actualizan una vez que se muestran en tu sitio web. Por esta razón, es absolutamente innecesario que el navegador de tus visitantes descargue las mismas imágenes una, y otra y otra vez.
Lo que hay que hacer es simplemente decirle a los navegadores que no necesitan volver a descargar las imágenes cada vez que visitan tu web y que pueden utilizar las copias de la memoria caché local. Para hacerlo, debemos agregar el siguiente código en el archivo .htaccess de tu proyecto: 
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"</filesMatch>
El código anterior indica al navegador que si un archivo es uno de los tipos mencionados (CSS, JPG, JPEG, PNG, GIF, JS o ICO), debe almacenarse en caché durante un mes (2592000 segundos). La implementación de esta solución conocida como leverage browser caching hará que tu sitio web cargue más rápido y reduce la cantidad de ancho de banda utilizada.

No utilices imágenes para cosas que puedes hacer con CSS

Hubo un momento en que el uso de imágenes para cosas como imágenes de fondo, botones o contenedores era muy común. Fue justificado ya que la tecnología CSS no era en ese momento tan compleja y poderosa como lo es hoy en día.
Desafortunadamente, muchas personas todavía confían en las imágenes para cosas que se pueden reallizar de forma sencilla usando CSS, como degradados, por ejemplo.