Home>

Please let me ask you a question because there are two points that may be worrisome when displaying images on the web.

■ First point
How do I decide the size of the image to be displayed?
If the size is too large, the display speed will be delayed, but if it is too small, the image quality will be poor and you cannot find the right size.
If i have any best practices, please let us know.

■ Second point
Basically, when displaying an image on the web, I think that the image on the server is adjusted with html/css and displayed.
Does leaving a large image on the server delay the display speed? Therefore, is it ideal to put an image of the size to be displayed on the web as it is on the server so that it is not necessary to reduce the image for display with html/css?

  • Answer # 1

    ■ First point
    In my case, I basically decide how many px width or height the image should be displayed. As you said, the larger it is, the longer it takes to load.
    However, when displaying the entire screen, the width may be limited to 1300 to 1500 at most, and speed may be prioritized over resolution.
    Also, in any case, the images used are always optimized in Photoshop before being uploaded to the server.

    ■ Second point
    We may prepare two points, one for thumbnails and one for enlarged display, but in some cases, using the same one has the advantage that only one sheet can be read, so I think it depends on how you use it on the site. Thumbnails.
    If you want to display many images on the same screen, it is much faster to prepare a smaller size.
    By the way, in WordPress etc., when you upload an image, it is automatically processed into 3 sizes and each is saved with a different name, and it seems that the size that suits the purpose is selected when creating a page.

  • Answer # 2

    ■ Second point

    Basically, when displaying an image on the web, I think that the image on the server is adjusted with html/css and displayed.

    Since the size of the image may change frequently during development, I adjust it with CSS etc., but in the production environment I upload the one resized to the actual display size to the server. This has the advantages of reducing the amount of image data and eliminating the image reduction process.
    Although cerfweb is also written, depending on how the images are used on the site, uploading multiple images for each size used can make loading lighter. Images may be separated between the smartphone and the computer.