J'ai une grande image JPEG d'environ 3500 x 2500 pixels et 4 Mo de taille.Comment gérer une grande image dans la page HTML
Je veux afficher cette image dans une page HTML afin qu'elle prenne environ les 3/4 de l'écran, et aussi la compresser, afin qu'elle se charge rapidement, mais sans trop compromettre la qualité.
Est-ce faisable?
Oui, mais pas en HTML. Vous devrez exécuter une sorte de script côté serveur qui permettra de réduire la taille de l'image avant il est transmis à travers le fil au navigateur. Les langages qui peuvent faire quelque chose comme ça incluent (en ordre alphabétique donc je ne serai pas accusé de favoritisme) Perl, PHP, Python, Ruby et beaucoup d'autres. Cependant, cela nécessite de l'expérience en programmation ou la volonté d'apprendre (en lisant des sites Web et/ou des livres). Je recommanderais contre posant une question ici sur StackOverflow qui demande essentiellement comment le faire.
Si vous voulez que votre jpg prenne ¾ de l'écran, vous ne pouvez pas supposer que tout le monde avait la même taille de fenêtre de navigateur. Et vous voulez probablement ajuster la taille de votre image lorsque l'utilisateur change la taille de la fenêtre.
Il est possible de faire en sorte que votre image s'étire à l'écran en utilisant la taille d'arrière-plan de l'attribut CSS 3, mais cela ne fonctionnera pas dans tous les navigateurs. Sinon, vous pouvez le faire avec un peu de Javascript. Le problème est que quelle que soit la technique que vous décidez d'utiliser, vous aurez des problèmes avec la qualité/taille de l'image. Si vous gardez votre photo à 3500px, elle sera nette si vous la regardez sur un grand écran, mais elle sera longue à télécharger. Si votre image est trop petite, elle se chargera rapidement mais vous verrez les pixels sur un grand écran.
Je pense que la plupart des gens utilisent une résolution d'écran entre 1024px et 1280px. Alors peut-être que vous devriez commencer à tester autour de ces tailles.
Non, ce n'est pas faisable en HTML. HTML ne compresse pas les images. Il peut redimensionner des images en spécifiant des attributs de hauteur et de largeur, mais ils ne seront pas beaux.
Vous devez redimensionner les images manuellement.
HTML
<img class="big_image" src="x.jpg">
<!-- don't set width and height in the HTML -->
CSS
img.big_image {width:75%; -ms-interpolation-mode:bicubic;}
/* don't set the height and it will be proportionally scaled */
L'image sera réduite à 75% du premier anscestor positionné. Vous devrez peut-être définir la largeur du corps et html à 100% dans le CSS aussi je ne suis pas sûr.
Le MS css thingy spécifique pour IE7 et plus tard, car par défaut, ils utilisent peut-être qu'il serait plus proche voisin interpoler. qui est stupide.
Les images sont déjà très compressés. mieux répondre étant un jpeg ou png, essayez les deux et voyez lequel est plus petit
Faisable à quel point? –