2 technical questions about image size?

  • Resolved johannes999

    (@johannes999)


    1 year, 5 months ago

    hello,

    1-when I resize an image in photoshop and I save it I put the width and height in naming at the same time

    for example save as :

    sport-auto-image 1024-1024.jpg

    is this wil be enough to understand wordpress the size of the image or I have to set it also explicitly in html like this :

    <img src="sport_auto 1024-1024.jpg" alt="sport auto" width="500" height="600">

    2- after studying a little I have decided to use only 2 size of images when I upload it and let wordpress take care of it because I red that wordpress wil automatically give the right size for every resolution.and I see also when I open inspect elements on image and hover on src I see the exact size of delivered image .

    I see in media section of wordpress that wordpress created already 3 formats automatically .

    1- small 2- medium 3- large format of each image.

    I see also there is a lot of opinions about the size of images in google every one telling something.

    after searching a while I decided to use only this 2 formats :

    1024-1024 and 1920-1080 . I see the moderator of this forum has adviced me few months ago that using 2 format wil be ok.

    for last time I ask do you think this 2 formats is enough for responsiveness?

    off course I wil use compression and cdn plus webP format and onother plug ins plus Gzip compression,lazyload etc.

    thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    Hiya Johannes,

    The img tag height and width attributes are not required, but are strongly encouraged as it helps the browser to avoid layout shifts. Ultimately, what manages the size of an image on the page is its CSS.

    Adequacy for responsiveness depends on what the display size is on the page. A 1024px image will work for a small image on a small mobile screen, but it will slow the page load speed and consume more mobile bandwidth to fetch an image that’s much larger than necessary. Ideally, you’d have an image available that’s close to the image’s size as displayed. For example, on a laptop screen, perhaps the image displays at the full 1024px. But on a non-retina mobile phone, may it’s only 300px. It’d be nice if there were a 300px image available, but the mobile device can work with 1024px if necessary. It’ll slow down the page load and consume additional bandwidth, but it’ll work.

    It’s up to you if you want to provide that kind of size range or not.

    Thread Starter johannes999

    (@johannes999)

    thanks,

    it is confusing .

    I have changed in media

    thumbnail to: 360-360

    medium:960-500

    large:1920-1080.

    and I am making now 2 size of images 1920-1080 and 960-500 and I wil upload them to my theme . but before uploading it I am using tiny.png.com to compress the images and I wil use free version of litespeed cache plus jetpack plug in to optimize my site in google insights .and in Gmetrix.

    now when I right click on the header image and open inspect elemnt and I go to 360px resolution and hover on src img on the right side I see wordpress is using 360-203 pixels size for header image .

    what do you think about my strategy? or there is any other suggesting to be beter?

    thanks

    Moderator bcworkz

    (@bcworkz)

    That seems reasonable to me! I’m no optimization expert, but I think if you’re roughly covering the range of potential display sizes for your site on the full range of device screen sizes, you’ve done as well as is possible for pixel sizes.

    Thread Starter johannes999

    (@johannes999)

    thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘2 technical questions about image size?’ is closed to new replies.