please i want to reduce the size of images when i am rendering it on my site. my site is very slow now. i want to accept any size now but when rendering please i want to reduce the size. thanks in advance

Recommended Answers

All 3 Replies

what is the language or system to resize the images that you use?

Personally i recommend that use css system, only you need add some Class/id to your style page.

Example CSS code:

#portal-logo img {
   width: 33%;
   max-width: 180px;
}

Example HTML Code:

<div id="portal-logo">
    <img>URL1.png</img>
    <img>URL2.png</img>
</div>

With it, all images that are in the div will have only the 33% of width and the maximun width will be 180px

Sorry for my english.

upload images of the correct size would seem to be the sensible way to work. So use your favourite free image manipulation software and make them smaller.

Rendering in the browser occurs after an image has downloaded. Usually it's the downloading of the image that takes time. If you wish to reduce the amount of image data transferred on your site here are a few things you can try:

  • Resample images to reduce their resolution (recommend 72 DPI).
  • Resample images to reduce their dimensions.
  • Try different file formats. Generally JPEG for photos, GIF for line drawings, PNG for both.
  • Try different levels of compression.
  • Reduced color palettes.
  • Try graphic file optimizers, e.g. JPEG optimizer, tiny png, and others.
  • Use a content delivery network (CDN).

For general performance advice see Yahoo's "Best Practices for Speeding Up Your Web Site". I haven't checked whether the article has been updated for HTTP 2.0 yet, which will make some recommendations perhaps less relevant when it's enabled on your server, but still worth a read.

commented: Great +15
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.