Search code examples
imagemedia-queries

using image sets or dynamic image resize?


I couldn't find proper question here so I've decided to ask my own - according to your knowledge and experience. What is a better solution of making website prepared to all screen resolutions. + Media Queries + multiple image sets + Media Queries + jquery script to resize images from one set (e.g. images prepared for screen width 1600px)

Which solution is better? From one side i think multiple images are better because of img quality but they will absorb a lot of transfer..

thank u!


Solution

  • Having multiple image resolutions already processed won't mean you will use a lot of transfer, you will use the optimum amount of bandwidth given the resolution used by the user, without sacrificing image quality.

    You should do this:

    1) Figure out which image sizes you will need, given the kind of devices your users are using

    2) Create a script that will convert your images to the needed sizes when you upload them

    3) Create a proper folder structure to store each image size, so choosing the proper image will take as little time as possible

    4) Avoid inline image resize, as this is what really wastes bandwidth