Retina display
En la llamada Retina Display, la mayor densidad es tal que el ojo humano no distingue los pixels. Es más placentera de ver y eso favorece la presentación de imágenes de mayor resolución.
Sin embargo, las imágenes de baja resolución, usadas aún ampliamente en la web, quizás no se vean tan bien.
Asi que puede ser conveniente ir tomando en cuenta modos de presentar mejores imágenes para aquellos que ya tengan esos dispositivos.
@2x
@2x es el sufijo que Apple ha convenido dar a aquellas imágenes en mayor resolución. Así, se puede tener apple.jpg y apple@2x.jpg.
Optimizando imágenes
El procedimiento básico consiste en duplicar las dimensiones de la imágen, pero seguir presentándola en el mismo espacio. Es decir, si apple.jpg es de 100 x 100 px, apple@2x.jpg sería de 200 x 200 px.
El tamaño de la imagen @2x no tiene que ser necesariamente muy grande. Como se explica en el artículo Retina revolution, es posible aumentar la compresión de la imagen mayor para obtener un archivo de tamaño aceptable sin que se afecte la nitidez percibida, .
Plugins de ayuda
En jQuery, http://retinajs.com/ detecta si el usuario cuenta con retina display y sirve la imagen @2x, si estuviera disponible.
El ártículo A guide for creating a better retina web dice que para los usuarios con retina hace una doble carga de recursos. Habria que verificarlo.
En WordPress, http://wordpress.org/extend/plugins/wp-retina-2x/ genera las imágenes que correspondan y las sirve cuando sea necesario.
SVG
SVG permite usar en la etiqueta img gráficos vectoriales que se muestran siempre bien. No es para fotografías, pero permite mostrar motivos gometricos, gradientes, iconos, etc de una manera muy eficiente.
Las inconveniencias que presenten algunos navegadores en ciertos casos, sería temporal. Se espera que el apoyo a svg vaya mejorando.
Fonts
Las fuentes son vectoriales, así que se presentan tan nítidas como lo permita el sistema operativo.