Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

image loading

Featured Replies

hi i m using photoshop sliced images in .png format for my website. As a banner and left buttons and the bottom bar.

But its taking too much time to open in my webbrowser as i prewiev it. pls help me out that how do i load images in my website which will open smoothly in any webbrowser without taking much time. and pls suggest any software which helps to reduce the size of the file without loosing its colors and the quality.

thanking you

anand

Try slicing your images up into smaller pieces?

 

Photoshop has all of the image compression/optimisation tools you will ever need.

Try saving for web, as PNG-8 instead of 24 and drop the number of colours.

 

Else save as jpgs or gifs instead, play around with the different types til you get the right balance between image size and quality.

 

I don't think there is anything better out there than Photoshops Save for Web tool..

 

- Eris

You can try one of these:

 

1. Slice the big image in smaller parts.

2. Use preloading code in the header part of your web page.

3. Use jpeg or gif file.

4. Use a separate table for the image panel.

Here's the advice you may find useful...

 

1. Make sure your document 'image size' is showing the image as being 72ppi

 

2. NEVER scale images in your browser... make them the correct size BEFORE export

 

3. A PNG file has no compression options, but making them the CORRECT SIZE (both dimensionally and resolution) will ensure that only the image which needs displaying is loaded. If you, for instance, have a 1200x1200 PNG file in PS, and scale it to 300x300px on the page layout, the browser is STILL LOADING the 1200x1200 file to re-scale it.

 

4. Determine which file type suits the image best: solid colours or just text is better saved as an optimised GIF, wheras pictures or graphics save better as a JPG or PNG.

 

5. Try and use the 'Save for Web' command in Photoshop, and keep an eye on the 'filesize' area. This will tell you how big the final image is going to be. For instance, an 850px x 120px top header will ideally be less than 70kb. Anything bigger is just crazy.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.