Grundsätzlich: willst du mit Bitmaps arbeiten gibt es keine "dpi"-Angabe. Die wird dann durch das Ausgabegerät und dessen Auflösung bestimmt. Gerasterte Bitmaps haben eine feste Rasterpixelauflösung. Es gibt also bei zweidimensionalen Werken nur eine x- und eine y-Auflösung.
Du musst nun von jedem Bild ein Thumbnail in einer groben Auflösung wie 400x300 und eine Vollansicht in hoher Auflösung erstellen. Wichtig für die Qualität insbesondere der Großversion ist eine gerade Auflösungsskalierung, also in Schritten von 2^n. Für das Thumbnail ist dies bei hinreichend großem Auflösungssprung (z. B. von 2048x1536 auf 400x300) nicht so kritisch, bei geringen Auflösungssprüngen aber insbesondere in der Großansicht sehr unschön.
Bewährt hat sich bei mir: Skalierung des Ursprungsbildes auf die Hälfte, jedoch mindestens 1024 Pixel Breite. Bei 4 MP Cam ebenso verfahren. Wenn die Auflösung größer als 1280 Pixel Breite wird würde ich auf ein Viertel herunterskalieren. Skalierung immer mit dem bestmöglichen Filter wie bikubischer Interpolation o. ä. Nach der Skalierung eine unscharfe Maske anwenden. Skalierung immer (!) von der Maximalauflösung des Ausgangsmaterials aus.
Beim Thumbnail analog, nur dass hierbei bei hinreichend großem Auflösungssprung auch schon mal krumme Teiler tolerabel sind. Thumbnails dienen ja eh' nur der schnellen Vorschau, da kann man Bildqualität gegen kompakte Voransicht, schnelle Übersicht und schnelle Ladezeiten eintauschen. Skalierung dennoch immer von der Maximalauflösung des Ausgangsmaterials aus, hinterher unscharfe Maske drüber.
Achte auf die Dateigröße der Bilder. Die Großansicht sollte bei Fotos mit 80 - 120 kiB auskommen. Progressive Kompression macht sich immer gut, da sie in Wartezeiten schon den optischen Durst etwas stillt. :) Die Thumbnails kommen bei Auflösungen wie 400x300 gut mit rund 20 kiB aus. Weniger ist dabei mehr, bei starken Artefakten sind auch mal 25 kiB i. O.
Die Bilder bindest du dann einfach in deine Seite ein, der Code ist ein super simpler Hypertextlink mit <img /> statt Linktext: <div>
<a href="./pfad/grossversion.jpg"><img src="./pfad/thumbnail.jpg" width="Breite Thumbnail" height="Höhe Thumbnail" alt="alt-Text" title="Title-Text" /></a>
</div> Den lästigen Rahmen unterdrückst du per CSS: img {
border-style: none;
}
Eine konkrete Umsetzung von mir findest du hier: http://www.cyberclimber.de/lan/bilder-lan2/ Bitte aber nicht den Code einfach klauen, sondern nur als Beispiel verwenden, danke.
p.s. Da ich es gerade sehe - Finger weg von "target="_blank"". Das ist deprecated und eine unnötige Bevormundung des Benutzers.