-1

I have a website that displays a photo gallery of pictures for the end-user. I want to make the website fast in uploading images based on the user's device size.

For example, if they are on a desktop with a high pixel ratio, the image displayed would be a very large high quality image. However, if they are on a mobile device, the image doesn't need to be large pixels, and instead the website would produce a significantly smaller sized image.

Please note, I'm not attempting to resize an image based on screen size. I want the website to produce the same image but different file sizes. Even if that means me uploading 10 different sizes of the same image to the server. I'm guessing it means changing the scr based on screen size.

Hope that makes sense, thank you for your help!

Bill DeMaria
  • 9
  • 2

3 Answers3

0

Why dont you have a look at media query in CSS...

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Jegadesh B S
  • 504
  • 1
  • 5
  • 13
0

I understand the translation of what you asking : "i need content optimization". Yes using eg: php + gd you can store versions of your one pic to different sizes .there is no logic to send to a android device with the screen 800 x 600 px a resized 4800x 2000 px to so

  1. upload an image to a folder https://www.w3schools.com/php/php_file_upload.asp

2.resize that image using a modified version of Resize image in PHP in how many sizes you like

3.detect user's screen size How to detect the screen resolution with JavaScript?

4.on a if else parser decide witch version(size) will be better to put in load an image after clicking a button

done! :D

Constantin
  • 415
  • 2
  • 12
0

try this 

@media only screen and (max-width:600px)
 {
  .class
 {
   background-image:url("src for maximum 600px");
 }   


  @media only screen and (max-width:1200px)
 {
  .class
 {
   background-image:url("src for maximum 1200px");
 }
Jakub Menšík
  • 148
  • 9