Will the following code make my css deal with images in the optimum way?

  • In Appearance/Editor, the Stylesheet for my theme has in it the following code:

    #content img {
    margin: 0;
    max-width: 640px;
    }
    #content .attachment img {
    max-width: 900px;

    Does this mean that if I use the ‘Add an image’ button in WordPress, and then pick ‘From url’ to post an image in a blog post, that if the image at the url is bigger than the maximum width of my blog post, that it will not matter? — That it won’t result in the image taking longer than otherwise necessary to load on the users computer?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Let’s see if I understand you correctly here, you want to upload a photo in your content area via WordPress posts/pages and want it a certain size?

    If that is the case (or thereabouts) then the CSS code up there will do it for you. The first chunk of code is telling you that any content image added into a page/post will be 640px. And if I’m not mistaken, the second chunk of code is telling the site that if you add a “Featured Image” to your post that the max width is 900px.

    Having images that big will slow a server down, because 900px wide is about the size of your entire site to begin with. (The 2011 theme is 960px wide just for an example).

    And no it won’t matter what picture you upload, if it’s bigger than 600px for content image, or 900px for featured/attached image it will be resized down to the respected sizes because the CSS is telling it to. ??

    Did this help any?
    Megan

    it will be resized down to the respected sizes because the CSS is telling it to.

    But the entire image will still be loaded – even if it’s 1000px wide – which could negatively impact your site’s performance. #content .attachment img is probably referencing the image in it’s own post (attachment) page – and not a post thumbnail/featured image – when the full size image is often used. See the Post Url option when inserting images.

    Resizing images using CSS is not really the best idea. It’s far better practice to upload an image of the size that you will need or that fits into your current theme/layout. Theme developers use CSS max-width because, for the most part, they have little or no control over that their users will eventually do. At least they can stop images breaking the design layout this way – even if it’s not ideal.

    So, on the whole, if you’re keen to maximize your site’s performance, try to choose images that will fit within your theme’s content width and don’t rely on CSS. It’s there as a design fallback – not as an image resizing tool.

    I don’t know if this will help, but one idea for you to support images loading the appropriate width/height for the media connected to your site is to use media queries in your css.

    You do something like:

    • Put all your main layout css for the ‘full size’ site including the largest of your images
    • Then you specify your media queries that wrap anything that should happen for a given size display, like:
    • Then for a smaller screen or when a browser is resized you might use:
    • `@media screen and (max-width: 760px) {
      #nav-main {
      clear: left;
      float: left;
      }
      #nav-main li { margin: 0 .5em 0 0; }`
    • You can see that by the two media queries shown above we do different things with the nav menu if the screen is 1200 or bigger than we do if the screen/browser is between 760px and 1200px
    • This same idea works for images where you might go like:
    • in the 1200px and above you could have and image of candy set like this: #feature-candy { background-image: url(images/icon_candy_128-trans.png); }
    • for the media query that is 550px or smaller you change the size of the candy image:
    • @media screen and (max-width: 550px) {
    • #feature-candy { background-image: url(images/icon_candy_64-trans.png); }

    Then you just need to make sure you upload the different sized images to your server.

    Regards,
    Steve

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Will the following code make my css deal with images in the optimum way?’ is closed to new replies.