CODEWITHSUNDEEP
javascriptphphtmlcss
user12009280
user12009280

Reputation:

Server Side Image Sizing For Responsive Web Site

I need a good idea. I have a website with responsive design.

For example, I have a post and this post has a cover photo and :

The sizes are only examples. In reality, there are not only 3 sizes but 14 different sizes.

Now what should I do when uploading this image : Should I create 14 different sizes for one image ?

Holding 14 files for 1 image doesn't make sense to me. There should be a better way.

Do you have any better idea ?

Upvotes: 1

Views: 368

Answers (2)

Luca_54
Luca_54

Reputation: 539

I hope I understand you correctly, but by creating a separate layout for each device, you can determine how large the image should be for this device.

It could look something like this:

<!DOCTYPE html>
<html lang="en-US">
 <body>
    <mobilephone>
        <style type="text/css">@media(min-width: 400px){smallheader{display: none;}}</style>
        <img src="Your Image">
    </mobilephone>
    <desktop>
        <style type="text/css">@media(max-width: 400px){smallheader{display: none;}}</style>
    </desktop>
</body>
</html>

Upvotes: 0

Robo Robok
Robo Robok

Reputation: 22663

Popular approach to this problem is to generate multiple sizes of the same image dynamically. You can put the requested dimensions in the query string of the image URL, with potential size validation.

Often, these images are lazy-loaded, so the size is being generated the first time someone requests it.

Example:

<img src="http://example.com/img/image.php?file=profile.jpg&size=400x400">

The image.php file would return the contents of existing scaled image file (if it exists) or generate it if it doesn't yet.

Upvotes: 1

Related Questions